1、使用html进行事件绑定

1.1、直接在 html 标签上写入事件类型和事件处理方法。

<button onclick = "alert('hello world')">click me!</button>

1.2、在 html 标签上写入事件类型，在 js 上写事件处理方法。

• html部分

<button onclick = "sayHello()">click me!</button>

• js部分

function sayHello(){alert('hello world!!!')
}

2、使用 JS 获取 dom 对象进行事件绑定

为了让代码更加整洁以及便于维护，使 html 代码与 js 代码解耦。

• html 部分

<button id="btn">click me!</button>

• js 部分：注意在调用事件方法时，不要加上括号，否则会立即调用，之后点击按钮就没反应了。

document.querySelector('#btn').onclick = sayHello;    //不要加括号！function sayHello() {alert('hello world')
}

3、使用addEventListener()绑定事件

使用上面两种方法，只能绑定一个事件，如果要绑定多个事件，可以使用 addEventListener() 添加事件监听器，一般情况下传入两个参数，第一个参数是事件类型，第二个参数是事件处理方法。

• html 部分

<button id="btn">click me!</button>

• js 部分：注意在写入事件类型时，不要加上 on

document.querySelector('#btn').addEventListener('click',sayHello)
document.querySelector('#btn').addEventListener('click',sayHi)function sayHello() {alert('hello world!')
}
function sayHi () {alert('hi!')
}

4、onclick vs addeventlistener(click)

• 1.onclick 事件在同一时间只能指向唯一对象

• 2.addEventListener 对任何 DOM 都是有效的，而 onclick 仅限于 HTML

• 3.addEventListener 可以控制 listener的触发阶段（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用 removeEventListener 清除

• 4.onclick 添加多次以后，后边的会覆盖前边的，addEventListener 则可以给多个事件添加 listener