事件对象
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循环,节省了效率.这种方法叫事件委托
事件委托
利用事件冒泡,和事件源对象进行处理
优点:
- 性能 : 不需要循环所有的元素一个个绑定事件
- 灵活 : 当有新的子元素时不需要重新绑定事件