## 事件机制 DOM事件模型:事件捕获阶段、目标阶段、事件冒泡阶段。 *IE10及以下不支持捕获型事件* #### 相关方法 **addEventListener(event, listener, useCapture)** 参数定义:event---(事件名称,如click,不带on),listener---事件监听函数,useCapture---是否采用事件捕获进行事件捕捉,默认为false,即采用事件冒泡方式 > addEventListener在 IE11、Chrome 、Firefox、Safari等浏览器都得到支持。 **attachEvent(event,listener)** 参数定义:event---(事件名称,如onclick,带on),listener---事件监听函数。 *attachEvent主要用于IE浏览器,并且仅在IE10及以下才支持* **preventDefault()** 阻止事件默认行为 **stopPropagation()** 阻止事件冒泡 ## 事件捕获(event capturing) 当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件。 ## 事件冒泡(dubbed bubbling) 与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点。 ## 事件委托 利用事件捕获和事件委托的原理,不直接在需要触发的元素上绑定事件,而是在其父元素或者子元素上添加监听事件并判断触发元素,从而执行相关方法。 ```js parent.onclick = function(e){ if(e.target.id == "child"){ console.log("您点击了child元素") } } ``` ## 自定义事件 [实例](https://segmentfault.com/a/1190000008778993)