利用上一篇文章说明的方法,我们对事件添加了处理程序,然后可以来具体处理事件了。首先大部分浏览器会将 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”了