js事件绑定、事件监听

1.在DOM元素中直接绑定
2.在 javascript 代码中绑定
3.绑定事件监听函数

1.在DOM中直接绑定事件
我们可以在DOM元素上直接绑定事件
<input type='button' value='click me' οnclick='hello()'>
<script>
function hello(){
alert('hello world!');
};
</script>

2.在 javascript代码中绑定
在javascript代码中（即script标签内）绑定事件可以使用javascript代码与HTML标签分离，文档清晰，便于管理和开发。
<input type='button' value='click me' id='btn'>
<script>
document.getElementById('btn').onclick = function(){
alert('hello world!');
};
</script>

3.使用事件监听绑定事件
事件监听是用 addEventListener() 或 attachEvent() IE 来绑定事件监听函数的。
事件监听
关于事件监听，定义了3个事件阶段，依次是 捕获阶段、目标阶段、冒泡阶段。

语法：
（1）事件绑定监听函数的方式如下:
element.addEventListener(event,handler,useCapture)
（2）事件移除监听函数的方式如下:
element.removeEventListener(event,handler,useCapture)
event：（必需）事件名，支持所有DOM事件
handler：（必需）指定要事件触发时执行的函数
useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认是false
注意：IE8以下不支持
<input type='button' value='click me' id='btn1' />
<script>
document.getElementById('btn1').addEventListener('click',hello);
function hello(){
alert('hello world!');
};
</script>

IE标准：
语法：
（1）事件绑定监听函数的方式如下:
element.attachEvent(event,handler)
（2）事件移除监听函数的方式如下:
element.detachEvent(event, handler)
event：（必需）事件类型。需加 “on”，例如：onclick
handler：（必需）指定要事件触发时执行的函数
<input type='button' value='click me' id='btn2' />
<script>
document.getElementById('btn2').attachEvent('onclick',hello);
function hello(){
alert('hello world!');
};
</script>

事件监听的优点
1.可以绑定多个事件
常规方式绑定
<input type='button' value='click me' id='btn3' />
<script>
var btn3 = document.getElementById('btn3');
btn3.onclick = function(){
alert('hello 1');//不执行
};
btn3.onclick = function(){
alert('hello 2');//执行
};
</script>
注意：常规事件绑定只执行最后绑定的事件.

用监听的方法来绑定
<input type='button' value='click me' id='btn4' />
<script>
var btn4 = document.getElementById('btn4');
btn4.addEventListener('click',hello1);
btn4.addEventListener('click',hello2);
function hello1(){
alert('hello 1');
};
function hello2(){
alert('hello 2');
};
</script>
这样两个事件都执行了.

2.可以解除相应的绑定
<input type='button' value='click me' id='btn5' />
<script>
var btn5 = document.getElementById('btn5');
btn5.addEventListener('click',hello1); //执行了
btn5.addEventListener('click',hello2); //不执行
btn5.removeEventListener('click',hello2);
function hello1(){
alert('hello 1');
};
function hello2(){
alert('hello 2');
};
</script>