事件委托 js高级

在这里插入图片描述

每个事件返回的时候会进行冒泡会冒泡他的父亲上所以利用他的身上的事件进行监听
他的父亲上会有target代表着每个子代

Event（给父亲添加事件的function里面的参数）对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较

事件委托的作用：让一个项目中有100个组件想要添加事件的时候如果在每个组件上添加事件的话会极大的站用内存，如果在哪个组件的事件被调用的时候在给他定义方法并执行会极大的节省内存，提高性能

需求：这哟四个li用事件委托他给们设置点击事件弹出他的值

javascript"><!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
 <ul>
   <li>1你是</li>
   <li>2独一</li>
   <li>3无二</li>
   <li>4的</li>

 </ul>
</body>

</html>
<script>
window.onload = function(){
　　var oUl = document.querySelector("ul")
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　 alert(123);
　　　　　　　  alert(target.innerHTML);
　　　　}
　　}

}
</script>