首頁 web前端 js教程 不支持冒泡的事件:限制及範圍

不支持冒泡的事件:限制及範圍

Jan 13, 2024 pm 12:51 PM
冒泡事件 限制 不支援冒泡

不支持冒泡的事件:限制及範圍

冒泡事件(Bubbling Event)是指在DOM樹中從子元素逐級觸發父元素的事件傳遞方式。大多數情況下,冒泡事件具有良好的靈活性和可擴展性,但是也存在一些特殊情況,這些情況下事件不支持冒泡。

一、哪些事件不支持冒泡?
雖然大部分的事件都支持冒泡,但存在一些事件是不支持冒泡的。以下是一些常見的不支持冒泡的事件:

  1. focus和blur事件
  2. #load和unload事件
  3. input、select和change事件
  4. submit和reset事件
  5. scroll事件
  6. mouseenter和mouseleave事件
  7. contextmenu事件

二、事件範例
為了更了解冒泡事件的局限性,以下針對每個不支援冒泡的事件給出具體的程式碼範例,以便更好地理解:

    ##focus和blur事件
  1. focus和blur事件是用來處理元素獲取或失去焦點的事件。這些事件不支援冒泡,表示當你在子元素上觸發focus或blur事件時,不會觸發父元素上的相應事件。
HTML程式碼:

<div>
  <input type="text" id="myInput">
</div>
登入後複製

JavaScript程式碼:

const myInput = document.getElementById('myInput');
myInput.addEventListener('focus', function() {
  console.log('Input获得焦点');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('focus', function() {
  console.log('Div获得焦点');
});
登入後複製

結果:

當文字方塊取得焦點時,只會在控制台輸出"Input取得焦點",而不會輸出"Div獲得焦點"。因為focus事件沒有冒泡到父元素div。

    load和unload事件
  1. load和unload事件是在頁面或資源載入完成後觸發的事件。這些事件不支援冒泡,也就是說當子元素上觸發load或unload事件時,不會觸發父元素上的相應事件。
HTML程式碼:

<div>
  <img  src="/static/imghw/default1.png"  data-src="image.png"  class="lazy" id="myImage" alt="不支持冒泡的事件:限制及範圍" >
</div>
登入後複製

JavaScript程式碼:

const myImage = document.getElementById('myImage');
myImage.addEventListener('load', function() {
  console.log('图片加载完成');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('load', function() {
  console.log('Div加载完成');
});
登入後複製

結果:

當圖片載入完成時,只會在控制台輸出"圖片載入完成",而不會輸出"Div載入完成"。因為load事件沒有冒泡到父元素div。

    input、select和change事件
  1. input、select和change事件是用來處理表單元素值改變的事件。這些事件只作用於實際發生值改變的元素,不會冒泡到父元素。
HTML程式碼:

<input type="text" id="myInput">
登入後複製

JavaScript程式碼:

const myInput = document.getElementById('myInput');
myInput.addEventListener('input', function() {
  console.log('输入框值改变');
});
const myForm = document.querySelector('form');
myForm.addEventListener('input', function() {
  console.log('表单值改变');
});
登入後複製

結果:

當輸入方塊的值改變時,只會在控制台輸出"輸入框值改變",而不會輸出"表單值改變"。因為input事件沒有冒泡到父元素form。

    submit和reset事件
  1. submit和reset事件是在提交和重置表單時觸發的事件。這些事件只能套用於form元素本身,不會冒泡到父元素。
HTML程式碼:

<form id="myForm">
  <input type="submit" value="提交">
</form>
登入後複製

JavaScript程式碼:

const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('表单已提交');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('submit', function() {
  console.log('Div提交');
});
登入後複製

結果:

當點擊提交按鈕時,只會在控制台輸出"表單已提交",而不會輸出"Div提交"。因為submit事件沒有冒泡到父元素div。注意到範例中我們透過event.preventDefault()方法阻止了表單的預設提交行為。

    scroll事件
  1. scroll事件是在發生捲動時觸發的事件。這個事件不支援冒泡,也就是說當滾動一個元素時,不會觸發父元素上的scroll事件。
HTML程式碼:

<div style="height: 100px; width: 100px; overflow: auto;">
  <p>这是一段很长的文本</p>
</div>
登入後複製

JavaScript程式碼:

const myDiv = document.querySelector('div');
myDiv.addEventListener('scroll', function() {
  console.log('滚动');
});
登入後複製

結果:

當捲動div時,只會在控制台輸出"捲動",而不會冒泡到上層元素。

    mouseenter和mouseleave事件
  1. mouseenter和mouseleave事件是在滑鼠進入和離開元素時觸發的事件。這些事件不支援冒泡,也就是說當滑鼠進入或離開一個元素時,不會觸發父元素上的相應事件。
HTML程式碼:

<div id="myDiv" style="background-color: yellow; width: 100px; height: 100px;">
  <p>鼠标进入这个div</p>
</div>
登入後複製

JavaScript程式碼:

const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mouseenter', function() {
  console.log('鼠标进入div');
});
const myBody = document.querySelector('body');
myBody.addEventListener('mouseenter', function() {
  console.log('鼠标进入body');
});
登入後複製

結果:

當滑鼠進入div時,只會在控制台輸出"滑鼠進入div ",而不會輸出"滑鼠進入body"。

    contextmenu事件
  1. contextmenu事件是在滑鼠右鍵點擊時觸發的事件。這個事件並不支援冒泡,也就是說當右鍵點擊一個元素時,不會觸發父元素上的contextmenu事件。
HTML程式碼:

<div id="myDiv" style="background-color: yellow; width: 100px; height: 100px;"></div>
登入後複製

JavaScript程式碼:

const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  console.log('右键点击');
});
const myBody = document.querySelector('body');
myBody.addEventListener('contextmenu', function() {
  console.log('右键点击body');
});
登入後複製

結果:

當右鍵點擊div時,只會在控制台輸出"右鍵點擊" ,而不會輸出"右鍵點選body"。注意到範例中我們透過event.preventDefault()方法阻止了預設的上下文選單顯示。

三、總結

冒泡事件是DOM樹中子元素向父元素逐級觸發的一種事件傳遞方式,大部分的事件都支持冒泡,但也存在一些不支持冒泡的特殊事件。本文透過具體的程式碼範例分析了不支持冒泡的事件,希望能對讀者理解冒泡事件的限制有所幫助。

以上是不支持冒泡的事件:限制及範圍的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

冒泡事件的常見阻止方法有哪些? 冒泡事件的常見阻止方法有哪些? Feb 19, 2024 pm 10:25 PM

常用的阻止冒泡事件指令有哪些?在Web開發中,我們經常會遇到需要處理事件冒泡的情況。當一個元素上觸發了某個事件,例如點擊事件,它的父級元素也會觸發相同的事件。這種事件傳遞的行為稱為事件冒泡。有時候,我們希望阻止事件冒泡,使事件只在當前元素上觸發,並阻止其向上級元素傳遞。為了實現這個目的,我們可以使用一些常見的阻止冒泡事件的指令。 event.stopPropa

分析靜態定位技術的優缺點 分析靜態定位技術的優缺點 Jan 18, 2024 am 11:16 AM

靜態定位技術的優勢與限制分析隨著現代科技的發展,定位技術已成為我們生活中不可或缺的一部分。而靜態定位技術作為其中的一種,具有其特有的優點與限制。本文將對靜態定位技術進行深入分析,以便更了解其應用現狀和未來的發展趨勢。首先,我們來看看靜態定位技術的優勢所在。靜態定位技術是透過對待定位物件進行觀測、測量和計算來實現位置資訊的確定。相較於其他定位技術,

什麼事件不能冒泡 什麼事件不能冒泡 Nov 20, 2023 pm 03:00 PM

不能冒泡的事件有:1、focus事件;2、blur事件;3、scroll事件;4、mouseenter和mouseleave事;5、mouseover和mouseout事件;6、mousemove事件;7、keypress事件;8、beforeunload事件;9、DOMContentLoaded事件;10、cut、copy和paste事件等。

不支持冒泡的事件:限制及範圍 不支持冒泡的事件:限制及範圍 Jan 13, 2024 pm 12:51 PM

冒泡事件(BubblingEvent)是指在DOM樹中從子元素逐級觸發父元素的事件傳遞方式。大多數情況下,冒泡事件具有良好的靈活性和可擴展性,但是也存在一些特殊情況,這些情況下事件不支持冒泡。一、哪些事件不支持冒泡?雖然大部分的事件都支持冒泡,但有些事件是不支持冒泡的。以下是一些常見的不支援冒泡的事件:focus和blur事件load和unloa

阻止冒泡事件的指令有哪些 阻止冒泡事件的指令有哪些 Nov 21, 2023 pm 04:14 PM

阻止冒泡事件的指令有stopPropagation()、cancelBubble屬性、event.stopPropagation()、event.cancelBubble屬性、event.stopImmediatePropagation()等。詳細介紹:1、stopPropagation()是最常用的指令之一,用於停止事件的傳播。當事件觸發時,呼叫該方法可以阻止事件繼續等等。

冒泡事件的涵義是什麼 冒泡事件的涵義是什麼 Feb 19, 2024 am 11:53 AM

冒泡事件是指在網路開發中,當一個元素上觸發了某個事件後,該事件將會向上層元素傳播,直到達到文檔根元素。這種傳播方式就像氣泡從底部逐漸冒上來一樣,因此被稱為冒泡事件。在實際開發中,了解並理解冒泡事件的工作原理對於正確處理事件十分重要。以下將透過具體的程式碼範例來詳細介紹冒泡事件的概念和使用方法。首先,我們建立一個簡單的HTML頁面,其中包含一個父級元素和三個子

掌握冒泡事件的重要性,增強個人社交能力 掌握冒泡事件的重要性,增強個人社交能力 Jan 13, 2024 pm 02:22 PM

了解冒泡事件的作用,提升個人社交能力,需要具體代碼範例導語:在當今社群媒體發達的時代,個人社交能力越來越重要。社交能力的提升不僅是為了交朋友,更是為了與人溝通、適應社會、實現個人發展。然而,許多人面對陌生人或大眾場合時,往往感到不知所措,不知道如何與人建立連結。本文將詳細介紹冒泡事件的作用,並提供了具體的程式碼範例,幫助讀者學習並掌握社交技巧,提升個人社

如何有效阻止冒泡事件?指令解析! 如何有效阻止冒泡事件?指令解析! Feb 23, 2024 am 11:33 AM

如何有效阻止冒泡事件?指令解析!冒泡事件指的是在程式執行中,某個物件觸發了事件,並且該事件會向物件的父級元素一直冒泡傳遞,直到被處理或到達文檔頂層。冒泡事件可能會導致不必要的程式碼執行或頁面操作,影響使用者體驗。因此,我們需要採取一些措施來有效地阻止冒泡事件的傳播。以下是一些指令解析,可用來阻止冒泡事件的傳播:使用event.stopPropagation

See all articles