事件传播的过程
捕获 冒泡 DOM事件流
捕获
由不太具体的节点更早接收事件，而最具体的元素最后接收事件，机制与冒泡相反
冒泡
事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
DOM事件流
三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
实例演示🌰演示代码
实例中分别给三个目标元在『捕获』和『冒泡』阶段都绑定了事件监听器，动图中一共点击了三次:
分析第一次点击步骤分析:
- 开始点击目标元素 target，由于在『捕获阶段』绑定了事件监听器，所以由上而下传播打印之前给定的信息，顺序:『container → box→target』
- 到达真正的点击的『目标阶段』target
- 由于在『冒泡阶段』也绑定了事件监听器 所以自『目标阶段』由下而上传播打印之前给定的信息,顺序:『target → box→container』
// HTML
/*
<div class="container">
container
<div class="box">
box
<div class="target">target</div>
</div>
</div>
*/
// JS
function $(selector) {
return document.querySelector(selector)
}
function DomEvent(target, info, bool) {
target.addEventListener('click', () => console.log(info),bool)
}
DomEvent($('.container'), 'container click 捕获', true)
DomEvent($('.box'), 'box click 捕获', true)
DomEvent($('.target'), 'target click 捕获', true)
DomEvent($('.container'), 'container click 冒泡', false)
DomEvent($('.box'), 'box click 冒泡', false)
DomEvent($('.target'), 'target click 冒泡', false)
事件监听(踩坑)
『『EventTarget.addEventListener()』与『DOM事件属性』的区别
①能否绑定多事件
- 『EventTarget.addEventListener()』可以绑定多事件
按照添加顺序依次执行,本质上就是函数的调用(无次数限制)
<button id="test" >click me</button>
<script>
Btn = document.querySelector('#test')
// 第一次，绑定监听器
Btn.addEventListener('click', function f() {
console.log('first')
})
// 第二次，绑定监听器
Btn.addEventListener('click', function f() {
console.log('second')
})
</script>
点击按钮，打开控制台查看.第一次绑定的 打印出 'first',被后一次绑定的 打印出 'second',均被执行
- 『DOM事件属性』不能绑定多事件
因为只有一个 onevent 属性，因此我们不能分发多个事件处理器,绑定多个相当于属性的覆盖，最终也只有最后一次绑定的才有效。
// 把上面demo的addEventListener绑定换成如下
Btn.onclick = function () {
console.log('first')
}
Btn.onclick = function () {
console.log('second')
}
点击按钮，打开控制台查看，第一次绑定的 打印出 'first',被后一次绑定的 打印出 'second'覆盖
②移除事件的方法
- 『DOM事件属性』,设置对应的 onevent = null
element.onclick = function () {console.log(this.tagName)}
// 设置element.onclik的属性的值为 null,可以成功移除事件
element.onclick = null
- 『EventTarget.addEventListener()』通过『EventTarget.removeEventListener()』，两者参数一致且函数不能是匿名函数
function handler() {
alert( '!不是匿名函数' );
}
element.addEventListener("click", handler);
element.removeEventListener("click", handler);
// addEventListener removeEventListener参数完全一致才能有效移除事件
// 下面的写法无法成功移除事件
// 函数不能是匿名函数
element.addEventListener("click", function () {alert('!不能是匿名函数')});
element.removeEventListener("click", function () (alert('!不能是匿名函数')));
this e.target e.currentTarget的区别
『this』指向触发事件的内部那个「绑定监听函数的元素节点对象」，『e.target是引发事件的『目标元素』(
原始点击位置)，它在冒泡过程中不会发生变化。』 『e.currentTarget当前正在执行的监听函数所在的那个节点 e.currentTarget === this(在冒泡过程中值会发发生变化)』
验证demo
建议在JSBin验证上图的demo
事件代理
把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件
事件的代理的好处：
节省监听器
对于后期新增元素使用事件代理更好
实例🌰剖析
要求：①点击 span 或是 li所在区域，打印出其内部的textContent。②点击 按钮 添加对应的
li
<div id="test">
<ul>
<li class="ct"><span>1</span></li>
<li class="ct"><span>2</span></li>
<li class="ct"><span>3</span></li>
</ul>
</div>
<button id="add">add child</button>
分析
第一个要求，不使用事件代理也可以做到，只要给每个`<li>`元素，添加一个监听器。(但是如果子元素，足够多，就需要绑定很多监听器)
第二个要求，如果用事件代理，即使没给新增的元素添加监听器，但是给他们的父元素绑定监听器，内部事件会冒泡形式通知到父元素节点
// 获取元素
function $(select) {return document.querySelector(select)}
// 打印出 textContent 值为(i++)
function fn(e) {console.log(e.target.textContent)
// console.log(e.target)
// console.log(this)
}
// 点击按钮，新增元素
var i =4
$('#add').onclick = function(){
let li = document.createElement('li')
li.innerHTML = '<span>'+ (i++) + '</span>'
li.classList.add('ct')
$('ul').append(li)
}
// 事件代理函数，即使目标节点内有嵌套的元素，也可以执行监听
function delegation(element, eventType, targetEle, fn) {
$(element).addEventListener(eventType, function (e) {
let el = e.target
while (!el.matches(targetEle)) {
if (element === el) {
el = null
break
}
el = el.parentNode
}
el && fn.call(el, e, el)
})
return element
}
// 监听函数的调用
delegation('div', 'click', 'li', fn)
无论点击的是背景颜色是红色的『span』区域，或是点击背景颜色为黑色的『li』区域，都能监听成功
点击新增元素按钮，会新增元素，点击新增之后的元素的『span』和『li』区域区域依然可以监听新的元素
preventDefault()与stopPropagation()
两者并无功能上的。相关性
| - | 作用 |
|---|---|
| preventDefault() | 取消事件对当前元素的默认影响，不会阻止事件的传播 |
| stopPropagation() | 阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，(包括在当前节点上其他的事件监听函数。) |
事件对象Event的cancelable属性为true，可以调用event.preventDefault()。如果为false，调用该方法没有任何效果。
如果调用了『event.preventDefault()』则，『event.defaultPrevented』返回一个布尔值 true 否则返回 false
<ul id="test">
<li><a href="https://www.baidu.com">百度</a></li>
<li><a href="https://sports.qq.com">腾讯体育</a></li>
</ul>
<script>
test.onclick = function(event) {
// if (event.target.nodeName != 'A') return;
return false; // 链接不会跳转
// event.preventDefault()
// 『return false』与event.preventDefault()都可以阻止浏览器默认事件
};
</script>
自定义事件『new Event(type, options)』与『new CustomEvent(type, options)』
参数「options」是一个对象，{bubbles: false, cancelable: false} 默认值都为「false」，分别表示是否「冒泡」与「能否用event.preventDefault()阻止浏览器默认事件」。自定义事件都需要使用Node.dispatchEvent(Event)方法触发事件
new Event(type, options)
event = new Event(type, options)
new CustomEvent(type, options)
推荐使用new CustomEvent(type, options)，第二个参数options对象的detail属性可以绑定数据
自定义一个事件
<h1 id="defiEvent">Hello World</h1>
<script>
var defiEvent = document.querySelector('#defiEvent')
defiEvent.addEventListener('say', function(e) {
alert(e.detail.info)
})
// dispatchEvent方法触发事件
// alert("just do it")
defiEvent.dispatchEvent(new CustomEvent('say', {
detail: { info: "just do it" },
bubbles: true,
cancelable: false
}))
</script>
JS事件练习demo
效果
关键：CSS Element.classList.toggle()的熟练使用
效果
关键：熟悉Element.parentElement这个api
效果
关键：熟悉Element.getBoundingClientRect() offsetWidth offsetHeight
效果
关键：把所有图片当成一张高度固定，宽度值很大的一个整体，通过margin-left margin-right (可以尝试使用CSS3动画)来展示位于水平轴不同位置的图片。
效果
事件demo委托-树形菜单Tree（并给文本节点添加 「span」)
关键：element.hidden = !element.hidden 循环判断 熟悉parentNode.prepend()的使用以及与append()的区别 NodeList for...of循环
效果
配图存于语雀
版权声明：本文为博主原创文章，未经博主许可不得转载
