JavaScript高级程序设计笔记 事件冒泡和事件捕获(2)

因为浏览器之间的差异（其实就是IE大家都懂的），所以需要编写跨浏览器的事件处理程序。

var EventUtil = { addHandler: function(element, type, handler) { if (element.addEventListener) { // DOM2 element.addEventListener(type, handler, false); } else if (element.attachEvent) { // IE element.attachEvent('on' + type, handler); } else { // DOM0 element['on' + type] = handler; } }, removeHandler: function(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent('on' + type, handler); } else { element['on' + type] = null; } } }; 6、事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件有关的信息。坑爹的是DOM中的事件对象和IE又有不同的玩法。

先来说说DOM中的：

var div = document.getElementById('myDiv'); div.onclick = function(e) { console.log(e.type); }; div.addEventListener('click', function(e) { console.log(e.type); }, false);

上面代码我们应该都不陌生，分别实现了DOM0级和DOM2级的事件对象。

e有很多的属性和方法，这里提几个常用的。target和currentTarget，target指的是事件的真正目标，而currentTarget指的是当前的目标，正是利用target我们可以做事件代理。

要阻止特定事件的默认行为，我们可以使用preventDefault()方法，例如链接的默认行为就是在被单击时会导航到其href指定的url，如果你想阻止这个默认行为，那么通过链接的onclick事件处理程序可以取消它：

var link = document.getElementById('myLink'); link.onclick = function(e) { e.preventDefault(); };

只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。

另外，stopPropagation()方法用于立即停止事件在DOM层中的传播，即取消进一步的事件捕获或冒泡。

var div = document.getElementById('myDiv'); div.onclick = function(e) { console.log('click!'); e.stopPropagation(); }; document.body.onclick = function(e) { console.log('hello world'); };

而IE中的事件对象是这么用的：

var div = document.getElementById('myDiv'); div.onclick = function() { var e = window.e; console.log(e.type); }; div.attachEvent('onclick', function(e) { // 也可以通过window.e访问 console.log(e.type); });

IE中的event对象也有很多属性和方法，比如srcElement就是和DOM中的target属性相同，而returnValue属性相当于DOM中的preventDefault()方法，它们的作用都是取消给定事件的默认行为。只要将该值设置为false，就可以阻止默认行为。相应地，canceBubble属性和DOM中的stopPropagation()方法作用相同，因为IE只支持冒泡，所以它只能取消事件冒泡。

跨浏览器的事件对象：

var EventUtil = { getEvent: function(e) { return e ? e : window.e; }, getTarget: function(e) { return e.target || e.srcElement; }, preventDefault: function(e) { if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } }, stopPropagation: function(e) { if (e.stopPropagation) { e.stopPropagation() } else { e.cancelBubble = true; } } } 7、事件委托