什么是事件
通俗来说就是,用户操作鼠标或者键盘,触发了浏览器一些特定交互。比如打开某个网页,浏览器加载完成触发加载完成事件,点击时触发 click 事件等。
1、事件的组成以及其特点
事件的组成分由三部分组成
事件源:标签、元素、节点来绑定事件
事件类型:各种事件
事件处理程序:
事件的特点
以on开头+事件名 并且是小写 例如 onclick oninput 等
2、事件绑定方式
1 > 直接在标签上添加对应事件 / 行内式
// 1.标签上直接添加对应事件
<div onclick=" 函数() "></div>
// 2.行内式
<div onclick="console.log('Hello World')"></div>
注:行内式绑定事件,事件直接执行引号内代码,不会执行在scripe中的事件处理程序中的代码
2 > 事件处理程序绑定 / 属性绑定
<div class="box">123123</div>
<script>
let box = document.querySelector('.box');
box.onclick = function(){
consloe.log('你好世界')
}
box.onclick = function(){
consloe.log('hello world')
}
</script>
注:只能绑定一个事件处理程序,如果绑定多个,只有最后一个生效
3、事件流
当你页面结构为多层嵌套时,为每一层盒子都添加了相同的事件,那么这些相同事件的执行顺序就是事件流
事件流分为三个阶段
1.捕获阶段
2.目标阶段
3.冒泡阶段
事件冒泡
如果一个元素的事件被触发,那么他的所有父级元素的同名事件也会被依次触发
元素->父元素->body->html->document->window
当你出发同类型事件时,先执行子元素的事件再执行父元素的事件,这个事件就是冒泡事件流。*事件冒泡一直都在*
事件捕获
从最顶级的父元素一级一级的向下找子元素触发同名事件,直到触发事件的元素为止
`当你出发同类型事件时,先执行父元素的事件再执行子元素的事件,这个事件就是捕获事件流`
正常来讲,除了 onmouseleave / onmouseenter 是捕获事件流,其他的事件都是冒泡事件流
4、事件绑定
· addEventListener() 方法用于向指定元素添加事件处理程序
标签.addEventListener('事件',函数,boolean)
参数1:事件名称,指定的事件名。
注:不要使用“on”前缀。
--例如 : onclick ——>click
参数2: function必须 。 指定于事件触发时执行的函数
注: 事件对象会作为第一个参数传入函数
参数3: 布尔值 ,指定事件是否是 冒泡 还是 捕获
· true -> 捕获
· false -> 冒泡
使用addEventListener()给元素绑定事件
let box = document.querySelector('.box');
box.addEventListener('click',function(){
console.log('hello')
});
console.log('world')
** 优点**
1.不阻断程序运行
没有对页面中div进行点击 控制台已经输出 world ,说明addEventListener()不会阻断程序运行
2.不影响多个事件绑定
5、阻止事件冒泡
event.stopPropagation()
调用该方法会阻止事件继续传播,但不会阻止其他事件程序被处理,也就是说。如果一个元素上绑定了多个事件处理程序,调用该方法只会阻止事件传播到更高层级的元素,而不会阻止同一个元素上的其他事件处理程序被触发
box1.addEventListener('click',function(){
console.log('box1')
},true)
box2.addEventListener('click',function(e){
e.stopPropagation();
console.log('box2')
},true)
box3.addEventListener('click',function(e){
console.log('box3')
},true)
在实例中,当点击box1的时候,触发e.stopPropagation()会阻止事件继续传播到box3中,所以只输出box1, box2
6、事件委托
事件委托也成为事件代理,事件委托是一种将事件处理程序绑定到一个父元素上,而不是将事件处理程序绑定到每一个子元素上,通过事件委托,可以减少事件处理程序的数量,提高效率
利用事件冒泡,把事件不添加到具体元素本身,而是添加到父元素标签上,就是事件委托
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let list = document.querySelector('.list');
list.addEventListener('click',(e)=>{
console.log(e.target.innerHTML);
})
</script>
通过将事件处理程序绑定在父元素ul上,当点击列表中内容时,可以通过event对象拿到信息,不管li有多少,只需要维护一个函数即可。
降低成本,提高效率