4.1 事件 DOM0级事件和2级事件

4.1事件

事件是可以被 JavaScript 检测到的用户行为

1.DOM的事件

　　类型：以onclick点击事件为例 点击鼠标左键触发

①DOM 0级事件：通过事件绑定的形式dom元素只能有(绑定)一个事件处理函数则这种形式叫做DOM0级事件,若有多个，则取最后一个

绑定：

　　dom.on+type = 事件处理函数

　　dom.onclick = function(){} 函数里面是要执行的功能

常用：

<div id="box"></div>
var oBox = document.getElementById('box');
oBox.onclick = function(){    //给oBox绑定了一个点击事件 等号右侧是事件处理函数
console.log('我被点击了');
}
oBox.onclick = function(){
console.log('heaven');     //打印这种，会覆盖前面的
}

View Code

不常用：

<div id="box" onclick="heaven()"></div>
function heaven(){
console.log('我被点击了')
}

View Code

解除解绑：

　　dom.onclick = null

oBox.onclick = function(){
        console.log('我被点击了');
}
    // 1000ms之后给oBox解除事件处理函数
setTimeout(function(){
        oBox.onclick = null;
},1000)

View Code

②DOM2级事件：通过事件监听的形式 dom元素可以有(绑定)多个事件处理函数，则这种形式叫做DOM的2级事件（2级事件常用）

绑定：

dom.addEventListener(事件字符串,回调函数,布尔值)

IE8以上： dom.addEventListener(type,fn,false) 　　this指向dom本身

IE8及以下：dom.attachEvent('on'+type,fn) 　　 this指向window

①回调函数匿名

    //IE8及以上 谷歌
oBox.addEventListener('click',function(){
    console.log(this);     //指向oBox
    console.log('我被点击了');
},false)
oBox.addEventListener('click',function(){
    console.log('heaven');
},false)  
    //两个都会打印

    //IE8以下 
oBox.attachEvent('onclick',function(){
    console.log('IE8以下')
},false)

View Code

②回调函数有名

oBox.addEventListener('click',auto,false)
function auto(){
    console.log('我被点击了')
}

View Code

解除绑定：

　　dom.removeEventListener(type,fn,false) 　　IE8以上

　　dom.detachEvent(‘on’+type,fn) 　　　　　　IE8及以下

①回调函数匿名　　　　任何函数的arguments.callee都指向自身

解绑事件处理函数，匿名函数通过arguments.callee指向自身可以解绑自己

//IE8及以上 谷歌
oBox.addEventListener('click',function(){
    var fn = arguments.callee;    //存放着这个回调函数
    console.log('heaven');
    setTimeout(function(){
    oBox.removeEventListener('click',fn,false)    
    //不能用arguments.callee
    //console.log(arguments.callee) //是指向定时器的回调函数 ，所以用fn存着
    },1000)
},false)

View Code

IE8 及以下

//IE8以下
oBox.attachEvent('onclick',function(){
    var fn = arguments.callee
    console.log('哈哈哈哈')
setTimeout(function(){
    oBox.detachEvent('onclick',fn)
},1000)
})

View Code

②回调函数有名

//IE8及以上 谷歌
oBox.addEventListener('click',auto,false)
setTimeout(function(){
    oBox.removeEventListener('click',auto,false)
},1000)
function auto(){
    console.log('我被点击了');
}
//IE8 以下
oBox.attachEvent('onclick',auto)
function auto(){
    console.log('哈哈哈哈');
}
setTimeout(function(){
    oBox.detachEvent('onclick',auto)
},1000)

View Code

封装addEvent(dom,type,fn)兼容函数

<div id="box"></div>
    /*
    * 这个函数的作用是给dom元素添加事件处理函数    
    * dom 是要监听的节点
    * type 要监听的事件类型
    * callBack 事件处理函数
    * boolean 布尔值
    */
var oBox = document.getElementById('box');
function addEvent(dom,type,callBack,boolean){
    if(dom.addEventListener){ 
    //如果是谷歌,dom.addEventListener()是一个函数，判断函数是否布尔值，true
    dom.addEventListener(type,callBack,boolean) // this指向dom
}else{
    dom.attachEvent('on'+type,function(){ //这个匿名函数this默认指向window，
    callBack.call(dom) // 函数加括号执行，通过call改变this指向

    },boolean)
} 
}
addEvent(oBox,'click',function(){
    console.log(123)
},false)

View Code

4.1 事件 DOM0级事件和2级事件

推荐阅读