首页 > 代码库 > event事件

event事件

绑定事件处理函数:

1.在html元素的标签中设置事件处理函数:

<button onclick="fun(this)"></button>

(this只有传入函数才能指代btn,否则this指代window)

2.在js中动态绑定事件处理函数:

elem.on事件名=函数对象

btn.onclick=function(){...this-->btn...};

同一元素的同一事件处理函数,只能绑定一个函数对象

无法修改事件触发的顺序

3.在js中动态绑定事件处理函数

可同时绑定多个,可修改事件触发顺序

DOM标准:elem.addEventListener("事件名",函数对象,是否在捕获阶段触发)

IE8:elem.attachEvent("on事件名",函数对象);

btn.addEventListener("click",fun,true/false);

btn.attachEvent("onclick",fun);

 

事件周期:从事件触发到各级事件执行完的全过程

DOM标准:3个阶段:捕获(由外向内)

         目标触发

         冒泡触发(由外向内)

 IE8 2个阶段: 目标出发

        冒泡触发

修改事件执行顺序:修改addEventListener的第三个参数为true,可在捕获阶段提前触发,同一事件不可触发2次!

利用冒泡:

优化:多个子元素,定义了相同的事件处理函数,其实只需要将事件处理函数在父元素上定义一次即可。

获得目标元素:var target=e.srcElement||e.target

event事件