DOM事件机制
2019-03-21 本文已影响0人
RayLightUp
DOM事件级别
- DOM0级事件：on绑定的事件。缺点是一个事件的处理程序只能对应一个函数
- DOM2级事件：监听事件。原生两个方法用来移除和添加事件。addEventListener()和removeEventListener()
em.addEventListener('事件名称'，事件处理程序，'true：捕获阶段，false:冒泡阶段')
- DOM3级事件：添加了UI、焦点、鼠标、滚轮、文本、键盘、合成等事件
事件捕获、事件冒泡
- 事件执行顺序：事件捕获->目标事件绑定函数->事件冒泡
- 阻止事件冒泡：
1. event.stopPropagation()
2. return false//阻止了事件本身
事件代理
原理：把事件处理器添加到了父元素，等待子元素事件冒泡，并且父元素能够通过target判断是哪个目标元素。
<body>
<ul id="color-list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>indigo</li>
<li>purple</li>
</ul>
<script>
(function() {
var colorList = document.getElementById("color-list");
colorList.addEventListener('click', showColor, false);
function showColor(e) {
e = e || window.event;
var targetElement = e.target || e.srcElement;
if (targetElement.nodeName.toLowerCase() === "li") {
alert(targetElement.innerHTML);
}
}
})();
</script>
</body>
好处：提高性能。
event
window对象的event对象。常用方法
- event.preventDefault():阻止默认的事件。比如a标签的跳转。
- event.stopPropagation():阻止冒泡
- event.stopImmediatePropagation():阻止剩余的事件处理函数的执行，并防止当前事件在DOM树上冒泡
- event.target：target事件属性可返回事件的目标节点，如生成事件的元素、文档或窗口
- event.currentTarget:当前事件所绑定的元素。
