首页 > itarticle > this与event.target

this与event.target

admin 11月 13, 2020 0

dom对象中this与event.target区别

1.this是事件冒泡，从内到外this的值都是在改变，向外触发函数

<div id="div" onclick="divclick(this)" style="width:100px;height: 100px;background-color: pink">div
    <a id="a" onclick="aclick(this)" style="display: block;width: 50px;height: 50px;background-color: orange;">a</a>
</div>
<script>
    function divclick(item){
        console.log(item.id);
    }
    function aclick(item){
        console.log(item.id);
    }
</script>

//点a触发   //a     //div
//点触发       //div

2.event.target代表的是触发事件的dom对象，是静态不变的

<div id="div" onclick="divclick()" style="width:100px;height: 100px;background-color: pink">div
    <a id="a" onclick="aclick()" style="display: block;width: 50px;height: 50px;background-color: orange;">a</a>
</div>
<script>
    function divclick(){
        console.log(event.target.id);
    }
    function aclick(){
        console.log(event.target.id);
    }
</script>
//点a触发   //a     //a
//点divchufa       //div