三种事件的绑定比较

最新推荐文章于 2024-07-10 14:03:37 发布

hidden bug

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量152

点赞数

文章标签： javascript html jquery

本文链接：https://blog.csdn.net/hover_bug/article/details/120699850

版权

this关键字在JavaScript中，每一个函数的内部都存在一个this关键字，其随着运行环境的不同，其指向也是不同的。

<body>
    <p id="t">ttttt</p>
</body>
<script>
    var d = document.getElementById('t');
    d.onclick = function(){
		//this指谁使用该事件 就是 d 
        console.log(this);
    }
</script>

将上述代码的动态绑定，改为行内绑定：

<body>
    <p id="t" onclick="f()">ttttt</p>
</body>
<script>
    function f(){
        console.log(this); //window对象
    }
</script>

由此可知：行内绑定，其事件处理程序内部的this指向了全局的window对象。

动态绑定，其事件处理程序内部的this指向了当前正在操作的dom对象。

例子：

需求：同一个元素的同一个事件，绑定多个处理函数：

<body>
    <!--行内绑定,谁在前谁执行-->
    <p id="t"  onclick="t()" onclick="f()">ttttt</p>
</body>
<script>
    function f(){
        alert(1);
    }
    function t(){
        alert(2);
    }
</script>

<body>
    <p id="t" >ttttt</p>
</body>
<script>
    //动态绑定,后边的执行函数会将前面的覆盖掉
    var d = document.getElementById('t');
    d.onclick = function(){
        alert(1);
    }
    d.onclick = function (){
        alert(2);
    }
</script>

<body>
    <p id="t" >ttttt</p>
</body>
<script>
    var d = document.getElementById('t');
    function f1() {
        console.log(this);
    }
    d.addEventListener('click', f1, false);
    d.addEventListener('click', function(){console.log('f2');}, false);
</script>

总结：第一种 "HTML标签的on-属性"，违反了HTML与JavaScript代码相分离的原则；处理函数中 this 指向的window对象；

第二种 "Element节点的事件属性" 的缺点是，同一元素同一个事件只能定义一个监听函数，也就是说，如果定义两次onclick属性，后一次定义会覆盖前一次。但是处理函数中的 this 指向的选中的对象；

第三种：addEventListener方法可以针对同一个元素的同一个事件，添加多个监听处理函数。处理函数中的 this 指向的也是选中的元素；

hidden bug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三种事件的绑定比较

this关键字在JavaScript中，每一个函数的内部都存在一个this关键字，其随着运行环境的不同，其指向也是不同的。<body> <p id="t">ttttt</p></body><script> var d = document.getElementById('t'); d.onclick = function(){ //this指谁使用该事件就是 d console.log..
复制链接

扫一扫