js之事件
一、js事件
在js中有许多的事件绑定。比如鼠标点击事件、双击事件、键盘事件等等。
其实我相信大多数人都用过很多的事件绑定的方法，js事件参考如下:
当我们需要一个通用的方法去封装我们需要的事件的时候，我们该怎么封装呢？通过名字去调用吗，我们有一个添加事件监听的方法，叫addEventListenner()。我们通过这个来进行事件的注册监听。那么我们是不是要想一想有没有浏览器的兼容性的问题呢，答案是当然有，在低版本的IE中我们使用attachEvent()来进行事件的监听。但是现在对于IE低版本的占有率已经很低了，所以对于IE低版本的兼容我们了解即可。
1 // 我们使用一个函数来封装一下这个addEventListener 2 var listen = function(el, event, fn) { 3 el.addEventListener(event, fn); 4 } 5 6 var btn = document.getElementById("btn"); 7 listen(btn, "click", function(e) { 8 e.preventDefault(); // 阻止a标签的默认事件 9 alert("我被点击了"); 10 });
其实在addEventListener这个方法还有第三个参数，是用来决定在冒泡阶段还是在捕获阶段执行的：
- true - 事件句柄在捕获阶段执行
- false- false- 默认。事件句柄在冒泡阶段执行
事件的冒泡
事件冒泡是什么呢？当我们点击一个元素的时候，这个元素并没有绑定事件，但是呢，在它的父节点上我们绑定了一个事件，这时候在父节点上的事件会被触发。
1 <div> 2 <p>xsxa</p> 3 </div>
1 var _div = document.getElementsByTagName("div")[0]; 2 _div.addEventListener('click', function() { 3 alert('div'); 4 })
当我们点击p标签的时候，没有触发事件，但是通过事件冒泡。div元素接收这个事件，然后进行了响应，如果我们在body上也注册了一个事件，那么这个事件也会被触发。
那我们怎么去阻止冒泡的呢?我们有一个方法叫stopPropatation()，这个方法能够阻止冒泡。
事件代理(委托)
那么我们了解了事件的冒泡机制之后，我们就来谈一谈这个东西的应用。在我们实际的工作当中，事件代理也是会用到的，那么我们需要用到事件代理的情景是怎样的呢？在一个父元素中，有很多的子元素，他们都有一个触发事件，比如点击，当我们要频繁的去添加、更改子元素的时候，我们就要去为每一个子元素添加事件，这时候频繁的操作就可能会出错，同时也带来了一定的复杂度，比如博客里面下拉加载照片，我们需要为每一个图片添加事件，这时候，我们可以选择的解决办法就是使用事件代理。
1 <div id="pics"> 2 <a href="../">图片1</a> 3 <a href="../">图片2</a> 4 <a href="../">图片3</a> 5 <a href="../">图片4</a> 6 <!-- 下拉加载图片 --> 7 </div>
1 var pic = document.getElementById("pics"); 2 3 // 使用上面封装的方法 4 5 listen(pic, "click", function(e) { 6 var target = e.target; // 获取被点击的标签 7 if (target.nodeName === "A") { 8 alert(target.innerHTML); 9 } 10 });
我们会发现，当我们这样写就能够对这个标签里的所有的a元素进行处理，不仅仅能使代码简介，同时我们还能减少内存的占用，这就是事件代理的作用，快试试吧。
