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(事件,方法名)