e.target与事件委托简例（原生和jQuery的区别）

target定义（英译：目标，目的）：

　　　　target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

语法：

　　　　event.target

　　　　event.target.nodeName 　　//获取事件触发元素标签name（li,p...）

　　　　event.target.id　　　　　　　//获取事件触发元素id

　　　　event.target.className　　//获取事件触发元素classname

　　　　event.target.innerHTML　　//获取事件触发元素的内容（li）

　　　　等。。。

jquery:this 与 e.target区别

　　　　this会冒泡。e.target不冒泡就是指向事件触发的dom。（这里说的this会冒泡，就是指的是会将目标函数点击的事件不自身处理，将事件委托到他的父元素节点上。例如下面的例子，e.target指的是目标函数）

HTML部分
<ul>
<li><b>Click me!</b></li>
<li class="li">You can also <b>Click me!</b></li>
</ul>
JS部分
$('li').click(function(e){ //点击的是<b>标签的时候
console.log($(e.target)); // 返回值指的是<b>
console.log($(this)); //返回值值的是<li>
})

正确的事件委托使用方法

$('ul').click(function(e){

if(e.target.className==='li'){//点击元素下面的class为li的元素
console.log($(e.target))
}
});

 

转载于:https://www.cnblogs.com/zjhuanjing/p/11459923.html