JavaScript之事件及事件的绑定与解除

        在网页交互过程中，事件起到了很大的作用。事件--是交互体验的核心功能。

        事件的绑定

        事件的绑定有三种。

        1.on + 时间类型

          例：div.onclick =fucntion(){};

            兼容性很好，凡是一个元素在同一时间只能绑定一个处理函数。这个东西相当于作用在行间。

var div = document.getElementsByTagName('div');
div.onclick = function(){
console.log('a');
}

        2.obj.addEventListener(事件类型,处理函数,false)；

        例：div.addEventListener('click',function(){},false);

        这个是W3C标准的，当然IE9及一下不兼容，这个方法可以为一个事件绑定多个处理函数，但不能给同一个函数绑定多次。

var div = document.getElementsByTagName('div')[0];
div.addEventListener('click',function(){
console.log('a');
},false);
div.addEventListener('click',function(){
console.log('b');
},false);

        绑定事件中的处理函数也可以写在外面

var div = document.getElementsByTagName('div')[0];
function test(){
console.log('a');
}
div.addEventListener('click',test,false);

         还有一个是IE独有的obj.attachEvent('on' + 事件类型,处理函数)

        例：div.attachEvent（'onclick',function）

        这个是IE独有的，在运行上这个和addEventListener（）一样，但是这个方法却可以让同一个函数被绑定多次。    

var div = document.getElementsByTagName('div')[0];
div.attachEvent('onclick',function(){
console.log('a');
})

    这个函数引用也可以写成外部函数。

     事件处理程序的运行环境

        1.on + 时间类型的运行环境

        在这个运行环境中this指向Dom元素本身。

var div = document.getElementsByTagName('div')[0];
div.onclick = function(){
console.log(this);
}
//div

        2.obj.addEventListener()

        这个this也是指向Dom元素本身。

var div = document.getElementsByTagName('div')[0];
div.addEventListener('click',function(){
console.log(this);
},false)

        3.obj.attachEvent()

        这个IE独有的方法this指向window，当我们想让它指向Dom元素的时候，这时候就必须写外部引用函数了

var div = document.getElementsByTagName('div')[0];
div.attachEvent('onclick',function(){
hander.call(div);
},false)
function hander(){
console.log(this);
}

        我们知道call的作用是改变this指向，我们可以用call把this的指向改成div。

        封装兼容性方法

function addEvent(elem,type,hander){
      if(elem.addEventListener){
           elem.addEventListener(type,hander,false);
       }else if(elem.attachEvent){
        elem.attachEvent(type,function(){
         hander.call(elem);
          });
      }else{
        elem['on' + type] = hander;
       }
}

        解除事件的方法

        1.on + 事件类型的解除方法

        this.onclick = false/""/null;

var div = document.getElementsByTagName('div')[0];
div.onclick = function(){
console.log('a');
this.onclick = false; //只生效一次，然后解除
}

        2.obj.addEventListener()

        div.removeEventListener(事件类型,处理函数,false)---这个方法处理函数必须得是外部引用函数。

var div = document.getElementsByTagName('div')[0];
function hander(){
console.log('a');
}
div.addEventListener('click',hander,false);
div.removeEventListener('click',hander,false);

        3.IE独有的解除obj.attachEvent

        div.detachEvent('on'+事件类型,处理函数)---这个方法处理函数必须得是外部引用函数。

var div = document.getElementsByTagName('div')[0];
div.attachEvent('onclick',hander);
function hander(){
console.log('a');
}
div.detachEvent('onclick',hander);

JavaScript语言我个人感觉是最有意思的了，我也是一个初学者，遇到问题，喜欢在博客上分享，也希望能帮到大家。

一个初学者，有什么不足或者纰漏的话，希望在下面评论出来，相互学习，共同进步。

--主页传送门--