事件捕获和事件冒泡

因为兼容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页开始

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,422评论 1 11
  • JavaScript 与 HTML 之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬...
    threetowns阅读 306评论 0 0
  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 6,746评论 1 6
  • 事件流 JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互...
    DHFE阅读 784评论 0 3
  • DOM事件标准定义了两种事件流,这俩种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这俩种事件流分别是捕...
    郝特么冷阅读 517评论 0 0