JS事件详解(二) —— 事件处理程序（事件的绑定）

事件绑定方法

方法一：直接在HTML标签中绑定

在html标签中添加“on”+事件名称的属性来绑定事件

事件处理程序可直接写在属性值当中

<div class="demo" onclick="console.log(this)"></div>  // this指向的是当前DOM对象

这种事件处理程序的作用域很特别，可以像局部变量一样直接访问document及元素本身的成员，示例：

<div class="demo" onclick="console.log(className)"></div>  // demo
// 等同于
<div class="demo" onclick="console.log(this.className)"></div>

当事件内容较为复杂的时候，可将事件内容写成函数，在on的事件属性中执行函数

<div onclick="demo()"></div>
<script>
    function demo(){
        console.log(this)  // this指向window对象,只能通过传参来获取当前DOM元素
    }
</script>

通过HTML绑定事件的缺点是HTML与JavaScript代码耦合严重

方法二：在js中在DOM元素上绑定

DOM元素添加‘on’+事件名称的属性，this指向的是当前的DOM对象

<div class="demo"></div>
<script>
    var demo=document.querySelector(".demo")
    demo.onclick=function(){
        console.log(this)  // this指向的是当前的DOM对象
    }
</script>

与方法一类似，事件内容较为复杂或有多个元素需要绑定同一事件，可将事件另写成个函数，元素只需调用该函数即可

<div class="demo1"></div>
<div class="demo2"></div>
<script>
    var demo1=document.querySelector(".demo1"),
        demo2=document.querySelector(".demo2")

    function demoFunc(){
        console.log(123)
    }

    demo1.onclick=demo2.onclick=demoFunc  // 123 123
</script>

这种方法的缺点是DOM对象只能绑定一个事件处理程序，后面绑定的程序会覆盖前面绑定的程序

<div class="demo"></div>
<script>
    var demo=document.querySelector(".demo")
    demo.onclick=function(){
        console.log(123)  // 不会执行
    }
    demo.onclick=function(){
        console.log('abc')  // abc
    }
</script>

打印结果：abc

解除事件绑定

demo.onclick=null

方法三：使用addEventListener和attachEvent函数绑定

addEventListener函数是W3C标准规定的，IE8及IE8以下不支持
addEventListener(event,function,boolean)
event：事件名称
function：事件处理程序的函数
boolean：false-冒泡阶段调用程序 true-捕获阶段调用程序

<div class="demo"></div>
<script>
    var demo=document.querySelector(".demo")
    demo.addEventListener('click',function(){
        console.log(this)  // this指向当前DOM对象
    },false)
</script>

这种方法可以给DOM对象绑定多个事件处理程序，按顺序执行

<div class="demo"></div>
<script>
    var demo=document.querySelector(".demo")
    demo.addEventListener('click',function(){
        console.log(123)
    },false)
    demo.addEventListener('click',function(){
        console.log(456)
    },false)
</script>

打印结果：123 456

绑定同一事件处理函数并且第三个参数一致，只会执行一次

<div class="demo"></div>
<script>
    var demo=document.querySelector(".demo")

    function demoFunc(){
        console.log(123)
    }

    demo.addEventListener('click',demoFunc,false)
    demo.addEventListener('click',demoFunc,false)  // 只能打印一次‘123’
</script>

打印结果：123

绑定同一事件处理函数但第三个参数不一致，会执行两次

<div class="demo"></div>
<script>
    var demo=document.querySelector(".demo")

    function demoFunc(){
        console.log(123)
    }

    demo.addEventListener('click',demoFunc,false)
    demo.addEventListener('click',demoFunc,true)  // 打印两次‘123’
</script>

打印结果：123 123

绑定相同的匿名函数，会执行两次，两个代码完全一样的匿名函数是不相同的

<div class="demo"></div>
<script>
    var demo=document.querySelector(".demo")
    demo.addEventListener('click',function(){
        console.log(123)
    },false)
    demo.addEventListener('click',function(){
        console.log(123)  // 打印两次‘123‘
    },false)
</script>

打印结果：123 123

解除事件绑定

demo.removeEventListener('click',demoFunc,false)  // 不能解除匿名函数，且第三个参数必须一致

attachEvent函数是IE特有的，IE8以下浏览器可以使用，可添加多个事件处理函数，只支持冒泡阶段
attachEvent(‘on’+event,function)
event：事件名称
fucntion：事件处理程序

<div class="demo"></div>
<script>
    var demo=document.querySelector(".demo")
    demo.attachEvent('onclick',function(){
        console.log(this)  // this指向window对象
    })
</script>

该方法同样可以给DOM对象绑定多个事件处理程序，但是与addEventListener不同的是，attachEvent不是顺序执行的，而是按相反顺序执行的

<div class="demo"></div>
<script>
    var demo=document.querySelector(".demo")
    demo.attachEvent('onclick',function(){
        console.log(123)  // 后执行
    })
    demo.attachEvent('onclick',function(){
        console.log(456)  // 先执行
    },false)
</script>

打印结果：456 123

与addEventListener一样，同一事件处理函数只能绑定一次，相同的匿名函数可以重复绑定

    <div class="demo"></div>
<script>
    var demo=document.querySelector(".demo")

    function demofunc(){
        console.log(123)
    }

    demo.attachEvent('onclick',demofunc)
    demo.attachEvent('onclick',demofunc)  // 调用两次，只会打印一次‘123’
</script>

打印结果：123

    var demo=document.querySelector(".demo")

    demo.attachEvent('onclick',function(){
        console.log(123)
    })
    demo.attachEvent('onclick',function(){
        console.log(123)  // 会打印两个‘123’
    })

打印结果：123 123

解除事件绑定

demo.detachEvent('onclick',demofunc)  // 不能解除匿名函数

把事件绑定封装成一个函数，兼容各个浏览器

// 事件绑定
function addEvent(element, type, handler) {
    if(element.addEventListener){  //如果支持addEventListener
        element.addEventListener(type, handler, false);
    }else if(element.attachEvent){  //如果支持attachEvent
        element.attachEvent("on"+type, function(){
            handler.call(element);  // 将this指向当前DOM对象
        });
    }else{  //否则使用兼容的onclick绑定
        element["on"+type] = handler;
    }
}
// 事件解绑
function removeEvent(element, type, handler) {
    if(element.addEventListener){
        element.removeEventListener(type, handler, false);
    }else if(element.attachEvent){
        element.detachEvent("on"+type, handler);
    }else{
        element["on"+type] = null;
    }
}

阻止默认事件
1.阻止通过on方法绑定事件的默认事件

demo.onclick=function(){
    console.log(123)
    return false
}

2.阻止通过addEventListener方法添加事件的默认事件

demo.addEventListener("click",function(e){
    var event=e||window.event
    console.log(123)
    event.preventDefault()
},false)

3.阻止通过attachEvent方法添加事件的默认事件

demo.attachEvent("onclick",function(e){
    var event=e||window.event
    console.log(123)
    event.returnValue=false
})