Home > Article > Web Front-end > JavaScript事件处理程序(事件侦听器)_javascript技巧

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

WBOYOriginal: 2016-05-16 18:03:49834browse

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

<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> 
 
 
<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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：关于hashchangebroker和statehashable的补充文档_jqueryNext article：基于jQuery的前端数据通用验证库_jquery

See more

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

Related articles