DOM事件机制

DOM事件级别

• DOM0级事件：on绑定的事件。缺点是一个事件的处理程序只能对应一个函数
• DOM2级事件：监听事件。原生两个方法用来移除和添加事件。addEventListener()和removeEventListener()

em.addEventListener('事件名称'，事件处理程序，'true：捕获阶段，false:冒泡阶段')

• DOM3级事件：添加了UI、焦点、鼠标、滚轮、文本、键盘、合成等事件

事件捕获、事件冒泡

• 事件执行顺序：事件捕获->目标事件绑定函数->事件冒泡
• 阻止事件冒泡：

1. event.stopPropagation()
2. return false//阻止了事件本身

事件代理

原理：把事件处理器添加到了父元素，等待子元素事件冒泡，并且父元素能够通过target判断是哪个目标元素。

    

        
red
        
orange
        
yellow
        
green
        
blue
        
indigo
        
purple
    
    

好处：提高性能。

event

window对象的event对象。常用方法

• event.preventDefault():阻止默认的事件。比如a标签的跳转。
• event.stopPropagation():阻止冒泡
• event.stopImmediatePropagation():阻止剩余的事件处理函数的执行，并防止当前事件在DOM树上冒泡
• event.target：target事件属性可返回事件的目标节点，如生成事件的元素、文档或窗口
• event.currentTarget:当前事件所绑定的元素。