事件第二篇

事件冒泡

子元素事件触发时，父元素的事件也会被触发，就是事件往上冒

在触发事件时，会一层一层向上冒泡（同时会触发父类的事件）

阻止事件冒泡

就是阻止事件向上调用

e = e || window  // 先得到事件源对象 
​
e.stopPropagation() // 阻止事件冒泡,ie9之前的浏览器不兼容
​
e.cancelBubble = true   // ie浏览器阻止事件冒泡，利用了ie浏览器的属性cancelBubble，这个属性兼容各大浏览器，但是不遵从W3C规范，所以不建议使用
​
e.stopPropagation?e.stopPropagation():e.cancelBubble=true   // 兼容写法

默认行为

例如a标签默认会跳转页面

阻止默认行为

return false    //  方法1，ie9之前浏览器不支持(常用)，通病：后续的代码不执行
​
e.preventDefault()  // 方法2，ie可以用
​
e.returnValue = false  // 针对低版本浏览器，这是个属性
​
e.preventDefault?e.preventDefault():e.returnValue=false   // 兼容写法

 事件监听

添加一个事件监听器给对应的元素绑定事件
element.addEventListener('事件名'，function(){

})  // 参数一是事件名（不带on），参数二是对应执行的方法，参数三默认false为冒泡，true为捕获
 

 移除事件监听
element.removeEventListener()  // 参数一事件名，参数二对应的执行方法，必须是具体的函数名，function是对象，引用数据类型，function声明一个函数

Element.事件名 = null  // 也可以移除事件

事件委托

将自己要加的事件添加给父元素，当子元素很多时

可以通过e.target得到触发事件的子元素