一般我们在JS中添加事件,是这样子的
view source print?
这种绑定事件的方式，兼容主流浏览器,但如果一个元素上添加多次同一事件呢?
如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法
|
1
|
//object.attachEvent(event,function);
|
|
2
|
btn1Obj.attachEvent("onclick",method1);
|
|
3
|
btn1Obj.attachEvent("onclick",method2);
|
|
4
|
btn1Obj.attachEvent("onclick",method3);
|
使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是
method3->method2->method1
可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法
|
1
|
//element.addEventListener(type,listener,useCapture);
|
|
2
|
btn1Obj.addEventListener("click",method1,false);
|
|
3
|
btn1Obj.addEventListener("click",method2,false);
|
|
4
|
btn1Obj.addEventListener("click",method3,false);
|
执行顺序为method1->method2->method3
做前端开发工程师,最悲剧的某过于浏览器兼容问题了,上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数,幸亏再有前人帮我们做了这件事
|
01
|
function addEvent(elm, evType, fn, useCapture) {
|
|
02
|
if (elm.addEventListener) {
|
|
03
|
elm.addEventListener(evType, fn, useCapture);//DOM2.0
|
|
06
|
else if (elm.attachEvent) {
|
|
07
|
var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+
|
|
11
|
elm['on' + evType] = fn;//DOM 0
|
下面是Dean Edwards 的版本
|
01
|
function addEvent(element, type, handler) {
|
|
03
|
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
|
|
05
|
if (!element.events) element.events = {};
|
|
06
|
//为每一个"元素/事件"对创建一个事件处理程序的哈希表
|
|
07
|
var handlers = element.events[type];
|
|
09
|
handlers = element.events[type] = {};
|
|
11
|
if (element["on" + type]) {
|
|
12
|
handlers[0] = element["on" + type];
|
|
16
|
handlers[handler.$$guid] = handler;
|
|
17
|
//指派一个全局的事件处理函数来做所有的工作
|
|
18
|
element["on" + type] = handleEvent;
|
|
22
|
function removeEvent(element, type, handler) {
|
|
24
|
if (element.events && element.events[type]) {
|
|
25
|
delete element.events[type][handler.$$guid];
|
|
28
|
function handleEvent(event) {
|
|
29
|
var returnValue = true;
|
|
31
|
event = event || fixEvent(window.event);
|
|
33
|
var handlers = this.events[event.type];
|
|
35
|
for (var i in handlers) {
|
|
36
|
this.$$handleEvent = handlers[i];
|
|
37
|
if (this.$$handleEvent(event) === false) {
|
|
44
|
function fixEvent(event) {
|
|
46
|
event.preventDefault = fixEvent.preventDefault;
|
|
47
|
event.stopPropagation = fixEvent.stopPropagation;
|
|
50
|
fixEvent.preventDefault = function() {
|
|
51
|
this.returnValue = false;
|
|
53
|
fixEvent.stopPropagation = function() {
|
|
54
|
this.cancelBubble = true;
|
功能非常强悍，解决IE的this指向问题，event总是作为第一个参数传入，跨浏览器就更不在话下。
最后贡献一个HTML5工作组的版本：
|
01
|
var addEvent=(function(){
|
|
02
|
if(document.addEventListener){
|
|
03
|
return function(el,type,fn){
|
|
05
|
for(var i=0;i<el.length;i++){
|
|
06
|
addEvent(el[i],type,fn);
|
|
09
|
el.addEventListener(type,fn,false);
|
|
13
|
return function(el,type,fn){
|
|
15
|
for(var i=0;i<el.length;i++){
|
|
16
|
addEvent(el[i],type,fn);
|
|
19
|
el.attachEvent(‘on‘+type,function(){
|
|
20
|
return fn.call(el,window.event);
|
可能细心的读者发现了IE的attachEvent和W3C标准的addEventListener绑定多个事件的执行顺序是不一样的,我们在下篇文章再解说
