【笔记】事件委托（即事件代理）知识点

事件委托原理

• 事件委托就是利用事件冒泡原理实现的！

• 事件冒泡：就是事件从最深节点开始，然后逐步向上传播事件；

例：页面上有一个节点树，div > ul > li > a 比如给最里面的a 加一个click事件，那么事件就会一层一层的往外执行，执行顺序 a > li > ul > div, 有这样一个机制，当我们给最外层的div添加点击事件，那么里面的ul ， li ， a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托他们父集代为执行事件；

//需求：鼠标放到li上对应的li背景变灰

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>
<script type="text/javascript">
    $("ul").on("click",function(e){
           $(e.target).css("background-color","red").siblings().css("background-color","white");
    })
</script>

//用父集做事件处理，当li被点击时，由于冒泡原理事件就会冒泡到ul上，因此ul上有点击事件，所以事件就会被触发;
//Event对象提供了一个属性叫做target，可以返回事件的目标节点，我们称之为事件源，
//也就是说，target就可以表示当前事件操作的dom，但可能不是真正操作的dom，
//js中存在兼容性问题：标准浏览器：event.target，IE浏览器：event.srcElement

存在问题：点击ul本身的时候也是会触发的；
如果我们只想让li触发而不想让ul触发，怎么办？？？
此时只是获取了当前节点的位置，但并不知道节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回值是一个大写的，判断时需要转换为小写；

$("ul").on("click",function(e){
        if (e.target.nodeName.toLowerCase() == "li") {
             $(e.target).css("background-color","red").siblings().css("background-color","white");
        } else{
             return;
        };
                 
})

补充
this是指向当前事件所绑定的元素，而e.target指向事件执行时鼠标所点击区域的那个元素
要看事件绑定的元素内部有没有子元素
如果有子元素的话e.target指向这个子元素，如果没有，e.target和this都指向事件所绑定的元素。
e.target事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。