js事件对象&事件委托

事件对象

var div = document.getElementsByTagName('div')[0];
div.onclick = function (e) { // chrome的事件对象用 e 就可以
    var event = e || window.event;  //但是IE上没有 e ；IE 的事件对象式window.event;
}

chrome	IE
e	window.event

---

事件源对象

firefox	IE	chrome
event.target	event.srcElement	event.target
		event.srcElement

兼容写法

var event = e || window.event;
var target = event.target || event.srcElement;

事件委托

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

<script>
    var li = document.getElementsByTagName('li');
    var len = li.length;
    for(var i = 0; i < len; i++) {
        li[i].onclick = function () {
            console.log(this.innerText);
        }
    }

</script>

这种方法可以输出顺序，但是如果数据过多，或者动态的向<ul>里面添加<li>就不能正常的输出了

var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function (e) {
    var event = e || window.event;
    var target = event.target || event.srcElement;
    console.log(target.innerText);  
}

这种方法减少了for循环，节省了效率.这种方法叫事件委托

---

事件委托

利用事件冒泡，和事件源对象进行处理

优点：

1. 性能 ： 不需要循环所有的元素一个个绑定事件
2. 灵活 ： 当有新的子元素时不需要重新绑定事件