JavaScript：事件代理（委托）的兼容性

由于网上的很多文章都介绍了 js 中的 事件代理，因此本文只探讨一些关于事件代理中容易被忽视的两个问题，那就是原生 js 实现和其在浏览器中的兼容性问题。

相信很多人都知道，借助 jQuery 中的 delegate() 和 on() 函数我们可以轻松实现事件代理，具体使用方式可以参考我的另外一篇文章：jQuery 事件绑定函数解析：bind, on, delegate。

但今天我们要探讨的是如何使用原生 js 来实现事件代理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件代理</title>
</head>
<body>
<ul id="ul">
    <li>这是第一个li元素</li>
    <li>这是第二个li元素</li>
    <li>这是第三个li元素</li>
    <li>这是第四个li元素</li>
    <li>这是第五个li元素</li>
</ul>
<script>
    var ul = document.getElementById('ul');
    ul.onclick = function (event) {
        var myEvent = event || window.event;
        var target = myEvent.target || myEvent.srcElement;
        if (target.nodeName.toLocaleLowerCase() == 'li'){
            alert(target.firstChild.nodeValue);
        }
    }
</script>
</body>
</html>

针对上面的代码做几点说明：

event对象用于存储事件的数据，例如触发事件的元素、鼠标的位置及状态、按下的键等等；event对象只在事件发生的过程中才有效。
firefox 跟其他浏览器中使用的 event 的方法不同，其他浏览器中的 event 是全局变量，随时可用；firefox需要在事件方法的参数里写 event 才能用，是运行时的临时变量。也就是说，在其他浏览器中，是 window.event，而在 firefox 中是 event；
要获取事件目标，其它浏览器调用的是 event.target 属性，而在 IE 中则需要调用的是 event.srcElement 属性。

所以在使用原生的 js 实现事件代理时既要考虑 firefox 下的兼容性又要考虑 IE 下的兼容性，这也是面试和实际应用当中会遇到的问题。而在使用 jQuery 时它会帮你做这些兼容性处理。进一步来看，这也可以看成是 jQuery 实现事件委托的基本原理。