事件

1. 事件传播机制

传播机制:一种是捕获阶段,一种是冒泡阶段。(还有一种就是标准的先捕获后冒泡)
捕获阶段指的就是事件从document=>html=>body=>div这么一个过程~
冒泡阶段指的是事件从div=>body=>html=>document这么一个过程~
就是从爷爷到儿子就是捕获阶段,然后再从儿子到爷爷就是冒泡阶段。

如果给元素绑定一个事件,默认就是冒泡阶段。
用addEventListener('type',fn,boolean)添加事件监听,第一个参数就是事件,第二个参数就是事件处理函数,第三个参数就是捕获阶段还是冒泡阶段了。
默认是false,就是冒泡阶段。传入true变成捕获阶段。

这样就出现一个问题,就是如果创建一个button,给他绑定一个click事件。他的父级元素div也有click事件,如果是捕获,那么他的父级事件处理函数就先被调用了。我们不是想要这种效果,所以就有了阻止传播这么一个需求。
阻止传播就在事件处理函数中加入stopPropagation()就可以了。

2. 取消默认事件

取消默认事件: preventDefault()
在form表单中的submit按钮默认点击后跳转到另一个页面,很多时候我们都不想这么做,所以用preventDefault()来阻止元素的默认事件。

3. 事件代理机制

事件代理机制主要是为了处理子元素较多的情况下,为他们一一绑定事件的麻烦(和性能问题)
如果选择器具体到了某个子元素上的话,如果子元素增加,选择器就无法获取到新的元素,需要再手动给新增的子元素绑定事件。所以直接在父元素上添加事件监听,就不会出现上述的问题。


阻止事件传播
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,652评论 1 11
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,619评论 0 2
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,155评论 1 10
  • Dom事件 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件 (一) Eve...
    woow_wu7阅读 1,876评论 0 1
  • 1、事件传播机制、阻止传播、取消默认事件、事件代理这些到底是什么呢? ①事件传播机制:JS事件传播包括三个阶段: ...
    海山城阅读 360评论 0 0

友情链接更多精彩内容