1 通过HTML标签属性指定，如：

[code lang="html"]
<input type="button" value="TEST" onclick="functionName();" />
[/code]

这样的方式可以直接把元素作为参数传递给处理函数，如：
[code lang="html"]
<input type="button" value="TEST" onclick="functionName(this);" />
[/code]

• 注：事件处理器的大小写不做要求，但是根据习惯，会把事件类型的首字母大写，如onClick、onMouseover。

2 元素的方法（DOM0级事件处理程序）

[code lang="js"]
let btn = document.getElementById('my-btn');
btn.onclick = function() {
// some code …
}

// 删除事件
btn.onclick = null;
[/code]

• 在这种方法里面，对象属性名称都是小写形式，但是这样的方式没有办法向事件函数传递参数，而且绑定行为要在元素加载完成之后来执行，或者使用 body 的 onload。

3 addEventListener() 和 removeEventListener() （DOM2级事件处理程序）

[code lang="js"]
let btn = document.getElementById('my-btn');
function handler() {
// some code …
}
btn.addEventListener('click', handler, false);
btn.removeEventListener('click', handler, false);

// true 在捕获阶段调用
// false 在冒泡阶段调用

[/code]
支持IE9+、FCOS

4 attachEvent() 和 detachEvent()

在 attachEvent() 的匿名函数中 this === window 。
[code lang="js"]
let btn = document.getElementById('my-btn');
function handler() {
// some code …
}
btn.attachEvent('onclick', handler, false);
btn.detachEvent('onclick', handler, false);
[/code]
支持IE、Opera

5 IE浏览器独有的方式，基本废弃（IE4+）：<SCRIPT FOR>

[code lang="html"]
<SCRIPT FOR="button1" EVENT="onclick">
//执行语句
</SCRIPT>
<INPUT TYPE="button" NAME="myButton" value="click" ID="button1" />
[/code]

• 这个方式你必须为每一个元素每一个事件创建一个 script for 标签，因为执行语句不是写在某个函数里面的。