微信小程序名片创建_js工作机制

日期:2021-01-05 类型:行业动态 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

js事件机制----捕获与冒泡机制实例分析       这篇文章主要介绍了js事件机制----捕获与冒泡机制,结合实例形式分析了js事件机制中捕获与冒泡机制相关原理、操作技巧与注意事项,需要的朋友可以参考下

本文实例讲述了js事件机制----捕获与冒泡机制。分享给大家供大家参考,具体如下:

先从事件绑定机制说起, 事件绑定机制通过绑定方法addEventListener()实现,

语法格式如下:

element.addEventListener(event, function, useCapture)



注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。 

提示: 所有 HTML DOM 事件,可以查看我们完整的 。

当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。

我们可以看到第三个参数是布尔值, true表示在捕获阶段执行, 而false指在冒泡阶段执行

所以什么是 捕获和冒泡

捕获(capture)和冒泡(bubble)是事件传播过程中的两个概念, 比如用户单击某个元素, 但由于元素处于父元素内, 该父元素又处于document对象中, document对象又处于window对象中, 因此该单击事件实际发生在该元素, 父元素, document, window对象上, 而事件传播过程就是浏览器决定依次触发哪个对象的事件处理函数的过程.

DOM事件模型将事件传播过程分为两个阶段: 捕获阶段和冒泡阶段

在事件捕获阶段, 事件从最顶级的父元素逐层向内传递,

在冒泡阶段, 事件从事件发生的直接元素 , 逐层向父元素传递

这里举个简单的例子:

点击孙子元素, 给body中的元素都添加点击事件并输出触发事件的对象id:

 !DOCTYPE html 
 html 
 head 
 /head 
 body 
 div id="父级" 
 div id="儿子" 
 div id="孙子" 
 /div 
 /div 
 /div 
 /body 
 script type="text/javascript" 
 var a = document.getElementById('父级'),
 b = document.getElementById('儿子'),
 c = document.getElementById('孙子');
 a.addEventListener("click",show, true);
 b.addEventListener("click",show, true);
 c.addEventListener("click",show, true);
 console.log("前3为捕获,后三个为冒泡");
 a.addEventListener("click",show, false);
 b.addEventListener("click",show, false);
 c.addEventListener("click",show, false);
 function show(even){ console.log(this.id); }
 /script 
 /html 

其中两条孙子输出相同被折叠了, 可以看到前三个是以捕获顺序, 第三个参数为true, 顺序是从父亲到孙子

后三个为false意思是冒泡顺序, 顺序是孙子到父级,即从内到外

实际上捕获和冒泡时最外层和的元素并不是父级div,

捕获时实际上是:

document-- html-- body-- 父级div-- 儿子div-- 孙子div

冒泡时相反, 只不过body及以上没添加事件并输出, 所以在例子中没显现出来

所以用冒泡还是捕获?

对于事件代理来说,在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分,但是由于事件冒泡的事件流模型被所有主流的浏览器兼容,从兼容性角度来说还是建议大家使用事件冒泡模型。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。