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))
}
});

或者

$('ul').on('click',function(e){
if(e.target.nodeName.toLowerCase() === 'li'){//点击li标签的时候出发。注意:点击li里面的元素也是不行的,必须点击li标签
console.log('123')
}
});

 

posted @ 2019-09-04 16:31  幻景  阅读(503)  评论(0编辑  收藏  举报