事件代理及Event对象介绍

事件代理介绍

事件代理简单来说就是用父元素去代替子元素进行事件绑定。
以 ul、li为例，当我们需要给 li 添加相同点击事件时可为每一个 li 绑定 oclick 属性。

<ul>
	<li onclick = "click()"></li>
	<li onclick = "click()"></li>
	<li onclick = "click()"></li>
</ul>

有一种说法是事件处理器将有可能导致内存泄露或者是性能下降（具体出处还未找到，从DOM的频繁操作及函数对象内存占用方面考虑个人认为是正确的）。抛开性能不说，当 li 较多时，怕是写的时候就觉得很麻烦吧。所以我们可以用父元素 ul 去代替 li 进行事件管理，如下。

<ul onclick="click(event)">
	<li></li>
	<li></li>
	<li></li>
</ul>

当我们去点击 li 时，利用冒泡原理触发父元素 ul 的点击事件。通过在 ul 点击事件中绑定 event 参数判断出具体是哪一个 li被点击（event.target）。

event对象介绍

常用属性

属性名称	属性介绍
target	获取具体触发源元素节点
srcElement	同target，用于兼容老版本IE浏览器
path	点击源元素至 Window路径中的节点集合
currentTarget	当前节点，事件代理中指代理节点
isTrusted	判断事件由脚本触发(False)还是用户操作(True)

mouseover与mouseout事件相关属性

属性名称	属性介绍
fromElement	mouseover事件从哪个元素进入。 主要用于IE低版本浏览器兼容。
toElement	mouseout事件从移出至哪个元素。 主要用于IE低版本浏览器兼容。
relatedElement	功能相当于fromElement与toElement。

随笔内容仅供参考，有错误请指出