`
zccst
  • 浏览: 3291797 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

[Event]事件(高程版)(二)事件处理程序

阅读更多
作者:zccst


<input type="button" id="btn1" value="我是按钮" />


1,DOM0级 优点是兼容所以浏览器
	/* 1, DOM0级 优点是兼容所以浏览器*/
	var btn1 = document.getElementById("btn1");
	btn1.onclick=function(e){
		alert("Button Clicked");
		e.stopPropagation();//注释的话,会继续弹出"body Clicked"。IE8及以前不支持
	}
	btn1.onclick=null;//删除事件处理程序





2,DOM2级 标准浏览器


	/* IE7-8下不识别 */
	var btn1 = document.getElementById("btn1");
	btn1.addEventListener("click",function(e){
		alert(e.currentTarget);//[object HTMLInputElement]
		alert(e.target);       //[object HTMLInputElement]
		alert(e.srcElement);   //FF空,Chrome是[object HTMLInputElement]
		
		//this是当前元素
		alert(this === window);//false
	},false);



3,IE事件处理办法

/* 非IE下报错 */
	var btn1 = document.getElementById("btn1");
	btn1.attachEvent("onclick",function(e){
		alert(e.currentTarget);//undefined
		alert(e.target);       //undefined
		alert(e.srcElement);   //[object HTMLInputElement]

		//this是window
		alert(this === window);//true
	});



4,兼容各浏览器解决办法
	var EventUtil = {
		addEvent:function(element, type, handler){
			if(element.addEventListener){
				element.addEventListener(type, handler, false);
			}else if(element.attachEvent){
				element.attachEvent("on"+type, handler);
			}else{
				element["on"+type] = handler;
			}
		}
	};
	//调用方式
	var handler = function(){
		alert("clicked");
	}
	EventUtil.addEvent(btn1, "click", handler);



分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics