JavaScript 事件绑定、事件监听、事件委托

事件绑定：有三种常用的绑定事件的方法：

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()来绑定时间监听函数。

事件监听

关于时间监听，定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。

语法：

element.addEventListener(event,function,useCapture)

event：（必需）事件名，支持所有DOM事件。

function：（必需）指定要事件触发时执行的函数。

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标准：

语法：

element.attachEvent(event,function)

event:（必需）事件类型。需加“on”，例如：onclick。

function：（必需）指定要事件触发时执行的函数。

例如：

<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>

封装事件监听

<input type='button' value='click me' id='btn5' />

//绑定监听事件

function addEventHandler(target,type,fn){

if(target.addEventListener){

target.addEventListener(type,fn);

}else{

target.addEventListener('on'+type,fn);

};

};

//移除监听事件

function removeEventHandler(target,type,fn){

if(target.removeEventListener){

target.removeEventListener(type,fn);

}else{

target.detachEvent('on'+type,fn);

};

};

事件委托

事件委托就是利用冒泡的原理，把时间加到父元素上，触发执行效果。

<input type='button' value='click me' id='btn6' />

<script>

var btn6 = document.getElementById('btn6');

document.onclick = function(event){

event = event || window.event;

var target = event.target || event.srcElement;

if(target == btn6){

alert(btn5.value);

};

};

</script>

事件委托的优点

1、能够提高javascript性能，事件委托可以显著的提高事件的处理速度，减少内存的占用。

例如：

<ul id='list'>

<li id='item1'>item1</li>

<li id='item2'>item1</li>

<li id='item3'>item1</li>

</ul>

<script>

var item1 = document.getElementById('item1');

var item1 = document.getElementById('item2');

var item1 = document.getElementById('item3');

document.addEventListener('click',function(event){

var target = event.target;

if(target == item1){

alert('hello item1');

}else if(target == item2){

alert('hello item2');

}else if(target == item3){

alert('hello item3');

};

});

</script>

2、动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。

<ul id='list'>

<li id='item1'>item1</li>

<li id='item2'>item2</li>

<li id='item3'>item3</li>

</ul>

<script>

var list = document.getElementById('list');

document.addEventListener('click',function(event){

var target = event.target;//target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口

if(target.nodeName == 'LI'){

alert(target.innerHTML);

};

});

var node = document.createElement('li');

var textnode = document.createTextNode('item4');

node.appendChild(textnode);

list.appendChild(node);

</script>

注释：

什么是nodeName？

获得bod元素的节点名称：

定义和用法：

nodeName属性指定节点的节点名称。

如果节点是元素节点，则nodeName属性返回标签名。

入股节点是属性节点，则nodeName属性返回属性的名称。

对于其他节点类型，nodeName属性返回不同节点类型的不同名称。

什么是event对象？

event对象代表事件的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

其实 event对象就是事件的结合。

什么是target？

target事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

语法：event.target返回事件的目标节点。

什么是createTextNode？

这个方法可以创建一个文本节点：

什么是event.srcElement？

设置或获取触发事件的对象，引用对象，这个对象有什么属性，就可以使用。

常用的有：

event.srcElement.TagName //事件对象的html标记

event.srcElement.innerText //事件对象的内文

event.srcElement.value //表单事件对象的值


本人小白一枚，还在学习的路上，如有大神路过，请不吝赐教