<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="format-detection" content="telphone=no, email=no"/>
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title></title>
<style type="text/css">
.button {
height: 2em;
border: 0;
border-radius: .2em;
background-color: #34538b;
color: #fff;
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<input type="button" id="button" class="button" value="点击我，显示高度"/>
<a href="javascript:void (0);" id="link-a">标度</a>
</body>
<script type="text/javascript">
//p361--高级程序3
var myBtn=document.getElementById("button");
myBtn.onclick=function(event){
var event = EventUtil.getEvent(event);
console.log("点击成功");
};
var myLink=document.getElementById("link-a");
//用于取消事件的默认行为
myLink.onclick=function(event){
var event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
console.log(target); //输出：<a href="javascript:void (0);" id="link-a">标度</a>
};
//用于取消事件的默认行为
/* myLink.onclick=function(event){
var event=EventUtil.getEvent(event);
var target=EventUtil.preventDefault(event);
};*/
var EventUtil = {
/**
* <br>给元素对象注册事件处理程序<br>
* @param ele 要绑定的元素对象
* @param type 事件名称,例如click、load等
* @param handler 事件处理程序函数
*/
registerEvent : function(ele, type, handler){
// 支持IE9、Firefox、Safari、Chrome、Opera
if (ele.addEventListener) {
ele.addEventListener(type, handler, false);
}
// 支持IE浏览器
else if(ele.attachEvent) {
ele.attachEvent("on" + type, handler);
}
// 通过属性名的方式为元素指定事件处理程序
else {
ele["on" + type] = handler;
}
},
//删除事件处理程序
removeEvent : function() {
if (ele.removeEventListener) {
ele.removeEventListener(type, handler, false);
} else if(ele.detachEvent) {
ele.detachEvent("on" + type, handler);
} else {
ele["on" + type] = null;
}
},
// 获取(DOM/IE中的)事件对象
getEvent : function(event) {
return event ? event : window.event;
},
// 返回事件的目标
getTarget : function(event) {
return event.target || event.srcElement;
},
// 取消事件冒泡
stopPropagation : function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
// 获取当前事件发生的对象
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
}
</script>
</html>
