JavaScript事件处理程序(事件侦听器)

时间:2020-05-13 人气:0

我们知道，javascript与HTML之间的交互是通过事件来实现的，事件就是用户或浏览器自身执行的某种动作，比如click、mounseover、load……,而响应事件的函数就叫做事件处理函数（或事件侦听器）。

<html> 
<head> 
<title>event util test</title> 
<script type="text/javascript"> 
var eventUtil = { 
addListener: function(element, type, hander) { 
if (element.addEventListener) { 
element.addEventListener(type, hander, false); 
} else if (element.attachEvent) { 
element.attachEvent('on' + type, hander); 
} else { 
element['on' + type] = hander; 
} 
}, 
getEvent: function(event) { 
return event || window.event; 
//return event ? event : window.event; 
}, 
getTarget: function(event) { 
return event.target || event.srcElement; 
}, 
preventDefault: function(event) { 
if (event.preventDefault) { 
event.preventDefault(); 
} else { 
event.returnValue = false; 
} 
}, 
removeListener: function(element, type, hander) { 
if (element.removeEventListener) { 
element.removeEventListener(type, hander, false); 
} else if (element.deattachEvent) { 
element.detachEvent(type, hander); 
} else { 
element['on' + type] = null; 
} 
}, 
stopPropagation: function(event) { 
if (event.stopPropagation) { 
event.stopPropagation(); 
} else { 
event.cancelBubble = true; 
} 
} 
}; 
</script> 
</head> 
<body> 
<input type="button" value="click me" id="btn" /> 
<a href="http://www.baidu.com">baidu</a> 
<script type="text/javascript"> 
(function() { 
var btn = document.getElementById("btn"); 
var link = document.getElementsByTagName("a")[0]; 
eventUtil.addListener(link, "click", function(event) { 
alert("prevent default event"); 
var event = eventUtil.getEvent(event); 
eventUtil.preventDefault(event); 
}); 
eventUtil.addListener(btn, "click", function(event) { 
var event = eventUtil.getEvent(event); 
var target = eventUtil.getTarget(event); 
alert(event.type); 
alert(target); 
eventUtil.stopPropagation(event); 
}); 
eventUtil.addListener(document.body, "click", function() { 
alert("click body"); 
}); 
})(); 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容