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

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

1、在DOM元素中直接绑定；

2、在 javascript 代码中绑定；

3、绑定事件监听函数。

1、在DOM中直接绑定事件

我们可以在DOM元素上直接绑定事件

例如：

2、在 javascript 代码中绑定

在javascript代码中（即script标签内）绑定事件可以使用javascript代码与HTML标签分离，文档清晰，便于管理和开发。

例如：

3、使用时间监听绑定事件

绑定事件的另一种方法是用addEventListener()或attachEvent()来绑定时间监听函数。

事件监听

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

语法：

element.addEventListener(event,function,useCapture)

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

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

useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认是false。

注意：ie8一下不支持

例如：

IE标准：

语法：

element.attachEvent(event,function)

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

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

例如：

事件监听的优点

1、可以绑定多个事件。

例如：常规方式绑定

注意：常规事件绑定只执行最后绑定的事件。

用监听的方法来绑定

这样两个事件都执行了。

2、可以解除相应的绑定

例如：

封装事件监听

//绑定监听事件

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

};

};

事件委托

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

事件委托的优点

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

例如：

item1

item1

item1

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

item1

item2

item3

注释：

什么是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 //表单事件对象的值


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