javascript——对事件绑定和普通事件的理解

什么是事件绑定,什么是普通事件？

事件绑定：事件是用户或者浏览器自身进行的特定的行为，这些事件都有自己特定的名字，如：点击，加载，鼠标经过等。用于响应事件并进行特定的处理的函数就是事件处理程序。而事件绑定就是为指定的某个事件绑定指定的事件处理程序。

普通事件:给html元素添加一个特定的属性(如：onclick)；

为什么要使用事件绑定?

普通事件有一个缺点,如果在普通事件里对某个节点进行两次委托事件（onclick）操作时会出现覆盖的问题,因此需要使用到事件绑定.

//普通事件
html:
        <a href='#' id='clickMe'>点击我</a>
javascript:
        var dom=document.getElementById('clickMe'); 
        dom.onclick=function(){
            alert(2);
        }
        dom.onclick=function(){
            alert(3);
        }

最后的输出结果为3

// 事件绑定
html:
        <a href='#' id='clickMe'>点击我</a>
javascript:
        var dom=document.getElementById('clickMe'); 
        dom.addEventListener('click', function(){
        	alert(2);
        },false);
        dom.addEventListener('click', function(){
        	alert(3);
        },false);

输出结果为先输出2，再输出3

事件绑定的方法

事件绑定类型

在dom元素中直接绑定(onclick,onmouseout,onmouseover等)

<a href='javascript:void(0)' onclick='alert(111)'>我是绑定事件</a>

在JavaScript代码中绑定

html结构: 
<input type='text' id='pointMe'/>
javascript结构：
document.getElementById('pointMe').onclick=function(){
    alert('我被点了')
}

绑定事件监听函数
考虑到兼容问题:
—IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。
—addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；
兼容老版本的写法:

var x = document.getElementById('myBtn');
if (x.addEventListener) {//所有主流浏览器，除了 IE 8 及更早 IE版本
    x.addEventListener('click', myFunction);
} else if (x.attachEvent) {// IE 8 及更早 IE 版本
    x.attachEvent('onclick', myFunction);
}

监听事件的补获和冒泡

dom.addEventListener(事件,方法,布尔值)

当布尔值为false的时候是冒泡事件,事件执行的次序是先执行子节点的事件在执行父节点的事件
当布尔值是true的时候是补获事件.事件执行的次序是先执行父节点的事件在执行子节点的事件

移除监听事件

dom.removeEventListener(事件,方法名)