|
01-事件冒泡
1.1-事件冒泡介绍
本小节知识点：介绍什么是事件冒泡 - 事件冒泡：如果一个元素的事件被触发，那么他的所有父级元素的同名事件也会被依次触发
元素->父元素->body->html->document->window
事件冒泡一直存在，只不过以前我们没有给父级元素加同名事件
<!DOCTYPE html><html lang="zh-CN"><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>事件冒泡</title> <style> .parent { position: relative; width: 200px; height: 200px; background-color: pink; } .son { position: absolute; left: 400px; top: 300px; width: 100px; height: 100px; background-color: red; } </style></head><body> <!-- 冒泡: bubble --> <div class="parent"> <div class="son"></div> </div> <script> // 证明冒泡: 给父子添加同类型事件即可 const parent = document.querySelector('.parent') const son = parent.firstElementChild // 给父子绑定点击事件 parent.onclick = function () { console.log('parent') } // 点击parent元素： 输出parent， 点击son元素： 也输出parent // 1. 事件是所有元素都有的： 给不给事件， 都有 // 2. 点击son触发了parent的点击事件： 事件冒泡发生 // 所有元素都有事件， 包括顶级对象window window.onclick = function () { console.log('window') } // 事件链条： 目标元素-》上级-》上级-》body-》html-》document-》window // 事件冒泡： 大部分的时候没用（还有坏处） </script></body></html>
1.2-事件冒泡利用（事件委托）
本小节知识点：介绍事件冒泡的好处 事件冒泡好处：如果想给父元素的多个子元素添加事件，我们可以只需要给父元素添加事件即可，然后 通过获取事件源(e.target)就可以得知是哪一个子元素触发了这个事件 <!DOCTYPE html><html lang="zh-CN"><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>事件冒泡 - 应用 - 事件委托</title> <style> li { margin: 20px 0; } </style></head><body> <ul> <li>百里守约1</li> <li>百里守约2</li> <li>百里守约3</li> </ul> <script> // 需求: 给所有li增加鼠标的移入移出事件: 变色即可 // document.querySelectorAll('li').forEach(function (li) { // li.onmouseover = function () { // this.style.backgroundColor = 'red' // } // li.onmouseout = function () { // this.style.backgroundColor = '' // } // }) // 1. 代码的执行效率偏低: 需要给所有的li,一个一个的绑定事件 // 2. 可扩展性弱: 新增一个li,将会无效 // innerHTML: 所有都无效 // document.querySelector('ul').innerHTML += '<li>innerHTML的li</li>' // 逻辑: 取出ul中的所有li(结构,不包含事件), 再放进去(字符串形式): 所有的事件全部丢失 // document.createElement() + appendChild(): 新增的无效 // let li = document.createElement('li') // li.innerHTML = 'creatElement创建的li' // document.querySelector('ul').appendChild(li) // 事件委托: 将子元素该绑定的事件(效果代码) 绑定到父元素身上 document.querySelector('ul').onmouseover = function (e) { // 事件对象中: e.target 是触发事件的原始目标(最上面的孩子) console.log(e.target) // 如何区分目标元素是li还是ul呢? 节点: 节点三要素 // nodeType: li和ul都是元素, 1 // nodeValue: li和元素都是元素, null // nodeName: 是元素标签名字的大写: LI UL console.log(e.target.nodeName) if (e.target.nodeName === 'LI') { // 是目标元素 e.target.style.backgroundColor = 'red' } } document.querySelector('ul').onmouseout = function (e) { if (e.target.nodeName === 'LI') { // 是目标元素 e.target.style.backgroundColor = '' } } // 最大的优点: 事件绑定一次(性能极大提升) // 次要优点: 不论是innerHTMl的修改还是createElement的创建: 所有的li都有效 // document.querySelector('ul').innerHTML += '<li>innerHTML的li</li>' // 正是因为有了事件委托: 以后不用再使用创建元素,直接使用innerHTML方便太多 // let li = document.createElement('li') // li.innerHTML = 'creatElement创建的li' // document.querySelector('ul').appendChild(li) // 事件委托: 是事件冒泡唯一的价值(挺有用) </script></body></html>
1.3-事件冒泡影响 与 阻止事件冒泡
事件冒泡会导致需求冲突：例如我想要添加一个功能，弹出登录窗之后点击body空白区域让登陆窗消失
此时a标签弹出登录窗的点击事件会触发body的点击事件，导致登陆窗一出来就消失
解决方案：阻止事件冒泡（下一小节知识点）
阻止事件冒泡：让同名事件不要在父元素中冒泡（触发） * 说人话：点击一个元素只会触发当前元素的事件，不会触发父元素的同名事件 语法： 事件对象.stopPropagation() IE8及之前不支持 事件对象.cancelBubble = true IE8之前支持 注意：如果想要阻止事件冒泡，一定要在触发事件的函数中接收事件对象 <!DOCTYPE html><html lang="zh-CN"><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>事件冒泡 - 影响 - 阻止事件冒泡</title> <style> * { margin: 0; padding: 0; } a { text-decoration: none; display: block; width: 200px; margin: 20px auto; } .form { position: relative; width: 400px; height: 200px; margin: 0 auto; text-align: center; border: 1px solid #ccc; display: none; } .form span { display: block; position: absolute; right: -25px; top: -25px; width: 50px; height: 50px; text-align: center; line-height: 50px; border: 1px solid #ccc; border-radius: 50%; background-color: #fff; cursor: pointer; } </style></head><body> <a href="javascript:;" rel="external nofollow" >点我显示登录框</a> <div class="form"> <span>X</span> 用户名: <input type="text" name="username"><br> 密码: <input type="password" name="password"><br> <button>登录</button> </div> <script> // 事件冒泡: 子元素事件触发, 导致父元素相同事件被触发 // 需求: 点击 链接 显示登录框, 点击任何空白地方, 都要隐藏登录框 const a = document.querySelector('a') const form = document.querySelector('.form') const x = form.firstElementChild // 阻止冒泡: 阻止事件的传递: 事件对象e.stopPropagation() // 子元素如果不希望父元素触发子元素相同的事件: 在子元素的事件中,阻止传递 // 1. 给a做点击事件: 显示div.form a.onclick = function (e) { console.log('a') form.style.display = 'block' console.log(e) // 阻止传递: 点击事件, 到a这里结束 e.stopPropagation() } // 2. 点击空白隐藏div.form: 简单: 给document || window做点击事件 document.onclick = function () { console.log('document') form.style.display = '' } // 3. 为了安全: 让整个formdiv都可以点击, 不会传递 form.onclick = function (e) { e.stopPropagation() } // 4. 点击关闭 x.onclick = function () { form.style.display = '' } // 总结 // 实际开发中: 可能会出现父子出现相同类型的事件, 如果效果相反(a要显示div,document要隐藏div),一般会用到阻止事件传递: e.stopPropagation() </script></body></html>
02-事件捕获
1.1-事件捕获介绍
本小节知识点：事件捕获 - 1.事件冒泡：从触发事件元素，一级一级往上找父元素触发同名事件，如果有就触发
- 2.事件捕获：从最顶级的父元素一级一级往下找子元素触发同名事件，直到触发事件的元素为止
事件捕获与事件冒泡触发事件的顺序完全相反
- 3.事件捕获，只能通过addEventListener并且参数写true才是事件捕获
其他都是冒泡（不是通过addEventListener添加、addEventListener参数为false）
- 4.事件对象.stopPropagation() 除了可以阻止冒泡还可以阻止捕获
- 5.IE8及以前没有捕获！
1.2-事件三个阶段
本小节知识点：介绍事件的三个阶段 1
原生JS实现酷炫分页效果
jQuery实现弹幕效果案例 |
