封装事件的添加和移除状态

类似与click事件 对于同一个dom我们只能添加一个事件 后面定义的会覆盖前面的事件 

<div id="clickEvent">点击事件</div>
<script>
clickEvent.onclick = function(){alert("1")}
clickEvent.onclick = function(){alert("2")}
</script>

上面这段代码运行会只会弹出来2 

这里就需要用到attachEvent和addEventListener来添加事件 对应的还有移除事件

代码如下

<input type="button" value="没有绑定任何事件" /><input type="button" value="添加事件" /><input type="button" value="移除事件" />
		<script>
		var Event = {
			addHander: function(oElement,sEvent,fnHander){
				oElement.addEventListener ? oElement.addEventListener(sEvent,fnHander,false) : oElement.attachEvent("on"+sEvent,fnHander);
			},
			removeHander:function(oElement,sEvent,fnHander){
				oElement.removeEventListener ? oElement.removeEventListener(sEvent,fnHander,false) : oElement.detachEvent("on"+sEvent,fnHander);
			}
		}
			var Btn = document.getElementsByTagName("input");
			Btn[1].onclick = function(){
				Event.addHander(Btn[0],"click",fnHander);
				Btn[0].value="事件已添加点击我有弹框";
			}
			Btn[2].onclick = function(){
				Event.removeHander(Btn[0],"click",fnHander);
				Btn[0].value="事件已移除 点击我没反应";
			}
			function fnHander(){
				alert("事件已激活");
			}
		</script>

　　这样就可以很方便的添加和移除事件 也不用担心会覆盖事件 对同一个dom的2个事件也不会覆盖而会叠加起来

测试如下

<input type="button" value="没有绑定任何事件" /><input type="button" value="添加事件" /><input type="button" value="移除事件" />
        <script>
        var Event = {
            addHander: function(oElement,sEvent,fnHander){
                oElement.addEventListener ? oElement.addEventListener(sEvent,fnHander,false) : oElement.attachEvent("on"+sEvent,fnHander);
            },
            removeHander:function(oElement,sEvent,fnHander){
                oElement.removeEventListener ? oElement.removeEventListener(sEvent,fnHander,false) : oElement.detachEvent("on"+sEvent,fnHander);
            }
        }
            var Btn = document.getElementsByTagName("input");
            Btn[1].onclick = function(){
                Event.addHander(Btn[0],"click",fnHander1);
                Event.addHander(Btn[0],"click",fnHander2);
                Btn[0].value="事件已添加点击我有弹框";
            }
            function fnHander1(){
                alert("事件已激活1");
            }
            function fnHander2(){
                alert("事件已激活2");
            }
        </script>

这里2个事件都会执行了

转载于:https://www.cnblogs.com/xingmi/archive/2012/06/15/2550605.html