Tiada sokongan untuk acara menggelegak: had dan skop

Acara Bubbling merujuk kepada kaedah penghantaran acara yang dicetuskan langkah demi langkah daripada elemen anak kepada elemen induk dalam pepohon DOM. Dalam kebanyakan kes, peristiwa menggelegak adalah sangat fleksibel dan berskala, tetapi terdapat beberapa kes khas di mana peristiwa tidak menyokong menggelegak.

1. Acara manakah yang tidak menyokong gelembung?
Walaupun kebanyakan acara menyokong menggelegak, terdapat beberapa acara yang tidak menyokong menggelegak. Berikut ialah beberapa peristiwa biasa yang tidak menyokong menggelegak:

1. fokus dan kaburkan acara
2. muat dan bongkar acara
3. masukkan, pilih dan tukar acara
4. serahkan dan tetapkan semula acara
5. tatal acara
masukkan
6. leavemouse acara
acara menu konteks

2 contoh acara

Untuk lebih memahami had peristiwa menggelegak, contoh kod khusus diberikan di bawah untuk setiap acara yang tidak menyokong menggelegak untuk pemahaman yang lebih baik:

fokus dan acara kabur
1. dan peristiwa kabur ialah peristiwa yang digunakan untuk mengendalikan elemen yang mendapat atau kehilangan fokus. Peristiwa ini tidak menyokong menggelegak, yang bermaksud bahawa apabila anda mencetuskan fokus atau acara kabur pada elemen kanak-kanak, peristiwa yang sepadan pada elemen induk tidak akan dicetuskan.
   

Kod HTML:

<div>
  <input type="text" id="myInput">
</div>

Kod 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获得焦点');
});

Hasil:

Apabila kotak teks mendapat fokus, hanya "Input mendapat fokus" akan dikeluarkan dalam konsol, tetapi "Div mendapat fokus" tidak akan dikeluarkan. Kerana acara fokus tidak menggelembung ke div elemen induk.

memuat dan memunggah acara
2. Acara muat dan bongkar ialah peristiwa yang dicetuskan selepas halaman atau sumber dimuatkan. Peristiwa ini tidak menyokong menggelegak, yang bermaksud bahawa apabila peristiwa memuatkan atau memunggah dicetuskan pada elemen anak, peristiwa yang sepadan pada elemen induk tidak akan dicetuskan.
   

Kod HTML:

<div>
  <img  src="/static/imghw/default1.png"  data-src="image.png"  class="lazy" id="myImage" alt="Tiada sokongan untuk acara menggelegak: had dan skop" >
</div>

Kod JavaScript:

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

Keputusan:

Apabila pemuatan imej selesai, hanya "Pemuatan imej selesai" akan dikeluarkan dalam konsol dan "Pemuatan Div selesai" tidak akan dikeluarkan. Kerana acara pemuatan tidak menggelembung ke div elemen induk.

Input, pilih dan tukar acara
3. Input, pilih dan tukar acara ialah acara yang digunakan untuk mengendalikan perubahan dalam nilai elemen bentuk. Peristiwa ini hanya mempengaruhi elemen yang nilainya sebenarnya berubah dan tidak akan menggelembung ke elemen induk.
   

Kod HTML:

<input type="text" id="myInput">

Kod JavaScript:

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

Keputusan:

Apabila nilai kotak input berubah, hanya "Perubahan nilai kotak input" akan dikeluarkan pada konsol, tetapi "Perubahan nilai bentuk" tidak akan keluaran. Kerana peristiwa input tidak menggelembung ke bentuk elemen induk.

serahkan dan tetapkan semula acara
4. serah dan tetapkan semula acara ialah peristiwa yang dicetuskan apabila borang diserahkan dan ditetapkan semula. Peristiwa ini hanya boleh digunakan pada elemen bentuk itu sendiri dan tidak akan menggelembung ke elemen induk.
   

Kod HTML:

<form id="myForm">
  <input type="submit" value="提交">
</form>

Kod 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提交');
});

Keputusan:

Apabila butang hantar diklik, hanya "Borang Dihantar" akan dikeluarkan dalam konsol, tetapi "Div Dihantar" tidak akan dikeluarkan. Kerana acara serah tidak mencecah div elemen induk. Ambil perhatian bahawa dalam contoh kita menghalang kelakuan penyerahan lalai borang melalui kaedah event.preventDefault().

acara tatal
5. acara tatal ialah peristiwa yang dicetuskan apabila tatal berlaku. Peristiwa ini tidak menyokong menggelegak, yang bermaksud bahawa apabila menatal elemen, acara tatal pada elemen induk tidak akan dicetuskan.
   

Kod HTML:

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

Kod JavaScript:

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

Keputusan:

Apabila div ditatal, "scroll" hanya akan dikeluarkan dalam konsol dan tidak akan menggelembung ke elemen atas.

peristiwa masuk tetikus dan keluar tetikus
6. peristiwa masuk tetikus dan daun tetikus ialah peristiwa yang dicetuskan apabila tetikus masuk dan meninggalkan elemen. Peristiwa ini tidak menyokong menggelegak, yang bermaksud bahawa apabila tetikus memasuki atau meninggalkan elemen, peristiwa yang sepadan pada elemen induk tidak akan dicetuskan.
   

Kod HTML:

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

Kod 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');
});

Keputusan:

Apabila tetikus memasuki div, hanya "tetikus memasuki div" akan dikeluarkan dalam konsol, tetapi "tetikus memasuki badan" tidak akan dikeluarkan.

contextmenu event
7. contextmenu event ialah peristiwa yang dicetuskan apabila butang kanan tetikus diklik. Peristiwa ini tidak menyokong menggelegak, yang bermaksud bahawa apabila anda mengklik kanan elemen, acara menu konteks pada elemen induk tidak akan dicetuskan.
   

Kod HTML:

<div id="myDiv" style="background-color: yellow; width: 100px; height: 100px;"></div>

Kod 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');
});

Keputusan:

Apabila anda klik kanan pada div, hanya "klik kanan" akan dikeluarkan dalam konsol, tetapi "klik kanan pada badan" akan bukan keluaran. Ambil perhatian bahawa dalam contoh kami menghalang menu konteks lalai daripada dipaparkan melalui kaedah event.preventDefault().

3 Ringkasan

Acara buih ialah kaedah penyampaian acara yang mencetuskan acara langkah demi langkah daripada elemen anak kepada elemen induk dalam pepohon DOM, tetapi terdapat juga beberapa acara istimewa yang tidak menyokong menggelegak. Artikel ini menganalisis peristiwa yang tidak menyokong menggelegak melalui contoh kod tertentu, dengan harapan dapat membantu pembaca memahami pengehadan peristiwa menggelegak.

Atas ialah kandungan terperinci Tiada sokongan untuk acara menggelegak: had dan skop. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!