EVENT（下）
- 明天来聊一聊事件的执行机制
-
什么是事件的执行机制呢？
- 思考一个问题？
- 当一个大盒子嵌套一个小盒子的时候，并且两个盒子都有点击事件
-
你点击外面的小盒子，里面的大盒子上的点击事件要不要执行
事件的流传
- 就像下面那个图片一样，咱们点击在红色盒子身上的同时，也是点击在了粉色盒子上
- 这个是既定事实，那么两个盒子的点击事件都会触发
-
这个就叫做 事件的流传
- 当元素触发一个事件的时候，其父元素也会触发雷同的事件，父元素的父元素也会触发雷同的事件
- 就像下面的图片一样
- 点击在红色盒子上的时候，会触发红色盒子的点击事件
- 也是点击在了粉色的盒子上，也会触发粉色盒子的点击事件
- 也是点击在了 body 上，也会触发 body 的点击事件
- 也是点击在了 html 上，也会触发 html 的点击事件
- 也是点击在了 document 上，也会触发 document 的点击事件
- 也是点击在了 window 上，也会触发 window 的点击事件
- 也就是说，页面上任何一个元素触发事件，都会一层一层最终导致 window 的雷同事件触发，前提是各层级元素得有注册雷同的事件，不然不会触发
-
在事件流传的过程中，有一些留神的点：
- 只会流传同类事件
- 只会从点击元素开始依照 html 的构造逐层向上元素的事件会被触发
- 外部元素不论有没有该事件，只有下层元素有该事件，那么下层元素的事件就会被触发
-
到当初，咱们曾经理解了事件的流传，咱们再来思考一个问题
- 事件的确会从本人开始，到 window 的所有雷同事件都会触发
- 是因为咱们点在本人身上，也的确逐层的点在了直至 window 的每一个元素身上
- 然而到底是先点在本人身上，还是先点在了 window 身上呢
- 先点在本人身上，就是先执行本人的事件处理函数，逐层向上最初执行 window 的事件处理函数
- 反之，则是先执行 window 的事件处理函数，逐层向下最初执行本人身上的事件处理函数
冒泡、捕捉、指标
- 咱们方才聊过了，每一个事件，都是有可能从本人到 window ，有可能要执行多个同类型事件
- 那么这个执行的程序就有一些说法了
指标
- 你是点击在哪个元素身上了，那么这个事件的 指标 就是什么
冒泡
- 就是从事件 指标 的事件处理函数开始，顺次向外，直到 window 的事件处理函数触发
- 也就是从下向上的执行事件处理函数
捕捉
- 就是从 window 的事件处理函数开始，顺次向内，只有事件 指标 的事件处理函数执行
- 也就是从上向下的执行事件处理函数
冒泡和捕捉的区别
- 就是在事件的流传中，多个同类型事件处理函数的执行程序不同
事件委托
- 就是把我要做的事件委托给他人来做
- 因为咱们的冒泡机制，点击子元素的时候，也会同步触发父元素的雷同事件
- 所以咱们就能够把子元素的事件委托给父元素来做
事件触发
-
点击子元素的时候，不论子元素有没有点击事件，只有父元素有点击事件，那么就能够触发父元素的点击事件
<body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var oUl = docuemnt.querySelector('ul') oUl.addEventListener('click', function (e) { console.log('我是 ul 的点击事件，我被触发了') }) </script> </body>- 像下面一段代码，当你点击 ul 的时候必定会触发
- 然而当你点击 li 的时候，其实也会触发
target
- target 这个属性是事件对象外面的属性，示意你点击的指标
- 当你触发点击事件的时候，你点击在哪个元素上，target 就是哪个元素
-
这个 target 也不兼容，在 IE 下要应用 srcElement
<body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var oUl = docuemnt.querySelector('ul') oUl.addEventListener('click', function (e) { e = e || window.event var target = e.target || e.srcElement console.log(target) }) </script> </body>- 下面的代码，当你点击 ul 的时候，target 就是 ul
- 当你点击在 li 下面的时候，target 就是 li
委托
- 这个时候，当咱们点击 li 的时候，也能够触发 ul 的点事件
- 并且在事件内不，咱们也能够拿到你点击的到底是 ul 还是 li
-
这个时候，咱们就能够把 li 的事件委托给 ul 来做
<body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var oUl = docuemnt.querySelector('ul') oUl.addEventListener('click', function (e) { e = e || window.event var target = e.target || e.srcElement // 判断你点击的是 li if (target.nodeName.toUpperCase === 'LI') { // 确定点击的是 li // 因为当你点击在 ul 下面的时候，nodeName 应该是 'UL' // 去做点击 li 的时候该做的事件了 console.log('我是 li，我被点击了') } }) </script> </body>- 下面的代码，咱们就能够把 li 要做的事件委托给 ul 来做
总结
-
为什么要用事件委托
- 我页面上自身没有 li
- 我通过代码增加了一些 li
- 增加进来的 li 是没有点击事件的
- 我每次动静的操作完 li 当前都要从新给 li 绑定一次点击事件
- 比拟麻烦
- 这个时候只有委托给 ul 就能够了
- 因为新加进来的 li 也是 ul 的子元素，点击的时候也能够触发 ul 的点击事件
-
事件委托的书写
- 元素的事件只能委托给构造父级或者再构造父级的同样的事件上
- li 的点击事件，就不能委托给 ul 的鼠标移入事件
- li 的点击事件，只能委托给 ul 或者在高父级的点击事件上
默认行为
-
默认行为，就是不必咱们注册，它本人就存在的事件
- 比方咱们点击鼠标右键的时候，会自动弹出一个菜单
- 比方咱们点击 a 标签的时候，咱们不须要注册点击事件，他本人就会跳转页面
- …
- 这些不须要咱们注册就能实现的事件，咱们叫做 默认事件
阻止默认行为
-
有的时候，咱们不心愿浏览器执行默认事件
- 比方我给 a 标签绑定了一个点击事件，我点击你的时候心愿你能通知我你的地址是什么
- 而不是间接跳转链接
- 那么咱们就要把 a 标签原先的默认事件阻止，不让他执行默认事件
-
咱们有两个办法来阻止默认事件
e.preventDefault(): 非 IE 应用e.returnValue = false：IE 应用
-
咱们阻止默认事件的时候也要写一个兼容的写法
<a href="https://www.baidu.com">点击我试试</a> <script> var oA = document.querySelector('a') a.addEventListener('click', function (e) { e = e || window.event console.log(this.href) e.preventDefault ? e.preventDefault() : e.returnValue = false }) </script>- 这样写完当前，你点击 a 标签的时候，就不会跳转链接了
- 而是会在控制台打印出 a 标签的 href 属性的值
发表回复