绑定事件

绑定事件

句柄方式：

<div class="demo"><div>

var div = document.getElementsByClassName('demo')[0];
div.onclick = function(e){
  console.log('a')
}

后面的函数叫做事件处理函数，也称之为回调函数，当点击事件触发以后，就会执行后面的函数；

在这里事件是可以持续监听的，并不是执行完一次就失效；因此这个事件监听部分并不属于js引擎，因为js引擎是单线程的，事件监听属于内核的其他模块，一旦事件触发，事件监听就会把事件处理函数调入执行队列当中；等待js来执行；

句柄方式的优点就是兼容性比较好，但是缺点也很显著，一个元素的一个事件只能绑定一函数；

行间事件

句柄方式其实等同于行间事件,但是违背了行为样式结构相分离。

<div class="demo" onclick="console.log('a')"></div>>

ele.addEventListener(type, handle, false)方法

这个方法当中有三个参数：事件的类型、事件处理函数、是否事件捕获。

<div class="demo"></div>
var div = document.getElementsByClassName('demo')[0];
div.addEventListener('click'function(e){
  console.log('a');
},false)

处理函数可以直接在addEventListener方法里面写一个匿名函数，也可以在外面写一个命名函数，然后把函数的引用写在方法里面；

通常情况下，这种方法更多见，因为它可以为一个事件绑定多个函数；

function test1(){
  console.log('a');
}
function test2(){
  console.log('b');
}
div.addEventListener('click', test1, false);
div.addEventListener('click', test2, false);

触发事件后，打印出a，b。

这个方法在ie9以下不兼容，所以看下面：

ele.attachEvent("on" + type, handle)

这种方法是ie浏览器独有的，一个事件同样可以绑定多个事件处理函数

div.attachEvent('onclick',function(e){
  console.log(a)
})

但是注意它和上一个方法的区别：

	1： 事件捕获是addEventListener()方法独有的；

	2： 对于多次绑定同一个事件处理函数，前者只会执行一次，而后者绑定几次执行几次。

小练习：使用原生js为每一个li绑定一个点击事件，输出他们的顺序

var oli = document.getElementsByTagName('li');
var len = oli.length;
for(var i = 0; i < len; i ++){
  (function(n){
    	oli[n].addEventListener('click',function(){
          	console.log(n + 1)
    	},false)
  })(i)
}

---

事件处理的运行环境

1： 在句柄式的绑定中，函数里面的this指向元素；

2： 在addEventListener()方式绑定中，函数的this指向元素；

3： 在attachEvent()中，事件处理函数中的this指向window；

所以结合事件绑定的特性，我们来封装事件绑定函数：

function attachEvent(ele, type, handle){
  if(ele.addEventListener){
    ele.addEventListenter(type, handle, null)
  }if else(ele.attachEvent){
    ele.attachEvent('on' + type, function(){
      handle.call(ele);
    })
  }else{
    ele['on' + type] = handle;
  }
}

事件绑定基本完成了，但是这里存在一个问题，因为第二个ie的方法中我们用到了一个匿名函数，这样这个函数就无法解除绑定，因此可以优化成命名函数。

function attachEvent(ele, type, handle){
  if(ele.addEventListener){
    ele.addEventListener(type, handle, null)
  }else if(ele.attachEvent){
    ele['temp'] = function(){
      handle.call(ele);
    }
    ele.attachEvent('on' + type, ele['temp']);
  }else{
    ele['on' + type]
  }
}