DOM事件流详解
来源:互联网 发布:淘宝介入卖家给假地址 编辑:程序博客网 时间:2024/05/21 08:35
什么是DOM事件
简单的说,事件就是定义了一些JavaScript函数,使它们能够响应页面元素发生的变化,比如用户在元素上方点击了鼠标按钮 [click事件],用户把鼠标移到了元素上方[mouseover事件]。
什么是DOM事件流
一个事件的生命周期有三个阶段:捕捉,目标,冒泡。
1.捕捉阶段
当某个事件被触发时,浏览器会找到涉及的元素。涉及的元素称为目标。浏览器会找出body元素和目标之间所有的元素并分别检查它们,看其有没有事件绑定。浏览器会先触发外层事件的处理器,最后才会轮到目标的事件处理器。
2.目标阶段
当捕捉阶段完成后,浏览器会触发目标元素上任何已添加的事件类型监听器,这里的先后顺序是按照事件定义的先后顺序来的。
3.冒泡阶段
冒泡阶段的顺序与捕捉阶段的顺序刚好相反,在此阶段,浏览器会优先处理目标的事件处理器,然后一层层往外处理其余的事件处理器。
示例
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>DOM事件流</title></head><body> <div id="div1"> <button id="btn">按钮</button> </div><script> var btn = document.getElementById("btn"); var div1 = document.getElementById("div1"); //事件目标 btn.onclick = function(){ console.debug("目标1.Click btn"); } btn.addEventListener("click",function(){ console.debug("目标2.Click btn"); },true); //事件冒泡 div1.onclick = function(){ console.debug("冒泡1.Click div1"); } document.body.onclick = function(){ console.debug("冒泡2.Click Body"); } document.onclick = function(){ console.debug("冒泡3.Click document"); } window.onclick = function(){ console.debug("冒泡4.Click window"); } //事件捕获 window.addEventListener("click",function(){ console.debug("捕获4.Click window"); },true); document.addEventListener("click",function(){ console.debug("捕获3.Click document"); },true); document.body.addEventListener("click",function(){ console.debug("捕获2.Click body"); },true); div1.addEventListener("click",function(){ console.debug("捕获1.Click div1"); },true);</script></body></html>
document.body.addEventListener("click",function(){ console.debug("捕获2.Click body"); },true);
addEventListener用于注册事件的处理器,当添加了第三个参数为true时,代表了在捕捉阶段接受后代元素的事件。
点击button按钮后,结果如下
event.html:38 捕获4.Click windowevent.html:41 捕获3.Click documentevent.html:44 捕获2.Click bodyevent.html:47 捕获1.Click div1event.html:16 目标1.Click btnevent.html:19 目标2.Click btnevent.html:24 冒泡1.Click div1event.html:27 冒泡2.Click Bodyevent.html:30 冒泡3.Click documentevent.html:33 冒泡4.Click window
由此可见DOM事件流的顺序是
1.捕获
window
document
body
div1
2.目标 (目标的顺序与事件定义的先后顺序有关)
目标一
目标二
3.冒泡
div1
body
document
window
应用场景
以上面的例子为例,想要触发在button上的事件,但是不想触发在div和其上元素的事件时,弄清事件流就相当重要。
比如:
阻止事件冒泡过程。防止事件冒泡而带来不必要的错误和困扰。
这个方法就是:stopPropagation()
可以对button的click事件做一些改造。
1 0
- DOM事件流详解
- DOM 事件详解(一)
- js DOM事件详解
- JS DOM事件机制详解
- DOM事件详解(二)
- 理解DOM事件流
- Dom事件流
- DOM事件流
- DOM事件流
- DOM事件流
- DOM 事件流
- Dom事件流
- DOM事件流
- DOM事件流
- DOM编程事件冒泡详解 附jquery阻止事件冒泡
- JavaScript:DOM事件流总结
- Js中级--DOM事件流
- JS事件之DOM事件流
- The Accomodation of Students---hdu2444
- 分数变成小数(四舍五入)
- 概率图模型学习(6)——高斯网络模型1
- nginx的相关配置项
- (大学生)保持乐观的心态
- DOM事件流详解
- static-001
- Andriod应用性能测试-流量、电量
- 极光推送Jpush配置步骤
- C#中的文件读写
- 分享一个用了很久的免费国外空间,适合用于测试
- Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04
- 【IMX6UL】嵌入式Linux系统开发免费视频
- 1508-张晨曦总结《2016年-12月-1日》【连续41天总结】