博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
事件冒泡简述及应用
阅读量:7094 次
发布时间:2019-06-28

本文共 1414 字,大约阅读时间需要 4 分钟。

事件代理或者事件委托的含义等同于事件冒泡。

事件捕获方式(描述事件触发时序问题)有三种:

(1)IE从里到外(inside→outside)的冒泡型事件。

(2)Netscape4.0从外到里(outside→inside)的捕获型事件。

(3)DOM事件流,先从外到里,再从里到外回到原点(outside→inside→outside)的事件捕获方法  

两个应用:

1.事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。

  • 111
  • 222
  • 333
  • 444
window.onload = function(){    var oUl = document.getElementById("ul1");   oUl.onclick = function(){ alert(123); } }
 
为保证等同于在每个li添加的函数 window.onload = function(){
  var oUl = document.getElementById("ul1");   oUl.onclick = function(ev){
    var ev = ev || window.event;     var target = ev.target || ev.srcElement;     if(target.nodeName.toLowerCase() == 'li'){
         alert(123);          alert(target.innerHTML);     }   } } 这样写优点:1.性能更优,内存占用更少,运行速度更快;2.在动态再添加一个节点时,方法同样能作用在该节点 2.让不同的对象同时捕获同一事件,并调用自己的专属处理程序做自己的事情
<
div
id="parent">
  <
div
id="child" class="child"></
div
>
</
div
>
document.getElementById("parent").addEventListener("click",function(e){                alert("parent事件被触发,"+this.id);            })            document.getElementById("child").addEventListener("click",function(e){                alert("child事件被触发,"+this.id) }) 运行结果:child事件被触发,child          parent事件被触发,parent 补充:  阻止事件冒泡:e.stopPropagation()  以下事件不冒泡:blur、focus、load、unload
 

转载于:https://www.cnblogs.com/juicy-initial/p/7601886.html

你可能感兴趣的文章
JVM概述
查看>>
(转)理解OAuth 2.0
查看>>
python--------------常用模块之正则
查看>>
cocos2d-x 源代码分析 : EventDispatcher、EventListener、Event 源代码分析 (新触摸机制,新的NotificationCenter机制)...
查看>>
Spring+SpringMVC+MyBatis+easyUI整合进阶篇(一)设计一套好的RESTful API
查看>>
artTemplate子模板include
查看>>
Python之元类
查看>>
赵雅智:service_bindService生命周期
查看>>
iOS中 语音识别功能/语音转文字教程具体解释 韩俊强的博客
查看>>
acid (数据库事务正确执行的四个基本要素的缩写)
查看>>
java环境变量设置
查看>>
织梦程序做的网站,会员下载的弹窗问题
查看>>
人生,别认输,因为没人希望你赢
查看>>
oc34--instancetype和id的区别
查看>>
BootstrapClassloader ExtClassloader AppClassloader
查看>>
62. Unique Paths
查看>>
C#模拟POST提交表单(一)--WebClient
查看>>
[Spark][python]从 web log 中提取出 UserID 作为key 值,形成新的 RDD
查看>>
数据结构与算法(周鹏-未出版)-第六章 树-6.5 Huffman 树
查看>>
Zephyr的Shell
查看>>