Javascript事件绑定常见方案详解

Javascript事件绑定常见方案详解

让js对用户的操作做出相应的响应，就要对事件进行绑定

DOM元素绑定事件处理function函数，不同的操作对应不同的函数名称

常见的三种绑定方式

（1）在DOM元素上直接绑定事件

（2）在js标签（实现分离）中绑定事件

（3）通过DOM lev3级事件绑定标准（事件监听）绑定事件

第一种绑定方式（DOM元素上直接绑定）

单击

function Mybtn(){
    window.confirm("我返回给用户的响应");
 }           

分析总结：当用户点击按钮时，触发Mybtn函数，然后返回，非常简单，这种直接写入元素中的方法很早就有，隶属于DOM的lev0级标准，所以兼容性非常好，IE8以下几乎没有问题，并且在全局范围内执行，因此Mybtn()内部的this指向全局对象window，需要注意是，想要操作这个被点击的DOM元素，this它是无效的。

第二种绑定方式（js双标签中绑定事件/实现分离）

<script>
    document.getElementById('btn').onclick=function(){
        window.confirm("我返回给用户的响应，我是匿名函数");            
    }           

分析总结：首先获取DOM元素，将.onclick作为方法，属性值作为函数（匿名函数），这种方法会让文档结构清晰易维护和管理，并且函数内部的this直接指向该DOM对象，如果使用函数来调用其他函数（回调函数），DOM元素.οnclick=function{函数1(),函数2()}，这时函数1/函数2的this就指向了window。

缺陷：只能绑定一个事件，绑定处理一个函数，绑定两个的话第一个会被覆盖。

注意：button标签必须放在script双标签之前，否则无效。

第三种绑定方式（lev3级事件绑定标准-事件监听）

document.getElementById('Mybtn').addEventListener('click',fun);
    function fun(){
        alert("我返回给用户的响应");
     }           

IE8标准

语法：element.attachEvent(event, function)

event：事件，IE标准需要加on，如onload

function：函数，触发时执行的函数

注意：

（1）如果添加了多个事件处理函数, 按"添加时的先后顺序来执行"

（2）事件参数去掉事件名称的’on’(W3C标准)

（3）事件处理函数中的this指向DOM节点自身（W3C标准）

总结：

常规的事件绑定只能绑定最后绑定的事件，而事件监听可以绑定多个事件，并且可以解除绑定，还可以封装事件监听，需要注意的是，IE8以下需要使用element.attachEvent(event,function)进行事件监听的绑定。

作者： 王佳斌

来源：CSDN

原文：

https://blog.csdn.net/weixin_44198965/article/details/89599226

版权声明：本文为博主原创文章，转载请附上博文链接！