网页设计学习笔记

HTML,CSS,JavaScript

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: :: 管理 ::

利用上一篇文章说明的方法,我们对事件添加了处理程序,然后可以来具体处理事件了。首先大部分浏览器会将 event 对象作为参数传递给事件处理程序,从而我们可从 event 对象中读取事件的具体内容。但是在 IE9 之前用 DOM0 级方法添加的事件处理程序,event 事件是作为 window 对象的属性传递过去的。因此,我们需要用下面的方法保证跨浏览器的兼容性:

var handler = function(event) {
    var ev = event ? event : window.event;
    alert(ev.type);
};

如果要得到触发该事件的元素,在标准浏览器中可以用 event.target,而在 IE9 之前的浏览器中可以用 event.srcElement。例如:

var handler = function(event) {
    var ev = event ? event : window.event;
    var target = ev.target || ev.srcElement;
    // do something
};

如果我们在子元素的事件处理程序中要阻止事件继续冒泡到父元素,可以用 stopPropagation() 方法。但是 IE9 之前不支持此方法,需要改用 cancelBubble 属性。例如:

var handler = function(event) {
    var ev = event ? event : window.event;
    ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
};

类似地,如果要阻止默认行为的发生,例如点击链接后阻止打开它,可以分别用 preventDefault() 方法和 returnValue 属性。例如:

var handler = function(event) {
    var ev = event ? event : window.event;
    ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
};

最后,各个主流浏览器都支持在事件处理程序中使用 return false 语句,它等同于既阻止事件冒泡又阻止默认行为,然后返回。

参考资料:
[1] event.stopPropagation - MDN
[2] event.preventDefault - MDN
[3] cancelBubble property - MSDN
[4] stopPropagation method - MSDN
[5] returnValue property - MSDN
[6] preventDefault method - MSDN
[7] Javascript - Event order
[8] event.target - MDN
[9] target property - MSDN
[A] srcElement property - MSDN
[B] The difference between ‘return false;’ and ‘e.preventDefault();’
[C] 黑客志 | jQuery事件处理: 别再乱用“return false”了

posted on 2012-06-10 20:44  zoho  阅读(329)  评论(0编辑  收藏  举报