JS绑定事件的方法有哪些？

更新时间:2021-10-20 来源:黑马程序员浏览量:

IT培训班

什么是事件？

事件是指可以被JavaScript侦测到的行为，是一种“触发-响应”的机制。这些行为指的就是页面的加载、鼠标的单击/双击、鼠标指针滑某个区域等具体的动作，它对实现页面的交互效果起着非常重要的作用。事件由事件源、事件类型和事件处理程序3部分构成，又被称为“事件三要素”。

事件三要素

事件源：触发(被)事件的元素

事件类型：事件的触发方式(例如鼠标点击或键盘点击)

事件处理程序：事件触发后要执行的代码(函数形式)

以上的三个要素可以简单理解为“谁触发了事件”、“触发了什么事件”、“触发了事件之后要做什么”。

事件绑定的3种方式

1.行内方式绑定(元素属性)

<!-- 形式一 -->
<body>
    // onclick 其实就是html元素的一个属性，而属性的值需要是 一段可执行的JS代码
    <input type="button" value="按钮" id="btn" onclick="alert(2)">
</body>


<!-- 形式二 -->
<body>
    <input type="button" value="按钮" id="btn" onclick="f()">
</body>
<script>
    function f(){
        console.log(3);
    }
</script>

行内方式绑定处理函数中this指向的window对象；违反了HTML与JavaScript代码相分离的原则，一般不用。

2.动态绑定 (节点对象属性)

<body>
    <input type="button" value="按钮" id="btn">
</body>
<script>
    var btn = document.getElementById('btn');
        btn.onclick = function(){
            alert(4);
        }
</script>

获取节点对象，然后修改节点对象的属性onclick的值，值是一个匿名函数即可；

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

3.事件监听(节点对象方法)

<body>
    <input type="button" value="按钮" id="btn">
</body>
<script>
    var btn = document.getElementById('btn');
        btn.addEventListener('click',function(){
            alert(5);
        });
</script>

每一个节点对象都提供了addEventListener方法，这个方法可以给选中的节点添加指定类型的事件及事件处理程序。

移除事件监听

<body>
    <input type="button" value="按钮" id="btn">
</body>
<script>
    function f(){
        alert(5);
    }
    var btn = document.getElementById('btn');
    btn.addEventListener('click',f);
    btn.removeEventListener('click',f);
</script>

注意：removeEventListener方法移除的监听函数，必须与对应的addEventListener方法的参数完全一致，而且必须在同一个元素节点，否则无效。

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

上一篇：什么是原型链?如何理解原型链? 下一篇：jQuery的4种常见动画效果