• <noscript id="e0iig"><kbd id="e0iig"></kbd></noscript>
  • <td id="e0iig"></td>
  • <option id="e0iig"></option>
  • <noscript id="e0iig"><source id="e0iig"></source></noscript>
  • 002_javaScript中事件的冒泡(Bubble)

    標簽: 事件冒泡  JavaScript

    - 事件的冒泡指的是事件向上傳導,當后代元素上的事件被觸發時,將會導致其祖先元素上的同類事件也會觸發

    - 事件的冒泡大部分情況下都是有益的,如果需要取消冒泡,則需要使用事件對象來取消

    - 可以將事件對象的cancelBubble設置為true,即可取消冒泡

             -例子:

                                元素.事件 =function(event){

                                         event= event || window.event;

                                         event.cancelBubble= true;

                                };



    測試代碼

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		
    		<style type="text/css">
    			#box1 {
    				width: 200px;
    				height: 200px;
    				background-color: red;
    			}
    			
    			#s1 {
    				background-color: yellow;
    			}
    		</style>
    		
    		<script type="text/javascript">
    			window.onload = function() {
    				var box1 = document.getElementById("box1");
    				var s1 = document.getElementById("s1");
    				var body = document.body;
    				
    				/*
    				 *  - 如此寫法,點擊span,會依次觸發span、div、body、document。
    				 *  - 事件的冒泡:某元素觸發了x事件,其祖先的x事件會依次被觸發。
    				 *  - 事件的冒泡,看需求決定是否要取消。
    				 *  - 取消事件冒泡:事件對象.cancleBubble = true;
    				 */
    				s1.onclick = function(event) {
    					event = event || window.event;
    					alert("span");
    					event.cancelBubble = true;	//取消了span的事件冒泡,不會再傳遞給祖先
    					
    				}
    				
    				box1.onclick = function() {
    					alert("div");
    				}
    				
    				body.onclick = function() {
    					alert("body");
    				}
    				
    				document.onclick = function() {
    					alert("document");
    				}
    			}
    		</script>
    		
    	</head>
    	<body>
    		<div id="box1">
    			div
    			<span id="s1">span</span>
    		</div>
    	</body>
    </html>
    


    版權聲明:本文為qq_33605778原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接和本聲明。
    本文鏈接:https://blog.csdn.net/qq_33605778/article/details/76548287

    智能推薦

    優化后的冒泡排序(Bubble Sort)

    冒泡排序 時間復雜度(Time Complexity) 假設:數組內有n個元素 外循環:最多執行n-1次 內循環:最多掃描n-1次,交換n-1次;因此共為2(n-1)次 ==> 時間復雜度: T(n)=O[2(n−1)2]=O(n2) 空間復雜度(Space Complexity) 空間復雜度: S(n)=O(1) 算法描述 1 st round: In the first it...

    JavaScript的事件監聽、捕獲和冒泡

     在前端開發中,我們經常需要對某些事件進行監聽。這樣只要在指定的元素上觸發了該事件,就會執行一個回調函數來進行相關的操作。   而JavaScript中事件監聽的方法總共有三種,分別如下: element.addEventListener(type, listener[, useCapture]);  //IE6~8不支持 element.attachEvent('on' + type, list...

    JavaScript-06事件冒泡的學習

    先講解一下JavaScript中添加事件的三種方式: 事件的發生有三個階段: 1、事件的捕獲(由外到內) 2、執行事件回調函數 3、事件冒泡(由內到外) eg:給子元素添加事件 階段一: 先由外到內,爺元素捕獲到事件,一看哦不是我觸發的事件,然后由外向內傳給父元素,父元素一看,,,然后傳給子元素,子元素一看,誒是我的,事件捕獲成功。 階段二: 子元素捕獲到了自己的事件,開始執行事件的回調函數。 階...

    【循序漸進學Python】運用Python實現排序算法中的冒泡排序(Bubble Sort)

    【循序漸進學Python】運用Python實現排序算法中的冒泡排序(Bubble Sort) 今天我們來講講排序算法,通常我們所說的排序算法往往是指內部排序算法. 這個時候就有人問了,那么什么是內部排序算法呢? 內部排序算法就是數據記錄在內存中進行排序。 排序算法大致可以分為兩類: 一類是比較排序,時間復雜度O(nlogn) ~ O(n^2), 主要有:冒泡排序,選擇排序,插入排序,歸并排序,堆排...

    神奇的Batch Normalization 如果一個模型僅訓練BN層會是什么樣的

    您可能會感到驚訝,但這是有效的。 ? 最近,我閱讀了arXiv平臺上的Jonathan Frankle,David J. Schwab和Ari S. Morcos撰寫的論文“Training BatchNorm and Only BatchNorm: On the Expressive Power of Random Features in CNNs”。 這個主意立刻引起了...

    猜你喜歡

    用Python實現校園通知更新提醒

    前言 這個項目實已經在一個月前已經完成了,一直都想寫一篇博客來總結這個過程中遇到的一些問題。但最近一個月來都比較忙,所以一直拖到了現在。 首先說說起因吧,我沒事的時候,總喜歡依次點開學校主頁、教務處、圖書館以及學院的網站,看看有沒有什么新通知,雖然大多與我無關。恰逢最近正在學Python,經常聽到別人說用Python寫爬蟲很簡單,但自己尚未接觸過爬蟲。于是抱著試一試的心態看了幾篇關于Python爬...

    spring_ioc相關_第一章

    1 spring是一站式框架,在javaee的三層結構中,每一層都提供不提并的解決技術 web層:springMVC service層:spring的ioc dao層:spring的jdbcTemplate 2 javaee為避免兩個類之間出現耦合,則把對象的創建交給spring進行管理,spring的ioc操作:(1)ioc的配置文件方式;(2)ioc注解方式 3 ioc的底層原理使用技術(1)...

    【Python+OpenCV】視頻流局部區域像素值處理-一種特征提取方法

    參考我之前寫的處理圖片的文章:Python+OpenCV實現【圖片】局部區域像素值處理(改進版) 開發環境:Python3.6.0 + OpenCV3.2.0 任務目標:攝像頭采集圖像(例如:480*640),并對視頻流每一幀(灰度圖)特定矩形區域(480*30)像素值進行行求和,得到一個480*1的數組,用這480個數據繪制條形圖,即在逐幀采集視頻流并處理后“實時”顯示采...

    JavaWeb——【前端】——注冊頁面

    頁面效果 實現代碼 注意事項 主要使用的bootstrap樣式 如果想引用,不要直接復制,沒用的。 先介紹下所引用的文件: boostrap的js、bootstrap的css、jquery的js、以及自己編寫的register.css。 因為博主用的thymeleaf語法,所以有th符號。 若要使用時,根據個人情況導入相應的依賴。...

    網站HTTP升級HTTPS完全配置手冊

    本文由葡萄城技術團隊于博客園原創并首發 轉載請注明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 今天,所有使用Google Chrome穩定版的用戶迎來了v68正式版首個版本的發布,詳細版本號為v68.0.3440.75,上一個正式版v67.0.3396.99發布于6月13日,自Chrome 68起,當在加載非HTTPS站點時,都會在地址欄上明確標記為&ldqu...

    精品国产乱码久久久久久蜜桃不卡