JavaScript 事件流、事件处理程序及事件对象总结

发布时间:2017-04-13 15:44 编辑:站点网
三、事件对象在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息,包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。DOM中的事件对象兼容DOM的浏览器会将一个event对象传入事件处理程序中,无论指定事件处理程序时用的是DOM0还是DOM2的方法,都会传入event对象。event对象只有在事件处理程序执行期间才会存在,一旦事件处理程序执行完毕,event对象就会被销毁。下面是代码示例:var btn = document.getElementById("myBtn"); btn.onclick = function(event) { console.log(event.type); // "click" } btn.addEventListener("click", function(event) { console.log(event.type); }, false);event对象包含与创建它的特定事件有关的属性和方法,触发的事件类型不一样,可用的属性方法也有所不同。但是所有的事件都会有下列的属性或方法:bubbles: 布尔值,表示事件是否冒泡cancelable: 布尔值,表示是否可以取消事件的默认行为currentTarget: 元素,事件处理程序当前正在处理事件的那个元素defaultPrevented: 布尔值,表示是否调用过preventDefault()方法detail: 整数,与事件相关的细节信息eventPhase: 整数,调用事件处理程序的阶段,1表示捕获阶段,2表示目标阶段,3表示冒泡阶段preventDefault(): 函数,取消事件的默认行为,cancelable为true时可以调用该方法stopImmediatePropagation(): 函数,取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用stopPropagation(): 函数,取消事件的进一步捕获或冒泡,bubbles为true时可以调用这个方法target: 元素,事件的目标trusted: 布尔值,为true时表示事件是浏览器生成的,否则表示事件是通过JS创建的type: 字符串,被触发的事件类型view: 与事件关联的抽象视图,等同于发生事件的window对象下面代码示例展示了上述部分属性的用法,也可以帮助我们进一步理解事件流。假设页面中有一个按钮”myBtn”。当点击按钮时,this和currentTarget都等于body元素,因为事件处理程序是注册在body元素上。target的值却等于按钮元素,因为它是click事件的真正目标。由于按钮上没有注册事件处理程序,结果”click”事件冒泡到了document.body那里才得到处理。document.body.onclick = function(event) { console.log(event.currentTarget === document.body); // true console.log(this === document.body); // true console.log(event.target === document.getElementById("myBtn")); // true };
更多相关内容:
    无相关信息