事件监听和事件绑定

事件监听

addEventListener 和 attachEvent区别

addEventListener，removeEventListener是DOM2级事件定义的方法； addEventListener有三个参数：事件类型，执行函数，是否捕获；addEventListener可以实现同一个元素绑定多个click事件，当条件触发时，会依次执行相应的函数

例如

//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
//执行顺序为method1->method2->method3

attachEvent 和detachEvent是IE7，8可用的方法；attachEvent接受两个参数：类型（要加上on），和执行函数；这两个方法支持冒泡阶段执行；当同一个元素也可以绑定多个click事件时，执行顺序与addEventListener的执行顺序相反；

btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
//使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是
//method3->method2->method1

兼容性写法

 function myAddEvent(obj, ev, fn,useCapture)    //obj为要绑定事件的元素，ev为要绑定的事件，fn为绑定事件的函数,userCapture为是否在捕获阶段执行
            {
                var useCapture = useCapture || false;
                if(obj.attachEvent) {
                    obj.attachEvent("on" + ev, fn);
                }
                else {
                    obj.addEventListener(ev, fn, useCapture);
                }
            }

事件绑定

三种事件绑定方式

• DOM结构中调用

 <button id="btn" onclick ="demo()">click</button>
function demo(){
        alert(3)
 }

• addEventListener调用

<button id="btn">click</button>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){alert(2)},false);

• onclik调用

<button id="btn">click</button>
 var btn = document.getElementById('btn');
 btn.onclick = function(){alert(1)};

click()与onclick事件的区别
1、onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么。

2、click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件

3、click可以理解为一次简单的触发，只执行一次，找不到以后就不再执行；

4、onclick则是给这个id注册一种行为，可以重复触发

5、click 是方法；onclick是事件；执行click就是模拟鼠标点击，同时会触发onclick事件。

onclick绑定多个事件会覆盖

在DOM结构如果绑定两个 "onclick" 事件，则只会执行第一个；用 "addeventlistener" 可以绑定多次同一个事件，且都会执行，用btn.onclick = fun()的只会执行最后一个事件。

1. <div id="btn" onclick="clickone()" onclick="clicktwo()"></div> 

　　　　<script>

　　　　　function clickone(){ alert("hello"); } //执行这个

　　　　　function clicktwo(){ alert("world!"); }

　　　　</script>

　　2. <div id="btn"></div>

　　　　<script>

　　　　　document.getElementById("btn").addeventlistener("click",clickone,false);

　　　　　function clickone(){ alert("hello"); } //先执行

　　　　　document.getElementById("btn").addeventlistener("click",clicktwo,false);

　　　　　function clicktwo(){ alert("world"); } //后执行

　　　　</script>

　　3. <div id="btn"></div>

　　　　<script>

　　　　　document.getElementById("btn").onclick = function（）{ alert("hello"); }

　　　　　document.getElementById("btn").onclick = function（）{ alert("world"); } //执行这个

　　　　</script>

参考博文：
https://www.jianshu.com/p/4af0476a08c9
https://blog.csdn.net/longzhoufeng/article/details/80689150
https://blog.csdn.net/andrewniu/article/details/81102114
https://blog.csdn.net/ion_l/article/details/82662126