JS事件

　　由于写随笔时，已经学习并大量使用过JS事件以及事件监听函数，因此不会事无巨细地举例子

 

定义

事件

　　事件，即可被JavaScript侦测到的行为

　　也就是用户和页面交互时，解释器会创建的响应event对象，描述事件的信息

句柄

　　事件发生时执行的代码，用一个函数包裹起来

 

类型

DOM0级事件

　　即在DOM元素后加上事件类型以及事件处理函数

　　DOM0级事件中，一个元素只可以添加一个事件和一个句柄，如果绑定多个则以最后一个绑定的事件和句柄为准

DOM2级事件

　　在DOM元素后加上addEventListener方法，第一个参数为事件类型，第二个参数为事件句柄，第三个参数为事件冒泡/捕获（布尔值，默认为false（冒泡））

　　可以给一个元素添加多次addEventListener，从而绑定多个事件类型和事件句柄

　　也可以给元素使用removeEventListener方法，移除DOM事件，三个参数同addEventListener一致，但需要注意绑定事件时，事件句柄不可为匿名函数（否则无法识别要解绑哪个句柄）

IE的事件处理

　　IE中事件的绑定用attachEvent，第一个参数为事件类型（加上on，例如click变成onclick），第二个为事件句柄

　　移除事件用detachEvent，两个参数同attachEvent，但是事件句柄必须不能为匿名函数

 

结合以上，可以通过判断是否有addEventListener/removeEventListener方法，来封装一个跨浏览器的事件处理函数

 

事件冒泡&捕获

事件冒泡

　　HTML里，元素之间会存在亲子关系，当子一级元素绑定事件时，如果父级元素也绑定了同类型的事件，则子元素触发事件时，父元素事件也会被触发

　　也就是说，事件触发后，会沿着DOM树往上找，如果直系父元素也有同类型事件则触发，即为事件冒泡

事件捕获

　　同事件冒泡相反，当父元素绑定事件时，如果子一级元素也绑定了同类型的事件，则父元素触发事件时，子一级元素事件也会被触发

事件委托

　　事件委托利用了事件冒泡的原理，在父元素上绑定需要触发的事件类型以及事件句柄，当子元素触发同类型事件时，父元素就会被触发并执行事件句柄

　　这样一来减少了事件绑定的次数，也缩减了代码量

 

Event对象

　　在给DOM元素添加事件时，会生成一个event对象，其带有众多属性和方法

属性

　　type：返回当前绑定事件的类型（click等），可以在同一DOM对象上绑定同一事件句柄，在事件句柄中判断事件类型并作出不同处理

　　target/currentTarget：返回触发事件的对象/绑定事件的对象，例如父元素绑定事件时，点击子元素，target返回子元素，currentTarget返回父元素

（未完待续）