事件委托的个人理解

来源:互联网 发布:荷兰留学知乎 编辑:程序博客网 时间:2024/05/01 11:43
首先事件委托:是根据事件冒泡的机制实现的
事件委托一般用(jquery委托的目标).on("事件名称","需要委托的dom元素",function(e){
……
//执行的函数体})来绑定。
其中:e.currentTarget表示需要委托dom元素
e.target表示触发事件的dom元素
委托的目标一般为需要委托的所有元素共有的父元素
如:
$(function(){    $(".item").on("click","ul",function(e) {        // e.target是被点击的元素!        // 如果被点击的是li元素        console.log("触发元素为:");        console.log(e.target);        console.log("当前冒泡的元素为:");        console.log(e.currentTarget);    });});
<div class="item">    <ul>        <li>第一</li>        <li>第二</li>        <li>第三</li>        <li>第四</li>        <li>第五</li>        <li>第六</li>    </ul>    <ul >        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>    </ul></div>
当点击li时,在浏览器控制端的输出结果如下:
触发元素为:
<li>​第三​</li>​
当前冒泡的元素为:
<ul>​…​</ul>​

触发元素为:
<li>​第2​</li>​
当前冒泡的元素为:
<ul>​…​</ul>​
e表示 function(e)中的参数e是事件对象。

1 0
原创粉丝点击