js事件冒泡

時間 2019-11-08

原文原文鏈接

javaSciprt事件中有兩個很重要的特性：事件冒泡以及目標元素。javascript

事件冒泡: 當一個元素上的事件被觸發的時候，好比說鼠標點擊了一個按鈕，一樣的事件將會在那個元素的全部祖先元素中被觸發。這一過程被稱爲事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。html

目標元素: 任何一個事件的目標元素都是最開始的那個元素，在咱們的這個例子中也就是label。使用事件代理的話咱們能夠把事件處理器添加到一個元素上，等待一個事件從它的子級元素裏冒泡上來，而且能夠很方便地得知這個事件是從哪一個元素開始的。java

事件的冒泡和捕獲
捕獲是從上級元素到下級元素，冒泡是從下級元素到上級元素。瀏覽器

如下程序模擬一下事件冒泡：函數

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>index</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript">
        function fun1(){
            console.log("fun1 call!!");
        }
        function fun2(event){
            console.log("fun2 call!!");
        
        }
        
       
    </script>
  </head>
  
  <body>
  
      <label onclick="fun2(event)">
          radio : <input type="radio" onclick="fun1()"/>
      </label>
      
  </body>
</html>

訪問該頁面點擊label查看控制檯輸出：ui

能夠看到點擊label後事件觸發的順序：代理

1.觸發label的onclick事件；htm

2.觸發input的onclick事件；對象

3.input的點擊事件引發事件冒泡觸發外層的label點擊事件。blog

解決辦法：

若是點擊了某個元素不想讓事件繼續傳播能夠使用如下方式

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>index</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript">
		function fun1(){
			console.log("fun1 call!!");
		}
		function fun2(event){
			console.log("fun2 call!!");
			stopDefault(event);
		}
		
		function stopDefault(e) {  
			//若是提供了事件對象，則這是一個非IE瀏覽器   
			if(e && e.preventDefault) {  
			　　//阻止默認瀏覽器動做(W3C)  
			　　e.preventDefault();  
			} else {  
			　　//IE中阻止函數器默認動做的方式   
			　　window.event.returnValue = false;   
			}  
			return false;  
		}
	</script>
  </head>
  
  <body>
  
  	<label onclick="fun2(event)">
  		radio : <input type="radio" onclick="fun1()"/>
  	</label>
  	
  </body>
</html>

這樣只會調用label的點擊事件，而且只調用一次。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。