js简单的封装和防止冒泡事件-原创手记-慕课网

js简单的封装和防止冒泡事件

楼下 2016-09-30 14:16:42 浏览 3371

楼下

关注TA

手记 5

粉丝 119

获赞 40

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id="box" class="box">
	<p class="dianjia">店家</p>
	<input type="button" class="btn" id="btn" value="点击">
	<div class="s-box">11111111</div>
</div>
<script>
	function showMsg(event){
		alert("javascript");
		alert(event.type);
                event.stopPropagation();
		alert(event.target.nodeName);
	}
	function showbtn(event){
		alert("点击btn");
		alert(event.type);
		alert(event.target.nodeName);		
	}

	var eventUtill = {
		addHandler: function(element,type,handler){
			if (element.addEventListener) {
				element.addEventListener(type,handler,false)
			} else if (element.addachEvent){
				element.attachEvent('on'+ type,handler)
			}
			else{
				element['on'+type]=handler;
				//element.onclick === element['onmclick'] js中所有用 . 连接的地方都可以用[]
			}
		}
	}
	eventUtill.addHandler(box,'click',showMsg);
	eventUtill.addHandler(btn,'click',showbtn);
</script>	    
</body>
</html>

7人推荐

发表评论