zoukankan html css js c++ java

第十一节 JS事件基础

空白点击事件（没什么用处，做个介绍）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击</title>
    <style>
        body{
            border: 1px solid black;
        }
    </style>
    <script>
        window.onload = function(){
            // document.body.onclick = function(){     //当界面什么也不写时，设置一个body点击事件，
            //     alert('a');     //该句未被执行
            // };
            //但是当“body”内加入一个<button>之后，就算不点击按钮，而是点击空白区域（但是空白区域必须是按钮“aaa”所在的行，给
            //body加上边框后就很容易看到了），也会有“a”弹出。其实不放东西点击事件没反应的原因是，当body内什么也不放时，body
            //实际区域大小为0，而不是整个空白区域，所以点击失效。
            //当我们想在任意(空白/非空白）区域点击都会相应点击事件时，我们只需如下改进
            document.onclick = function(){     
                alert('a');     
            };
        };
    </script>
</head>
<body>
    <button>aaa</button>
</body>
</html>

View Code

event对象和事件冒泡

　　什么是event对象

　　　　用来获取事件的详细信息：鼠标位置、键盘按键

　　　　例子：获取鼠标位置：clientX

　　　　document的本质：用“document.childNodes[0].tagName”获取：其实document相当于网页的最大标签，是“<!DOCTYPE html>“和”<html lang="en">...</html>”两个标签共同的父级，其中“<html>”标签中放的的我们写的内容，所以上面“空白点击事件”中只有给 document 加 onclick 才能实现点击事件的响应，所以之后做开发时，保证网页最大的通用性，我们需要给document加上点击事件。

获取event对象（兼容性写法）

　　var oEvent=ev||event；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取鼠标位置</title>
    <script>
        window.onload = function () {
            document.onclick = function(ev){
                //IE浏览器  上面function() 无参数
                // alert(event.clientX);   //获取鼠标横坐标的值，其中原点位置为左上角，坐标为(0,0)
                // alert(event.clientX+','+event.clientY);    //获取鼠标的横纵坐标，并用“，”隔开

                //FF浏览器  上面function(ev) 有参数
                // alert(ev.clientX+','+ev.clientY);

                //上述两段合并为  上面function(ev) 有参数
                var oEvent = ev||event;
                alert(oEvent.clientX+','+oEvent.clientY);
            };
        };
    </script>
</head>
<body>

</body>
</html>

View Code

事件流：

　　事件冒泡：下面代码我们给三个div、body、html都添加了onclick事件，当我们点击任意一个标签时，除自身点击事件响应外，其父级及父级的父级都会响应点击事件，这就是所谓的“事件冒泡

<!DOCTYPE html>
<html lang="en" onclick="alert(this);">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style>
        div{padding: 100px;}
    </style>
</head>
<body onclick="alert(this);">
<div style="background: #ccc;" onclick="alert(this.style.background);">
    <div style="background: green;" onclick="alert(this.style.background);">
        <div style="background: red;" onclick="alert(this.style.background);"></div>
    </div>
</div>
</body>
</html>

View Code

　　　　取消冒泡

　　　　例子：仿select控件

　　　　DOM事件流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿select下拉框</title>
    <style>
        #div1{
            width: 400px;
            height: 300px;
            background: #cccccc;
            display: none;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var oBtn = document.getElementById('btn1');

            // oBtn.onclick = function () {
            //     oDiv.style.display = 'block';
            //     alert('点击按钮事件!');
            // };
            // document.onclick = function () {
            //     oDiv.style.display = 'none';
            //     alert('document点击事件!');
            // };
            //如上述所写的，“按钮点击事件”结束后立即执行“document点击事件”，中间几乎看不到div的出现，这就是事件冒泡带给我们的困扰
            //但是我们又想让弹出的div，在点击任意位置后隐藏，我们该怎么解决呢？我们重点是要取消冒泡，如下：
            oBtn.onclick = function (ev) {
                var oEvent = ev||event;

                oDiv.style.display = 'block';
                oEvent.cancelBubble = true;    //取消冒泡
            };
            document.onclick = function () {
                oDiv.style.display = 'none';
            };
        };
    </script>
</head>
<body>
    <button id="btn1">显示</button>
    <div id="div1"></div>
</body>
</html>

仿select控件

鼠标事件

　　鼠标位置

　　　　可视区位置：clienX（鼠标横坐标）、clientY（鼠标纵坐标）

　　　　例子：跟随鼠标的Div

　　　　消除滚动条的影响

　　　　滚动条的意义：可视区域页面顶部的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标坐标</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        document.onmousemove = function(ev){
            var oEvent = ev||event;
            var oDiv = document.getElementById('div1');

            // oDiv.style.left = oEvent.clientX+'px';
            // oDiv.style.top = oEvent.clientY+'px';
            //其中clientX和clientY为可视区坐标，在不设置body的“宽和高”时，div随着鼠标的移动而移动，
            //并且div的左上角始终与鼠标箭头的尖对齐；
            //
            //但是当我们有的body足够高和足够宽的时候，也就是出现滚动条的时候，当滚动条“只往下滚动”，div
            //和鼠标在纵坐标上发生偏移，出现“div左上角在上，鼠标在下的情况”，并且滚动条越往下，偏移越大；
            //同样，当滚动条“只往右滚动”，div和鼠标在横坐标上发生偏移，出现“div左上角在左，鼠标在右的情况”，
            //并且滚动条越往右，偏移越大；同理，当两个滚动条“都响应向下和向右滚动”时，div和鼠标在横坐标和纵坐
            //标都发生偏移，出现“div左上角在左上，鼠标在右下的情况”，并且滚动条越往右和下，偏移越大；
            //
            //我们的解决办法是运动scrollTop和scrollLeft获取“可视区距离body顶端和左端的距离”，如下：
            var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

            oDiv.style.left = oEvent.clientX+scrollLeft+'px';
            oDiv.style.top = oEvent.clientY+scrollTop+'px';
            //所以我们之后在做开发时，在需要用到鼠标位置的时候，最好都加上scrollTop和scrollLeft以免出错
        }
    </script>
</head>
<body style="height: 2000px;  2000px;">
    <div id="div1"></div>
</body>
</html>

View Code

获取鼠标在页面的绝对位置

　　封装函数，把上述<script>标签内的内容进行改进封装：

//把上述<script>标签内的进行封装改进，如下：
<script>
        //获取位置，函数封装
        function getPos(ev){
            var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

            return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
        }
        document.onmousemove = function(ev){
            var oEvent = ev||event;
            var oDiv = document.getElementById('div1');
            var pos = getPos(oEvent);

            oDiv.style.left = pos.x+'px';
            oDiv.style.top = pos.y+'px';
        }
    </script>

View Code

　　例子：一串跟随鼠标的Div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一串跟着鼠标的div</title>
    <style>
        div{
            width: 20px;
            height: 20px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        function getPos(ev){
            var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

            return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
        }

        document.onmousemove = function (ev) {
            var oEvent = ev||event;
            var aDiv = document.getElementsByTagName('div');
            var pos = getPos(oEvent);

            for (var i = aDiv.length - 1; i > 0; i--) {
                aDiv[i].style.left = aDiv[i-1].offsetLeft+'px';
                aDiv[i].style.top = aDiv[i-1].offsetTop+'px';
            }

            aDiv[0].style.left = pos.x+'px';
            aDiv[0].style.top = pos.y+'px';
        };
    </script>
</head>
<body>
    <div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div>
</body>
</html>

View Code

键盘事件：

　　keyCode：获取用户按下键盘的哪个键

<script>
      document.onkeydown = function (ev) {
            var oEvent = ev||event;

            alert(oEvent.keyCode);  //获取键盘每个键的编码值，具体键值编码，可参照ASCII码表
      };
</script>

　　例子：键盘控制Div的移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘控制div的移动</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: #cccccc;
            position: absolute;
        }
    </style>
    <script>
        document.onkeydown = function (ev) {
            var oEvent = ev||event;
            var oDiv = document.getElementById('div1');

            if (oEvent.keyCode == 37) {    //当按下左键时
                oDiv.style.left = oDiv.offsetLeft-10+'px';    //div向左移动10像素
            } else if (oEvent.keyCode == 39) {  //当按下右键时
                oDiv.style.left = oDiv.offsetLeft+10+'px';  //div向右移动10像素
            } else if (oEvent.keyCode == 38) {  //当按下上键时
                oDiv.style.top = oDiv.offsetTop-10+'px';  //div向上移动10像素
            } else if (oEvent.keyCode == 40) {  //当按下下键时
                oDiv.style.top = oDiv.offsetTop+10+'px';  //div向下移动10像素
            }
            //细心的同学可能会发现，当按下按键不松开时，div会相应向前后左右“顿”一下后，在继续运动（这种情况普遍存在，
        //我们打字的时候也会出现这样的效果）但是我们如何让其不出现卡顿的情况呢？敬请解答！

        };
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

View Code

其他属性：

　　ctrlKey、shiftKey、altKey

　　例子：提交留言（Enter——提交；Ctrl+Enter——提交）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ctrl+Enter提交留言</title>
    <script>
        window.onload = function () {
            var oTxt1 = document.getElementById('txt1');
            var oTxt2 = document.getElementById('txt2');

            //当按下“Enter”键时提交留言
            // oTxt1.onkeydown = function (ev) {
            //     var oEvent = ev||event;
            //     if (oEvent.keyCode == 13) {    //当按下回车键
            //         oTxt2.value += oTxt1.value+'
';
            //         oTxt1.value = '';
            //
            //     }
            // };

            //当按下“Ctrl+Enter”键时提交留言
            oTxt1.onkeydown = function (ev) {
                var oEvent = ev||event;
                if (oEvent.keyCode == 13 && oEvent.ctrlKey) {    //当按下回车键
                    oTxt2.value += oTxt1.value+'
';
                    oTxt1.value = '';
                }
            };
        };
    </script>
</head>
<body>
    <input id="txt1" type="text"/>
    <!--<button id="btn1">提交留言</button>-->
    <textarea id="txt2" rows="10" cols="40"></textarea>
</body>
</html>

View Code

默认行为：浏览器自带的行为都叫默认行为，比如说：鼠标点击右键，会有对话框弹出等都是默认行为

阻止默认行为

　　普通写法：return false;　　

document.oncontextmenu = function () {    //环境菜单/右键菜单
       return false;   //该句就是阻止右键菜单默认事件
}；

　　例1：屏蔽右键菜单：弹出自定义右键菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认行为</title>
    <style>
        *{margin: 0; padding: 0; list-style: none;}
        #div1{
            position: absolute;
            width: 80px;
            background: #cccccc;
            border: 1px solid black;
            display: none;
        }
    </style>
    <script>
        // document.oncontextmenu = function () {    //环境菜单/右键菜单
        //     return false;   //该句就是阻止右键菜单默认事件
        // };
        document.oncontextmenu = function (ev) {    //环境菜单/右键菜单
            var oEvent = ev||event;
            var oDiv = document.getElementById('div1');

            oDiv.style.display = 'block';
            oDiv.style.left = oEvent.clientX+'px';
            oDiv.style.top = oEvent.clientY+'px';

            return false;   //该句就是阻止右键菜单默认事件
        };

        document.onclick = function () {
            var oDiv = document.getElementById('div1');
            oDiv.style.display = 'none';
        };
    </script>
</head>
<body>
    <div id="div1">
        <ul>
            <li>aaaaa</li>
            <li>sssss</li>
            <li>ccccc</li>
            <li>zzzzz</li>

        </ul>
    </div>
</body>
</html>

View Code

　　例2：只能输入数字的输入框：keydown、keyup事件的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>只能输入数字的输入框</title>
    <script>
        window.onload = function () {
            var oTxt = document.getElementById('txt1');

            //彻底禁止输入，所有的输入都被禁止
            // oTxt.onkeydown = function () {
            //     return false;
            // };

            // oTxt.onkeydown = function (ev) {
            //     var oEvent = ev||event;
            //     // alert(oEvent.keyCode);    //查看数字的编码，得出键盘上方的一排数字的ASCII码分别为：
            //     // 0的ASCII码为48,9的ASCII码为57；小键盘中数字的ASCII码分别为：0~9:(96~105)
            //     if (oEvent.keyCode<48||oEvent.keyCode>57){
            //         return false;
            //     }
            // };
            //上述功能存在的问题是，在中文拼音输入法下，由于拼音都是先打好字，然后“空格”键入，此时阻止不了，
            //但是不管中英文输入法，系统不能左右键移动插入，不能删除，不能修改，具有局限性，改进如下：

            //如果用户按的不是退格、也不是数字才阻止，但是只能键盘上面一排数字可以键入，小键盘数字和上下左右键请自行添加
            oTxt.onkeydown = function (ev) {
                var oEvent = ev||event;
                if (oEvent.keyCode!=8 && (oEvent.keyCode<48||oEvent.keyCode>57)){
                    return false;
                }
            };

        };
    </script>
</head>
<body>
    <input type="text" id="txt1"/>
</body>
</html>

View Code

拖拽

　　简易拖拽

　　　　拖拽原理（距离不变、三个事件）

　　靠谱拖拽：

　　　　原有拖拽的问题：

　　　　　　直接给document加事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');

            var disX = 0;   //记录横向距离，鼠标的横坐标减去div的横坐标
            var disY = 0;   //记录纵向距离，鼠标的纵坐标减去div的纵坐标

            oDiv.onmousedown = function (ev) {
                var oEvent = ev||event;

                disX = oEvent.clientX - oDiv.offsetLeft;
                disY = oEvent.clientY - oDiv.offsetTop;

                // oDiv.onmousemove = function (ev) {
                //     var oEvent = ev||event;
                //
                //     oDiv.style.left = oEvent.clientX-disX+'px';
                //     oDiv.style.top = oEvent.clientY-disY+'px';
                // };
                //只写上述两个事件的嵌套的话，会出现div像吸铁石一样当鼠标靠近，它会自动跑到鼠标下方，
                //而且就算不按下鼠标，慢慢移动，div就甩不掉，所以我们要加上下面一个事件，如下：
                // oDiv.onmouseup = function () {
                //     oDiv.onmousemove = null;
                //     oDiv.onmouseup = null;
                // };
                //加上上面一个“up”事件，仍然存在一个小问题：当按下鼠标左键拖动div时，当鼠标“猛一下”快速移动，
                //div就会发生跟不上鼠标而“脱离”的情况，其实归根结底就是div太小了，所以鼠标容易脱离，但是我们把
                //div放大又不现实，所以解决办法如下：把上面两个事件设为建立在document的事件（document足够大）
                document.onmousemove = function (ev) {
                    var oEvent = ev||event;

                    oDiv.style.left = oEvent.clientX-disX+'px';
                    oDiv.style.top = oEvent.clientY-disY+'px';
                };

                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };
        };
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

View Code

　　　　FF下，空div拖拽Bug：当上面的拖拽代码在火狐浏览器上运行时，由于div标签内没有放任何东西，所以拖拽第一次没什么问题，但当再一次拖拽时，div会出现一个带透明度的div框（像灵魂出窍/分身一样）跟着鼠标走，而原来的div在原地不动，当鼠标抬起，原来的div会瞬间平移到其“分身”里，并合并在一起。（目前火狐的版本已经修复）我们需要做的是，加上一句“return false;”　　//阻止默认事件，来组织火狐出现的Bug。如下：

　　　　防止拖出页面：上面拖拽代码就存在这样的问题，这样用户体验度会很差，因为如果该拖动窗口是一个登录页面时，如果用户拖拽的比较快，就有可能直接把“拖拽窗口”送出可视区域，而发生找不到“拖动窗口”的情况。所以我们需要“修正位置”。解决如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');

            var disX = 0;   //记录横向距离，鼠标的横坐标减去div的横坐标
            var disY = 0;   //记录纵向距离，鼠标的纵坐标减去div的纵坐标

            oDiv.onmousedown = function (ev) {
                var oEvent = ev||event;

                disX = oEvent.clientX - oDiv.offsetLeft;
                disY = oEvent.clientY - oDiv.offsetTop;

                document.onmousemove = function (ev) {
                    var oEvent = ev||event;

                    var le = oEvent.clientX-disX;
                    var to = oEvent.clientY-disY;

                    var ri = document.documentElement.clientWidth - oDiv.offsetWidth;   //页面可视区的宽度 减去 窗口宽度
                    var bo = document.documentElement.clientHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度

                    if (le<0){  //如果left<0时，直接让其等于0，即让窗口从左边出不去
                        le = 0;
                    } else if (le > ri) {
                        le = ri;    //页面可视区的宽度 减去 窗口宽度，即让窗口从右边出不去
                    }

                    if(to<0) {  
                        to = 0;     //让窗口从上边出不去
                    } else if (to > bo){
                        to = bo;    //让窗口从下边出不去
                    }

                    oDiv.style.left = le+'px';
                    oDiv.style.top = to+'px';
                    
                };

                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };

                return false;   //屏蔽掉FF中的bug（此处bug也相当于一个默认事件）
            };
        };
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

View Code

查看全文

相关阅读:
Flutter移动电商实战 --（40）路由_Fluro的全局注入和使用方法
 Flutter移动电商实战 --（39）路由_Fluro的路由配置和静态化
 Flutter移动电商实战 --（38）路由_Fluro中Handler编写方法
 Flutter移动电商实战 --（37）路由_Fluro引入和商品详细页建立
 网络基础：NetBIOS
linux 定时任务
 linux useradd 命令基本用法
 Git undo 操作
 Git 查看文件的历史
 Ubuntu14.04安装postgresql9.4

原文地址：https://www.cnblogs.com/han-bky/p/10276540.html