《
说明IE与非IE浏览器在事件绑定的执行顺序》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234ZH013.htm
// addEvent/removeEvent written by Dean Edwards, 2005 // with input from Tino Zijdel // function addEvent(element, type, handler) { if (!handler.$$guid) handler.$$guid = addEvent.guid++; if (!element.events) element.events = {}; var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {}; if (element["on" + type]) handlers[0] = element["on" + type]; } handlers[handler.$$guid] = handler; element["on" + type] = handleEvent; }; addEvent.guid = 1; function removeEvent(element, type, handler) { if (element.events && element.events[type]) delete element.events[type][handler.$$guid]; }; function handleEvent(event) { var returnValue = true; event = event || fixEvent(window.event); var handlers = this.events[event,
详谈CSS网页布局中容易发生的错误编码.type]; for (var i in handlers) { this.$$handleEvent = handlers[i]; if (this.$$handleEvent(event) === false) returnValue = false; } return returnValue; }; function fixEvent(event) event.preventDefault = fixEvent.preventDefault; event.stopPropagation = fixEvent.stopPropagation; return event;; fixEvent.preventDefault = function() this.returnValue = false;; fixEvent.stopPropagation = function() this.cancelBubble = true;;
function addEvent(element, type, handler) { if (!handler.$guid) handler.$guid = addEvent.guid++; if (!element.events) element.events = {};//一个宏大的哈希， var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {};//哈希的每一个键都是哈希 if (element["on" + type]) handlers[0] = element["on" + type]; } handlers[handler.$guid] = handler; element["on" + type] = function(event) { var returnValue = true; event = event || window.event; var handlers = this.events[event.type]; for (var i in handlers) { this.$handleEvent = handlers[i]; if (this.$handleEvent(event) === false) returnValue = false; } return returnValue; }; }; addEvent.guid = 1; Tag：IE 事件绑定 IE 事件绑定
后来，又发明Dean Edwards也修改了IE事件次序错乱问题
function addEvent( obj, type, fn ) { if ( obj.attachEvent ) { obj["e"+type+fn] = fn; obj[type+fn] = function()obj["e"+type+fn]( window.event ); obj.attachEvent("on"+type, obj[type+fn] ); } else obj.addEventListener( type, fn, false ); } function removeEvent( obj, type, fn ) { if ( obj.detachEvent ) obj.detachEvent("on"+type, obj[type+fn] ); obj[type+fn] = null; else obj.removeEventListener( type, fn, false ); }
该文将要解释一下IE与非IE浏览器在事件绑定的执行顺序。原始的DOM1事件处置机制，是不能绑定多个处理函数。如一个元素在onclick事件先绑定一个函数，用来alert其id，而后再在雷同的事件绑定另一个函数，用来alert其style。对不起，第二个函数会笼罩掉第一个，只会alert其style。于是.addEventListener() 与 .attachEvent()被分辨开发出来了。为了屏蔽各浏览器的差别，javascript界举行了一个慈悲邀请赛，激励大家提交各自addEvent/removeEvent 计划，最后由John Resig大神取得。
,详解大型网站设计和维护的关键技巧; addEvent(test,"click",function()
alert(1);
);
addEvent(test,"click",function()
alert(2);
);
addEvent(test,"click",function()
alert(3);
);
addEvent(test,"click",function()
alert(4);
);
}
</script>
<h1 id="test">javascript事件绑定（点我）</h1>
然而最近我在统一个元素绑定多个onclick事件时，发现些问题。
<!doctype html>
<title>javascript事件绑定 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript事件绑定 by 司徒正美" />
<meta name="description" content="javascript事件绑定 by 司徒正美" />
<script type="text/javascript">
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj["e"+type+fn] = fn;
obj[type+fn] = function()obj["e"+type+fn]( window.event );
obj.attachEvent("on"+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
window.onload = function(){
var test = document.getElementById("test");
IE8与其余尺度浏览器会弹出1,2,3,4，换言之，进步先出。IE6非先进先出，也不是落后先出，而是2,4,3,1。但假如咱们绑定更多函数，IE8的执行顺序就有问题了，IE6与IE7更不必说。谁有好的解决方式吗？
/** * addEvent & removeEvent -- cross-browser event handling * Copyright (C) 2006-2007 Dao Gottwald * * This library is free software; you can redistribute it and/or * modify it under the terms of the GNU Lesser General Public * License as published by the Free Software Foundation; either * version 2.1 of the License, or (at your option) any later version. * * This library is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this library; if not, write to the Free Software * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA * * Contact information: * Dao Gottwald <dao at design-noir.de> * * @version 1.2.1 */ function addEvent(o, type, fn) o.addEventListener(type, fn, false); function removeEvent(o, type, fn) o.removeEventListener(type, fn, false); /*@cc_on if (!window.addEventListener) { var addEvent = function (o, type, fn) { if (!o._events) o._events = {}; var queue = o._events[type]; if (!queue) { o._events[type] = [fn]; if (!o._events._callback) o._events._callback = function (e) Event._callListeners(e, o); o.attachEvent("on" + type, o._events._callback); } else if (Event._fnIndex(o, type, fn) == -1) queue.push(fn); else return; Event._mem.push([o, type, fn]); }; var removeEvent = function (o, type, fn) { var i = Event._fnIndex(o, type, fn); if (i < 0) return; var queue = o._events[type]; if (queue.calling) delete queue[i]; ,
详解元素层叠级别（stack level）及z-index; if (queue.removeListeners) queue.removeListeners.push(i); else queue.removeListeners = [i]; else if (queue.length == 1) Event._detach(o, type); else queue.splice(i, 1); }; var Event = { AT_TARGET: 2, BUBBLING_PHASE: 3, stopPropagation: function () this.cancelBubble = true, ,
详解IE CSS Bug及解决方案; preventDefault: function () this.returnValue = false, _mem: [], _callListeners: function (e, o) { e.stopPropagation = this.stopPropagation; e.preventDefault = this.preventDefault; e.currentTarget = o; e.target = e.srcElement; e.eventPhase = e.currentTarget == e.target ? this.AT_TARGET : this.BUBBLING_PHASE; switch (e.type) case "mouseover": e.relatedTarget = e.fromElement; ,
详解div+css相对定位和绝对定位用法; break; case "mouseout": e.relatedTarget = e.toElement; var queue = o._events[e.type]; queue.calling = true; for (var i = 0, l = queue.length; i < l; i++) if (queue[i]) if ("handleEvent" in queue[i]) queue[i].handleEvent(e); else queue[i].call(o,e); queue.calling = null; if (!queue.removeListeners) return; if (queue.length == queue.removeListeners.length) this._detach(o, e.type); return; queue.removeListeners = queue.removeListeners.sort(function(a,b)return a-b); var i = queue.removeListeners.length; while (i--) queue.splice(queue.removeListeners[i], 1); if (queue.length == 0) this._detach(o, e.type); else queue.removeListeners = null; }, _detach: function (o, type) o.detachEvent("on" + type, o._events._callback); delete o._events[type]; , _fnIndex: function (o, type, fn) var queue = o._events[type]; if (queue) for (var i = 0, l = queue.length; i < l; i++) if (queue[i] == fn) return i; return -1; , _cleanup: function () m[2] == Event._cleanup) removeEvent(m[0], m[1], m[2]); }; addEvent(window, "unload", Event._cleanup); } @*/
--> [
网站建设之]阐明IE与非IE阅读器在事件绑定的履行顺序
(责任编辑：网站建设)
说明IE与非IE浏览器在事件绑定的执行顺序相关文章