Javascript 事件机制

问题

Javascript 事件机制

答案

事件触发三阶段

• document 往事件触发处传播，遇到注册的捕获事件会触发
• 传播到事件触发处时触发注册的事件
• 从事件触发处往 document 传播，遇到注册的冒泡事件会触发 事件触发⼀般来说会按照上⾯的顺序进⾏，但是也有特例，如果给⼀个⽬标节

点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执⾏

// 以下会先打印冒泡然后是捕获
node.addEventListener('click',(event) =>{
    console.log('冒泡')
},false);
node.addEventListener('click',(event) =>
    console.log('捕获 ')
},true)

注册事件

通常我们使⽤ addEventListener 注册事件，该函数的第三个参数可以是布尔值，也可 以是对象。对于布尔值 useCapture 参数来说，该参数默认值为 false 。 useCapture 决定了注册的事件是捕获事件还是冒泡事件

⼀般来说，我们只希望事件只触发在⽬标上，这时候可以使⽤ stopPropagation 来阻⽌ 事件的进⼀步传播。通常我们认为 stopPropagation 是⽤来阻⽌事件冒泡的，其实该函 数也可以阻⽌捕获事件。 stopImmediatePropagation 同样也能实现阻⽌事件，但是还 能阻⽌该事件⽬标执⾏别的注册事件

node.addEventListener('click',(event) =>{
    event.stopImmediatePropagation()
    console.log('冒泡')
},false);
// 点击 node 只会执⾏上⾯的函数，该函数不会执⾏
node.addEventListener('click',(event) => {
    console.log('捕获 ')
},true)

事件代理

如果⼀个节点中的⼦节点是动态⽣成的，那么⼦节点需要注册事件的话应该注 册在⽗节点上

<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let ul = document.querySelector('##ul')
ul.addEventListener('click', (event) => {
console.log(event.target);
})
</script>

事件代理的⽅式相对于直接给⽬标注册事件来说，有以下优点

• 节省内存
• 不需要给⼦节点注销事件

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！