事件冒泡以及onmouseenter 和 onmouseover 的不同

  1. onmouseenter
    onmouseenter 事件在鼠标指针移动到元素上时触发。 该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发。 onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 。
  2. 事件冒泡
    比如说父元素添加了onclick事件,当子元素发生onclick事件时,父元素的onclick事件也会触发。
  3. 终止事件冒泡
    event.stopPropagation() 在子元素相应的处理函数内,加入 event.stopPropagation() ,终止事件的广播分发,这样事件停留在本节点,不会再往外传播了。
    if(event.target == event.currentTarget) {} 事件包含最初触发事件的节点引用 和 当前处理事件节点的引用,那如果节点只处理自己触发的事件即可,不是自己产生的事件不处理。event.target 引用了产生此event对象的dom 节点,而event.currrentTarget 则引用了当前处理节点,我们可以通过这 两个target 是否相等。event.target永远是直接接受事件的目标DOM元素。

从事件传递上看:**方法一在于取消事件冒泡,即当某些节点取消冒泡后,事件不会再向上传递;方法二在于不阻止冒泡,过滤需要处理的事件,事件处理后还会继续传递; 分析方法二,既然事件是冒泡传递的,那可不可以让某个父节点统一处理事件,通过判断事件的发生地(即事件产生的节点),然后做出相应的处理呢?答案是可以的,下面通过给body 元素添加事件监听,然后通过判断event.target 然后对不同的target产生不同的行为。

即将每一个元素都处理事件的模式改成有上层节点统一处理事件,通过事件发生的不同节点执行不同行为。这个模式,就是所谓的事件委托

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,296评论 3 11
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,079评论 1 10
  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 7,138评论 1 6
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,404评论 0 2
  • 写作 / 汪莉 自从开始写作 心情愉悦 生活规律 性格开朗 不管道路多么崎岖 不管是否会得到肯定 我爱好写作 她不...
    汪莉_4c55阅读 276评论 2 4