原生JS事件绑定的三种方式

Posted 2022-09-06 suwu150

javascript绑定事件的方法

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定"事件处理函数"。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

在JavaScript中，有三种常用的绑定事件的方法：

• 在DOM元素中直接绑定；
• 在JavaScript代码中绑定；
• 绑定事件监听函数。

1.在DOM元素中直接绑定

html标签事件绑定：属性赋值 ，这个在该元素的properties属性中可以查到， 也可以在事件监听中看到

function show()
　　console.log('show');


function print()
　　console.log('print');


<button onclick="show()" id="btn1" onclick="print()">html标签事件绑定</button>
//触发的方法只有show方法

<button onclick="show();print()" id="btn1">html标签事件绑定</button>
//一个事件，触发两个方法

2.在JavaScript代码中绑定

js事件绑定：属性赋值，这个在该元素的properties属性中可以查到，也可以在事件监听中看到

<button id="btn2">js事件绑定</button>

 document.getElementById("btn2").onclick = show;
 document.getElementById("btn2").onclick = print;

//只能触发print方法，如果需要同时触发两个方法，只能使用事件监听,也就是第三种绑定方案.

3.绑定事件监听函数

只可以在该元素的事件监听中看到

<button id="btn3">事件监听</button>      

//show和print两个方法都可以触发
document.getElementById("btn3").addEventListener("click",show);
document.getElementById("btn3").addEventListener("click",print);

//移除事件监听
document.getElementById("btn3").removeEventListener("click");