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