1、事件监听的定义
在Javascript中,浏览器一般分为两大类:
① 基于IE内核的浏览器(版本号小于9的IE浏览器)
② 基于W3C内核的浏览器(版本号大于9的IE浏览器、Firefox、Google等浏览器)
1)基本语法:基于IE内核浏览器
dom对象.attachEvent(type,callback,capture) :为元素绑定事件监听程序
参数说明:
type:绑定的事件类型,如onclick、onmouseover、onmouseout
callback:事件的处理程序,通常是一个匿名函数
capture:使用的浏览器模型,冒泡模型与捕获模型,默认IE8以下的浏览器只支持冒泡模型!
2)基本语法:基于W3C内核的事件监听
dom对象.addEventListener(type,callback) :为W3C内核浏览器绑定事件监听
参数说明:
type:绑定事件类型,不带’on’前缀,如click,mouseover,mouseout
callback:事件的处理程序,通常是一个匿名函数
3、总结事件监听的区别
IE内核的监听方式与W3C内核的监听方式:
①方式不同
IE内核的浏览器使用attachEvent进行绑定
W3C内核的浏览器使用addEventListener进行绑定
②参数不同
IE内核浏览器,其绑定方式一共有三个参数type,callback,capture(使用的浏览器模型)
W3C内核浏览器,其绑定方式一共有二个参数,type和callback
③type参数不同
IE内核的浏览器,type是需要添加’on’前缀的,如onclick
W3C内核浏览器,type是不需要添加’on’前缀的,如click
④触发顺序不同
IE内核的浏览器,其事件监听是先绑定后触发,后绑定的先触发
W3C内核的浏览器,其事件监听是先绑定先触发,后绑定的后触发
监听方法在js中的实现如下:function addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])eventFlag : 事件名称,如click、mouseover…eventFunc: 绑定到事件中执行的动作useCapture: 指定是否绑定在捕获阶段,true为是,false为否,默认为true在事件监听流中可以使用event.stopPropagation()来阻止事件继续往下流IE中使用自有的attachEvent函数绑定时间,函数定义如下:function attachEvent(string eventFlag, function eventFunc)eventFlag: 事件名称,但要加上on,如onclick、onmouseover…eventFunc: 绑定到事件中执行的动作在事件监听流中可以使用window.event.cacenlBubble=false来阻止事件继续往下流总结:addEventListener(string eventFlag, function eventFunc, [bool useCapture=false]),针对ff,chrome,safari浏览器,false指冒泡阶段,默认为true,指捕获阶段。不过一般我们都用false。 attachEvent(string eventFlag, function eventFunc),针对ie系列、还有opera浏览器,少了事件处理机制的参数,只指定事件类型(别忘了on)和触发哪个函数。