js监听多个事件_Javascript事件绑定常见方案详解

开始

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

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

常见的三种绑定方式

(1)在DOM元素上直接绑定事件

(2)在js标签(实现分离)中绑定事件

(3)通过DOM lev3级事件绑定标准(事件监听)绑定事件

第一种绑定方式(DOM元素上直接绑定)

<button onclick="Mybtn()">单击button>
<script>function Mybtn(){window.confirm("我返回给用户的响应");
     }script>

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

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

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

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

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

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

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

"Mybtn">单击

IE8标准

语法：element.attachEvent(event, function)

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

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

注意：

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

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

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

总结：

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

*声明：本文于网络整理，版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜。

公众号ID:tzbc666

有趣的灵魂在等你

长按扫码可关注

点个好看和转发也是一种支持哟！