DOM编程-事件(三)

事件对象

事件对象是当事件被触发时,会调用事件处理函数,会传入一些信息,代表了当前事件的一个状态,这个就是事件对象。

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)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值