700字范文 > javascript（JS） 0基础快速入门（七）（事件的冒泡委托和绑定）

javascript（JS） 0基础快速入门（七）（事件的冒泡委托和绑定）

时间：2022-06-04 06:23:57

事件的冒泡

所谓冒泡指的就是事件的向上传导当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

类似于给一个盒子绑定了鼠标点击事件，当点击了盒子后，该鼠标点击事件会一直往上触发，
如果这盒子有个父级盒子，那么父级盒子的鼠标点击事件也会触发，一直到window的鼠标点击事件上`

取消冒泡

event.cancelBuuble= true;

事件的委派

指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素因为后代没有设置点击事件，所以后代元素不会执行任何操作，祖先元素设置了祖先元素会执行对应操作事件的委派是利用了冒泡，通过委派可以减少事件的绑定的次数，提高程序的性能

给ul绑定一个单击响应函数，当点击子元素时ul的点击响应函数也会触发，这就是事件的委托

ul.onclick = function(event){// 判断当点击的时a标签时触发ul的函数// target 这个属性可以获取触发这个事件的对象// 给 a 标签添加blinkclass 类名用来绑定自身，不然点 ul 的哪个地方都可以触发事件var reg = /\blink\b/;if(reg.test(event.target.className)){alert("sad");}}

事件的绑定

对象+事件可以绑定一个对象绑定一个事件但是后边绑定相同的事件会被覆盖掉

`addEventListener( )`

通过这个方法也可以为元素绑定响应函数参数 1、事件的字符串，不要on2、回调函数，当事件触发时该函数会被调用3、是否在捕获阶段触发事件，需要一个布尔值，一般传false ，默认不传就为false

btn1.addEventListener("click" , function(){} , false);

使用addEventListener（）可以同时为一个元素的相同事件同时绑定多个响应函数

当事件触发时，响应函数会按照函数的绑定顺序执行

示例：

<div id="box1" style="width: 100px; height: 100px; background-color: #bfa;"></div><script>let box1 = document.getElementById('box1')box1.addEventListener('click',()=>{console.log('我是第一个函数点击事件');})box1.addEventListener('click',()=>{console.log('我是第二个函数点击事件');})</script>

注意：但是当使用，addEventListenr（）方法绑定的函数时，取消默认行为不能用return false

// 可以使用event来取消// event.preventDefault();

事件委派的使用案例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function(){var btn1 = document.getElementById("btn1");var ul = document.getElementsByTagName("ul")[0];// 添加一个a标签btn1.onclick = function(){var a = document.createElement("li");a.innerHTML = "<li><a href='#' class='link'>超链接一</a></li>";ul.appendChild(a);}// 给ul绑定一个单击响应函数，当点击子元素时ul的点击响应函数也会触发，这就是事件的委托ul.onclick = function(event){// 判断当点击的时a标签时触发ul的函数// target 这个属性可以获取触发这个事件的对象var reg = /\blink\b/;if(reg.test(event.target.className)){alert("sad");}}}</script></head><body><button id="btn1">添加一个超链接</button><ul><li><a href="#" class="link sd" >超链接一</a></li><li><a href="#" class="link" >超链接二</a></li><li><a href="#" class="link" >超链接三</a></li></ul></body>

点击按钮就添加一个新标签，并且利用事件委派给新标签也绑定了鼠标点击事件