原生JS的事件监听写法DEMO

最新推荐文章于 2023-09-15 16:41:08 发布

weixin_34357887

最新推荐文章于 2023-09-15 16:41:08 发布

阅读量187

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/parker/blog/223784

版权

为什么80%的码农都做不了架构师？>>>

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

转载于:https://my.oschina.net/parker/blog/223784