首頁手記 js簡單的封裝和防止冒泡事件

js簡單的封裝和防止冒泡事件

標簽：

Html/CSS JavaScript

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

點擊查看更多內容