事件处理程序2

<div style="width:100px;height:100px;border-radius:50%;background-color:brown"></div> <script type="text/javascript">

一、事件处理程序的运行环境

var div=document.getElementsByTagName('div')[0];

1.1ele.onxxx=function(event){}

程序tihs指向dom元素本身

 div.onclick=function(){
     console.log(this);
 }//div

// 1.2.obj.addEventListener(type,fn,false);

// 程序tihs指向dom元素本身

 div.addEventListener('click',function(){
     console.log(this)
 },false);//div

1.3.obj.attachEvent('on'+type,fn);

程序指向window

让程序指向div

div.attachEvent('onclick',function(){
    handle.call(div);
});
function handle(){
//     // this.指向div
//     // 事件处理程序
}

**封装兼容性的addEvent(elem,type,handle);方法
 function addEvent(elem,type,handle) {
     if(elem.addEventListener) {
         elem.addEventListener(type,handle,false);
     }else if(elem.attachEvent) {
         elem.attachEvent('on'+type,function(){
             handle.call(elem);
         })
     }else{
         elem['on'+type] = handle;//ele.on-xxx=function(event){}
     }
 }

二、 解除事件处理程序

var div=document.getElementsByTagName('div')[0];

2.1 ele.onclick=false/''/null;

 div.onclick = function(){
     console.log('a');
     this.onclick=null;//点击一次后失效
 }
 div.onclick = null;让事件失效

2.2 ele.removeEventListener(type,fn,false);

 div.addEventListener('click',test,false);
 function test(){//给函数命名
     console.log('a');
 }
 div.removeEventListener('click',test,false);//绑定的是一个对象的特定的事件类型的特定处理函数

2.3 ele.detachEvent('on'+type,fn);

如果绑定匿名函数,则无法解除