事件对象
事件对象是当事件被触发时,会调用事件处理函数,会传入一些信息,代表了当前事件的一个状态,这个就是事件对象。
var elem = document.ElementById('div1')';
var clickHandler = function(event){
//事件处理函数
}
elem.addEventListener('click',clickHandler,false);
当clickHandler执行时,会传入一个event事件对象,这个事件对象里包含了鼠标的位置,xy坐标等等。
在IE的低版本中有些不同,因为这里的event对象不是直接通过函数传入的,而是放在window对象上的。这时候我们就要做一些兼容,我们在事件处理函数里通过“||”判断event是否被找到,如果没有找到就用window.event
var elem = document.ElementById('div1')';
var clickHandler = function(event){
event = event||window.event;
//事件处理函数
}
elem.addEventListener('click',clickHandler,false);
事件对象的属性和方法
每一种事件处理不同的场景,属性和方法也就不尽相同
通用的属性
- type,事件类型
- target(IE低版本下为srcElement),事件所在的节点
- currentTarget,是处理事件节点的函数
通用的方法
- stopPropagation,阻止冒泡
- preventDefault,阻止默认行为
- stopImmediatePropagation,阻止冒泡
阻止事件传播
- event.stopPropagation()(W3C),阻止冒泡就是阻止事件传播到父节点。
- event.cancelBubble=true(IE低版本)
- event.stopImmediatePropagation()(W3C),和第一个方法的区别在于除了基本的阻止冒泡,当该节点有其他事件,还会阻止该事件的后续事件
默认行为
比如,当我们点击一个链接,这个链接就会被打开,当我们双击一段文字,文字会被选中,这都是浏览器的默认行为。但有时我们不想让默认行为发生,所以我们要阻止。
- Event.preventDefault()(W3C)
- Event.returnValue = false(IE)