javascript事件冒泡簡單例項

admin發表於2017-03-08
JavaScript事件單例

關於javascript事件冒泡這裡就不多講了，通俗的說就是事件能偶像水泡一樣向上傳播，具體可以參閱javascript事件冒泡簡單介紹一章節。下面給出一個事件冒泡的簡單例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<title>簡單事件冒泡例項</title>
<style type="text/css">
#father{
  width:500px;
  height:500px;
  background-color:green;
}
#children{
  width:100px;
  height:100px;
  background-color:red;
}
</style>
<script type="text/javascript">  
window.onload=function(){
  var father=document.getElementById("father");
  var children=document.getElementById("children");
  father.onclick=function(){
    alert("父元素onclick事件觸發了");
  }
  children.onclick=function(){
    alert("子元素的onclick事件觸發了");
  }
}
</script>
</head>
<body>
<div id="father">
<div id="children"></div>
</div>
</body>
</html>

當點選小div的時候，它的父級div的onclick事件也會被觸發，也就是說onclick事件傳播到了元素。

相關文章