事件委托
- 就是把我要做的事情委托给别人来做
- 因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件
- 所以我们就可以把子元素的事件委托给父元素来做
事件触发
-
点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件，那么就可以触发父元素的点击事件
<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 或者在高父级的点击事件上
