javascript

事件捕获和事件冒泡

2018-08-16  本文已影响0人  我是大队长_1342

因为兼容ie，一般使用事件冒泡

事件

js和浏览器交互通过事件实现

事件流

页面元素接受事件的顺序

事件捕获

从根节点到目标节点

目标阶段

到达目标阶段

事件冒泡

从当前节点上溯到根节点

js的五种监听方式

1.HTML事件处理程序（冒泡）

事件处理程序中的代码在执行时，有权访问到全局作用域中的任何代码。
缺点：
*违反了html与js相分离原则
*元素一出现就出发了事件，js还没加载，会报错

<body onload="doSomething()">//不是doSomething，双引号里面是js的执行
<div onclick="console.log('触发事件')">//单引号不能改成双引号，因为里面是js，不能使用未经转义的html

等同于：

el.setAttribute('onclick', 'doSomething()');

2.元素节点的事件属性（冒泡）(DOM0级事件处理)

如果这个函数中存在this关键字，那么this就会指向这个对象
缺点：1.一个事件只能定义一个监听函数，意思是：如果定义两次onclick属性，后一次覆盖前面一次
2.我们不能控制元素的事件流（捕获or冒泡）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <input id="myButton" type="button" value="click me">
    <script>
        var button = document.getElementById('myButton');
        function handler() {
            alert('click');
        }
        button.onclick = handler;
        // 移除事件
        // button.onclick = null;
    </script>
</body>
</html>

3.EventTarget.addEventListener（推荐）（DOM2级事件处理程序）

this同样指向当前元素，故函数在元素的作用域中执行。

DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
此处详细：https://wangdoc.com/javascript/events/eventtarget.html

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

在DOM事件流中，实际的目标在捕获阶段不会接收事件。就是说在捕获阶段，事件从document到html再到body后就停止了。下一个阶段是“处于目标”阶段，于是事件在div中发生，并在事件处理中被看成是冒泡阶段的一部分。然后，冒泡阶段发生。IE8及更早的版本不支持DOM事件流，浏览器在捕获阶段触发事件对象上的事件，结果就是有两个机会在目标对象上面操作事件。

（1）*DOM2级事件定义了两个方法：addEventListener()和removeEventListener()。

*需要注意的是，通过addEventListener()指定的事件处理程序只能通过removeEventListener()移除；
*同时，如果在addEventListener()中的第二个参数是一个匿名函数，则无法通过removeEventListener()移除，也没有办法移除。

*而IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()，这两个方法直接收两个参数，第一个为事件名称（注意事件名称都有on前缀，例如click事件则为onclick），第二个参数为事件处理程序函数。

function hello() {
  console.log('Hello world');
}

var button = document.getElementById('btn');
button.addEventListener('click', hello, false);//第三个参数false的时候是冒泡排序，true的时候是捕获

移除事件监听addEventListener：

div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);//与addEventListener参数完全相同，并且第二个参数不能是匿名函数（会认为两个匿名函数不是同一个）。

优点：
*同一个事件可以添加多个监听函数。
*能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发监听函数。
*除了 DOM 节点，其他对象（比如window、XMLHttpRequest等）也有这个接口，它等于是整个 JavaScript 统一的监听函数接口。

4.IE事件处理程序

IE事件处理程序中有类似与DOM2级事件处理程序的两个方法：

*attachEvent()
*detachEvent()

 $btn.attachEvent('onclick', function() {
  alert('i am isaac');
});

它们都接收两个参数：

i.事件处理程序名称。如onclick、onmouseover，注意：这里不是事件，而是事件处理程序的名称，所以有on。
ii.事件处理程序函数。如function(){alert("clicked");}
（之所以没有和DOM2级事件处理程序中类似的第三个参数，是因为IE8及更早版本只支持冒泡事件流。）

注意：
1.IE事件处理程序中attachEvent()的事件处理程序的作用域和DOM0与DOM2不同，她的作
用域是在全局作用域中。因此，不同于DOM0和DOM2中this指向元素，IE中的this指向
window。

2.同样，我们可以使用attachEvent()来给同一个元素添加多个事件处理程序。但是与DOM2
不同，事件触发的顺序不是添加的顺序而是添加顺序的相反顺序。

3.同样地，通过attachEvent()添加的事件处理程序必须通过detachEvent()方法移除，同样
的，不能使用匿名函数。

4.支持IE事件处理程序的浏览器不只有IE浏览器，还有Opera浏览器。

5.跨浏览器事件处理程序

即先判断DOM2级事件处理程序，再判断IE事件处理程序，最后使用DOM0级事件处理程序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨浏览器事件处理程序</title>
</head>
<body>
    

    <button id="button">点我</button>

<script>
var EventUtil={
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);//注意：这里默认使用了false（冒泡）
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handler);
        }else{
            element["on"+type]=handler;
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);//注意：这里默认使用了false（冒泡）
        }else if(element.detachEvent){
            element.detachEvent("on"+type,handler);
        }else{
            element["on"+type]=null;
        }
    }
};

    function handler(){
        alert("clicked");
    }

    var button=document.getElementById("button");
    EventUtil.addHandler(button,"click",handler);
</script>
</body>
</html>
DOM0和DOM2区别

如果定义了两个dom0级事件，dom0级事件会覆盖

dom2不会覆盖，会依次执行

dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖

事件委托

<ul id="color-list">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
<script>
    (function () {
        var colorList = document.getElementById("color-list");
        colorList.addEventListener('click', showColor, false);
        function showColor(e) {
            e = e || window.event;
            var target = e.target || e.srcElement;
            console.log(target.innerHTML)
        }
    })();
</script>

好处：
（1）将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样就提高了性能。
想象如果有一个100行的表格，对比传统的为每个单元格绑定事件处理器的方式和事件代理（即table上添加一个事件处理器），不难得出结论，事件代理确实避免了一些潜在的风险，提高了性能。
、
（2）如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。
比如增加一个元素，事件并没有起效：

<script>
    (function () {
        var colorList = document.getElementById("color-list");
        var colors = colorList.getElementsByTagName("li");
        for (var i = 0; i < colors.length; i++) {
            colors[i].addEventListener('click', showColor, false);
        }
        ;
        function showColor(e) {
            e = e || window.event;
            var targetElement = e.target || e.srcElement;
            console.log(targetElement.innerHTML);
        }
        var li=document.createElement('li');
        li.innerText='123';
        colorList.append(li);
    })();

</script>

参照：
https://wangdoc.com/javascript/events/model.html
https://www.cnblogs.com/zhuzhenwei918/p/6139281.html#1
高级程序设计283页开始

上一篇下一篇

猜你喜欢

热点阅读