事件对象
每个事件处理函数中,都可以有一个形参(IE中这个形参无效),系统会自动传递一个事件对象到函数中,这个对象的每个属性都代表事件被触发时的一些关键性数据
IE浏览器中用window.event
来记录触发事件时的关键数据
所以我们如果希望拿到一个事件触发后的事件对象,需要用一种兼容性的写法
div.onclick = function(e){
var event = e || window.event;
console.log(event);
}
事件源对象
事件源对象是事件对象里面的一部分,表示的是真正触发事件的那个对象
<div class="wrapper">
<div class="box"></div>
</div>
<script>
var wrapper = document.getElementsByClassName('wrapper')[0];
var box = document.getElementsByClassName('box')[0];
wrapper.onclick = function(e){
var event = e || window.event;
console.log(event);
}
</script>
当点击橘色方块时,会触发点击事件,真正触发事件的事件源对象为橘色方块
当点击粉色方块时,事件冒泡到父级橘色方块,也会触发点击事件,真正触发事件的事件源对象为粉色方块
在一个事件触发后的事件对象中有以下属性,表明事件源对象
event.target
火狐只有这个 没得下面那个event.srcElement
IE只有这个 没得上面那个
Chrome这俩都有
点击橘色方块后,输出事件对象的target和srcElement属性
点击粉色方块后,输出事件对象的target和srcElement属性
我们如果希望拿到一个事件触发后的事件源对象,需要用一种兼容性的写法
div.onclick = function(e){
var target= e.target || e.srcElement;
console.log(target);
}
事件委托
把事件绑定到事件源对象的祖先元素上,利用事件冒泡原理触发事件
例题:实现点击不同的li输出其中的内容
将li的点击事件委托给父级ul
<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 ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(e){
var event = e || window.event;
var target= event.target || event.srcElement;
console.log(target.innerText);
}
</script>
优点:
- 性能 不需要循环所有的元素一个个绑定事件
- 灵活 当有新的子元素时不需要重新绑定事件