JSDOM事件

crainyday

前端 / JS

发布于：2019年4月16日

字数：1.6k字

时长：7分钟

DOM事件

一.事件对象

事件对象: 当事件对应的响应函数被触发时, 浏览器每次都会将一个事件对象作为实参传递进响应函数, 在事件对象中封装了当前事件相关的一切信息, 比如: 鼠标坐标、键盘哪个按键被按下、鼠标滚轮滚动方向。。。

IE8及以下浏览器, 响应函数被触发时, 浏览器不会传递事件对象, 而把事件对象作为window对象的属性保存

事件句柄	描述
onmousemove	鼠标被移动
onunload	用户退出页面
onfocus	元素获得焦点

鼠标属性	描述
clientX	返回当事件被触发时，鼠标指针的水平坐标
clientY	返回当事件被触发时，鼠标指针的垂直坐标
pageX	鼠标相当于当前页面的水平坐标(IE9+)
pageY	鼠标相当于当前页面的垂直坐标(IE9+)

注意: 所有的html代码, 均可直接复制, 然后粘贴到W3School 代码区, 点击提交代码在线执行.

1.div随鼠标移动

<head>
    <script type="text/javascript">
        window.onload = function() {
            var move = document.getElementById("move");
            document.onmousemove = function(event){
                event = event||window.event;
                var st = document.body.scrollTop||document.documentElement.scrollTop;
                var sl = document.body.scrollLeft||document.documentElement.scrollLeft;
                var left = event.clientX + sl;
                var top = event.clientY + st;
                //clientY是相对于浏览器原点鼠标的垂直坐标,
                //当页面中有滚动条时会出现错误,需要修改坐标
                //你可以将+sl或+st去掉试试
                move.style.left = left + "px";
                move.style.top = top + "px";
            };
        };
    </script>
    <style type="text/css">
        body{
            height: 1000px;
            width: 2000px;
        }
        #move{
            width: 100px;
            height: 100px;
            background-color: red;
            /*开启定位,否则设置div的left和top没用*/
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="move"></div>
</body>

二.事件的冒泡

所谓事件冒泡, 就是指事件的向上传导, 当后代元素上的事件被触发时, 其祖先元素的相同事件也会被触发

而在开发中, 大部分情况下冒泡都是有用的, 但是有时候我们不希望事件冒泡.

取消冒泡: 通过将事件对象的cancelBubble属性设置为true, 即可取消冒泡.

例: 取消id为box的div的onmousemove事件的冒泡, 红色的div则不能随鼠标移动到box上

One More Thing 👇

<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        window.onload = function() {
            var move = document.getElementById("move");
            var box = document.getElementById("box");
            document.onmousemove = function(event){
                event = event||window.event;
                var st = document.body.scrollTop||document.documentElement.scrollTop;
                var sl = document.body.scrollLeft||document.documentElement.scrollLeft;
                var left = event.clientX + sl;
                var top = event.clientY + st;
                move.style.left = left + "px";
                move.style.top = top + "px";
            };
            box.onmousemove = function(event){
                event = event||window.event;
                //取消box的onmousemove的冒泡
                event.cancelBubble = true;
            };
        };
    </script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 1000px;
            width: 2000px;
        }
        #move{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box" style="width: 400px;height: 400px;background-color: #bfa;">
    </div>
    <div id="move"></div>
</body>

三.事件的委派

所谓事件委派, 就是指将事件统一绑定给元素的共同的祖先元素, 这样当后代元素上的事件触发时, 会一直冒泡到祖先元素, 从而通过祖先元素的响应函数来处理事件, 但是这样的话有时候我们点击页面往往会出现不可预料的结果: 我们不知道到底是什么触发了这个事件.

事件委派就是利用了事件冒泡, 通过委派可以减少事件的绑定次数, 提高程序性能

通过事件对象的target属性, 可以获取触发此次事件的对象

<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        window.onload = function() {
            var btn01 = document.getElementById("btn01");
            var u1 = document.getElementById("u1");
            btn01.onclick = function() {
                var li = document.createElement("li");
                li.innerHTML = "<a href='javascript:;' class='link'>新超链接</a>";
                u1.appendChild(li);
            };
            u1.onclick = function(event) {
                event = event || window.event;
                alert(event.target);
                if (event.target.className.match(/\blink\b/)) {
                    alert("我是ul的单击响应函数");
                }
            };
        };
    </script>
</head>
<body>
    <button id="btn01">添加超链接</button>
    <ul id="u1" style="background-color: #bfa;">
        <li><p>123</p></li>
        <li><a href="javascript:;" class="linkkk">超链接一</a></li>
        <li><a href="javascript:;" class="link">超链接二</a></li>
        <li><a href="javascript:;" class="link">超链接三</a></li>
    </ul>
</body>

四.事件的绑定

使用对象.事件 = 响应函数; 形式为元素绑定事件响应函数, 只能同时为一个元素的一个事件绑定一个响应函数, 不能绑定多个, 若绑定了多个, 则最后绑定的函数生效.
但是, 在有的时候, 我们就希望为一个元素的相同事件绑定多个响应函数, 此时可用元素的addEventListener()方法绑定响应函数

addEventListener()
------ 参数:1.事件的字符串, 不要on, 例 :“onclick"应为"click”
------2.回调函数, 当事件触发时调用
------3.是否在捕获阶段触发事件, 需要一个布尔值, 一般传false
可以绑定多个响应函数, 事件被触发时, 顺序执行绑定的响应函数
IE8及以下要用attachEvent()方法代替, 但它的执行顺序与addEventListener()方法相反

addEventListener()中的this是绑定该事件的对象, 而attachEvent()中的this是window

想要兼容各种浏览器, 就需要自己写一个方法:
------参数:
------obj 要绑定事件的对象
------eventStr 要绑定事件的字符串(不要"on")
------callback 回调函数

<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        function bind(obj,event,callback){
            if(obj.addEventListener){
                //大部分浏览器
                obj.addEventListener(event,callback,false);
            }else{
                //IE8及以下
                /* 修改回调函数中的this为传入的obj对象
				 * this是由调用方式决定的
				 * 通过callback.call(obj)方式可以修改调用方法时的this
				 */
                obj.attachEvent("on"+event,function(){
                    callback.call(obj);
                });
            }
        }
        window.onload = function() {
            var btn01 = document.getElementById("btn01");
            bind(btn01,"click",function(){
                alert(this);
                alert(1);
            });
            bind(btn01,"click",function(){
                alert(2);
            });
        };
    </script>
</head>
<body>
    <button type="button" id="btn01">bind()</button>
</body>