事件委托原理
事件委托就是利用事件冒泡原理实现的!
事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件;
例:页面上有一个节点树,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)。