                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /DOM事件探秘

事件冒泡會觸發父元素的兄弟元素嗎？

如題，求教

qq_風_54

2016-02-28

源自：DOM事件探秘 5-1

關注問題我要回答

1392

操作

收起

3 回答

茶葉321123 回答被采納 +3 積分
2016-03-01

試了下……不會觸發

0 回復有任何疑惑可以回復我~

收起回答

qq_風_54 提問者

非常感謝！

2016-03-01 回復有任何疑惑可以回復我~

茶葉321123
2016-03-01

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>事件流</title>
<script?src="event.js"></script>
</head>
<body>
<div?id="box">
<input?type="button"?value="按鈕"?id="btn">
<input?type="button"?value="按鈕2"?id="btn2">
<input?type="button"?value="按鈕3"?id="btn3">
<a?href="event.html"?id="go">跳轉</a>
</div>
<div?id="box2"></div>
<script>
window.onload=function(){
var?go?=?document.getElementById("go");
var?box?=?document.getElementById("box");
var?box2?=?document.getElementById("box2");

function?showboxMes(){
alert("this?is?box")
}
function?showboxMes2(){
alert("this?is?box2")
}
function?showMes(e){
e?=?eventUtil.getEvent(e);
alert(eventUtil.getElement(e).nodeName);
}

eventUtil.addHandler(box,'click',showboxMes);
eventUtil.addHandler(box2,'click',showboxMes2);
eventUtil.addHandler(go,'click',showMes);
}
</script>
</body>
</html>

var?eventUtil?=?{
	//add事件
	addHandler:function(element,type,handler)?{
		if?(element.addEventListener)?{
			element.addEventListener(type,handler,false);
		}else?if(element.attachEvent){
			element.attachEvent("on"+type,handler);
		}else{
			element["on"+type]=handler;
		}
	},
	//delete事件
	removeHandler:function(element,type,handler)?{
		if?(element.removeEventListener)?{
			element.removeEventListener(type,handler,false);
		}else?if(element.detachEvent){
			element.detachEvent("on"+type,handler);
		}else{
			element["on"+type]=null;
		}
	},
	//獲取事件
	getEvent:function(event)?{
		return?event?event:window.event;
	},
	//獲取事件屬性
	getType:function(event)?{
		return?event.type;
	},
	//獲取事件目標？觸發事件的元素
	getElement:function(event)?{
		return?event.target?||?event.srcElement;
	},
	//阻止事件默認行為
	preventDefault:function(event)?{
		if?(event.preventDefault)?{
			event.preventDefault();
		}else{
			event.returnValue?=?false;
		}
	},
	//阻止事件冒泡行為
	stopPropagation:function(event)?{
		if?(event.stopPropagation)?{
			event.stopPropagation();
		}else{
			event.cancelBubble?=?true;
		}
	},
}

0 回復有任何疑惑可以回復我~

收起回答

qq_風_54 提問者

我自己也測試了下，是不會觸發

2016-03-01 回復有任何疑惑可以回復我~