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元素进行处理，不仅仅能使代码简介，同时我们还能减少内存的占用，这就是事件代理的作用，快试试吧。

js之事件

原文：http://www.cnblogs.com/zhangjuke/p/7277380.html