一.原生JavaScript事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="EvenUtil.js" charset="UTF-8"></script>
<script src="demo1.js" charset="UTF-8"></script>
<!--<script src="eventDemo.js" charset="UTF-8"></script>-->
<title>example</title>
</head>
<body>
<button id="myBtn">Click</button>
<a href="http://www.baidu.com" title="跳转到百度" target="_blank" name="baiduLink">点我链接到百度首页</a>
<!-- 不添加http://的话，默认会在当前domain下查找该资源文件-->
<!--<a href="www.baidu.com" title="跳转到百度">点我链接到百度首页</a>-->
<input type="button" value="Echo Username" name="Echo Username">
</body>
</html>
//DOM 0级指定的事件处理程序，被认为是元素的方法（在元素的作用域中运行，即this引用当前元素）
document.getElementsByName("Echo Username")[0].onclick = function () {
alert(this.value);
}
document.getElementsByName("Echo Username")[0].onclick = null;//删除绑定事件
//Dom 2级事件处理程序，可以实现添加多个点击事件现，第三个参数若为true：捕获阶段调用事件处理程序，false：冒泡阶段调用事件处理程序
var Btn = document.getElementById("myBtn");
Btn.addEventListener("click",function(){
alert(this.id);
},false);
Btn.addEventListener("click",function(){
alert("My id is Btn!");
},false);
//删除绑定事件要使用removeEventListener，并传入要移除的事件处理函数引用，所以这会导致匿名函数无法移除！
//removeEventListener("click",handler,false);
二.兼容性问题
//兼容性问题：IE的实现方式为：attachEvent和detachEvent,attachEvent("onclick",handler)/detachEvent("onclick",handler)
//而且IE更丧心病狂的是，事件处理函数在全局作用域中运行，即this == window
var Btn = document.getElementById("myBtn");
Btn.attachEvent("onclick",function(){
$this = Btn;
alert($this.id);//myBtn
alert(this.id);//undefined
});
三.封装对象解决该兼容性问题
var EvenUtil = {
addHandler:function(element,evenType,handler){
if(element.addEventListener){
element.addEventListener(evenType,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+evenType,handler);
}else{
element["on"+evenType]=handler;
}
},
removeHandler:function(element,evenType,handler){
if(element.removeEventListener){
element.removeEventListener(evenType,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+evenType,handler);
}else{
element["on"+evenType]=null;
}
}
}
四.事件对象
常用的事件对象的属性/方法：
//事件对象的currentTarget、target属性
var Btn = document.getElementById("myBtn");
EvenUtil.addHandler(document.body,"click",function(event){
console.log(this == document.body);
console.log(event.currentTarget == this);//currentTarget指代程序当前正在处理事件的那个元素.必定等同于this
console.log("target is Btn ? "+(event.target == Btn));//target指代你点击的那个元素.当你点击Btn时，该属性就是Btn
});
//事件对象的type属性
var handler = function(event){
switch (event.type){
case "click" :
alert("click");
break;
case "mouseover" :
event.target.style.backgroundColor = "red";
break;
case "mouseout" :
event.target.style.backgroundColor = "";
break;
}
};
EvenUtil.addHandler(Btn,"click",handler);
EvenUtil.addHandler(Btn,"mouseover",handler);
EvenUtil.addHandler(Btn,"mouseout",handler);
};
//事件对象的stopPropagation方法：阻止冒泡
var bubbleDemo = (function(element){
document.body.onclick = function(){
alert("body click!");
}
element.onclick = function(){
alert(element.id+" click!");
}
return {
stopClickBubble:function(){
EvenUtil.addHandler(element,"click",function(event){
alert("Is can use stopProgatation ? "+event.bubbles)
if(event.bubbles){
event.stopPropagation();
}
});
}
};
})(document.getElementById("myBtn"));
//阻止myBtn的onclick事件冒泡
bubbleDemo.stopClickBubble();
//事件对象的preventDefault方法：阻止默认元素默认行为
var baiduLink = document.getElementsByName("baiduLink")[0];
var defaultDemo = (function(element){
element.onclick = function(){
alert("hello baidu?");
}
return{
stopDefaultAction:function(){
EvenUtil.addHandler(element,"click",function(event){
if(event.cancelable){
event.preventDefault();
}
});
}
}
})(baiduLink);
//阻止默认行为:不让其进行百度搜索首页的跳转
defaultDemo.stopDefaultAction();
时间： 2024-11-08 22:38:33