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

什么是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
    }