添加事件处理程序

要为元素的事件添加事件处理程序，请使用元素对象的addEventListener()方法

element.addEventListener(type,eventListener);Code language: CSS (css)

假设您有一个类为.btn的按钮

<button class="btn">Subscribe</button>Code language: HTML, XML (xml)

要将事件处理程序附加到click事件，请使用以下方法

首先，定义一个事件处理程序

function clickHandler(event) {
   console.log('Button Clicked');
}Code language: JavaScript (javascript)

然后，使用按钮元素的addEventListener()方法

const btn = document.querySelector('.btn');
btn.addEventListener('click', clickHandler);Code language: JavaScript (javascript)

如果您不重用事件处理程序函数，则可以使用匿名函数作为事件处理程序

const btn = document.querySelector('.btn');
btn.addEventListener('click', function(event){
   console.log('Button Clicked');
});Code language: JavaScript (javascript)

大多数现代 Web 浏览器都支持addEventListener()方法。但是，IE8 使用attachEvent()方法代替。

如果您需要支持 IE8，则可以创建一个辅助函数

function addEvent(el, type, handler) {
  el.attachEvent ?
    el.attachEvent('on' + type, handler) :
    el.addEventListener(type, handler);
}Code language: JavaScript (javascript)

要将事件处理程序添加到按钮元素的click事件，请使用以下方法

addEvent(btn, 'click', function (event) {
  console.log('Button Clicked');
});Code language: JavaScript (javascript)