事件绑定
在JS中，有三种常用的绑定事件的方法：
1、在DOM元素中直接绑定。
<!-- 括号不能省 -->
<button onclick="fn()">点击</button>
<script>
function fn() {
console.log('111');
}
</script>
2、在JS中绑定。
<button id='btn2'>方式二点击</button>
<script>
//特点 兼容性好 绑定多个事件时 以最后一个为准
document.getElementById('btn2').onclick = function () {
console.log('type 02');
}
</script>
3、绑定事件监听函数。
<button id='btn2'>方式二点击</button>
<script>
document.getElementById('btn3').addEventListener('click',function(){
console.log('type 03');
})
</script>
事件监听
w3c定义3个事件阶段，依次是捕获、目标、冒泡
语法 el.addEventListener(event,fn,useCapture)
event 必须 事件名 fn 必须 事件触发时执行的函数 useCapture 可选 执定事件是否在捕获或者冒泡阶段执行。
true 捕获 false 冒泡 默认false-
addEventListener() 方法特点
第三个参数可以控制指定事件是否在捕获或冒泡阶段执行
可以绑定多个事件 不会覆盖 先绑定先执行
使用removeEventListener()来移除绑定过的事件
IE6-8不兼容
一个完整的JS事件流是从window开始，最后回到window的.
事件流模型
事件委托
利用冒泡的原理，把事件加到父元素或者祖先元素上，触发执行效果。
var btn2 = document.getElementById('btn2')
window.addEventListener('click',function(e){
e = e||window.e;
var target = e.target || window.srcElement;
if(target == btn2){
console.log('按钮2的委托');
}
})
- 事件委托的特点
1、提高JS性能
2、动态的添加DOM元素
