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前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

面试题
HTML CSS JavaScript
jQuery Vue.js React
算法 HTTP Babel
BootStrap Electron Gulp
Node.js 前端经验相关 前端综合
Webpack 微信小程序 -

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


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>