2021-06-12 event.target的定义和它与this的区别

原创于 2021-06-12 15:51:26 发布 · 889 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#事件对象 #dom #事件冒泡 #事件委托 #this

js 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了JavaScript中event对象的属性target和value的用法。event.target指向触发事件的元素，而event.target.value则获取该元素的当前值。在有无子元素的情况下，this和event.target的指向有所不同。event.target常用于事件委托和阻止冒泡等场景。举例说明了在事件处理函数中如何使用这两个属性来区分点击的元素和事件绑定的元素。

什么是event.target.value?

event

常设置形参event(或eve,e等等)来接收事件对象

event.target

事件对象作为对象,有其属性和方法,其中target属性的作用是获取触发事件的目标,即绑定事件的元素

event.target.value

获得当前元素target属性的属性值

总结:

event.value获取的是当前的(点击移动等)事件元素
event.target.value获取的是当前元素输入(或选择)的值

event.target和this的区别是什么?

区别:

event.target指向事件执行时鼠标所点击区域的元素
this指向当前事件绑定的元素

事件绑定的元素有无子元素

没有子元素时,两者都是指向事件绑定的元素
有子元素时,event.target指向其子元素,而this指向此元素本身

event.target的应用场景

常常用于取消事件冒泡,事件委托等场景

代码

    var ulObj = document.querySelector("ul");
    var lisObj = document.querySelectorAll("li");
    ulObj.onclick = function(event) {
        console.log(event.target, this);
        //ul有子元素li时,点击ul内的li,前者指向具体点击的li,后者结果仍是ul
        //ul没有子元素li时,两者都指向ul
    }