No support for bubbling events: limitations and scope

Bubbling Event refers to an event delivery method that is triggered step by step from child elements to parent elements in the DOM tree. In most cases, bubbling events are very flexible and scalable, but there are some special cases where events do not support bubbling.

1. Which events do not support bubbling?
Although most events support bubbling, there are some events that do not support bubbling. The following are some common events that do not support bubbling:

1. focus and blur events
2. load and unload events
3. input, select and change events
4. submit and reset event
5. scroll event
6. mouseenter and mouseleave event
7. contextmenu event

2. Event example
For To better understand the limitations of bubbling events, specific code examples are given below for each event that does not support bubbling for a better understanding:

1. focus and blur events
   The focus and blur events are events used to handle elements gaining or losing focus. These events do not support bubbling, which means that when you trigger a focus or blur event on a child element, the corresponding event on the parent element will not be triggered.

HTML code:

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

JavaScript code:

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

Result:
When the text box gets focus, only "Input obtained" will be output in the console Focus" instead of outputting "Div has focus". Because the focus event does not bubble up to the parent element div.

2. Load and unload events
   The load and unload events are events triggered after the page or resource is loaded. These events do not support bubbling, which means that when a load or unload event is triggered on a child element, the corresponding event on the parent element will not be triggered.

HTML code:

<div>
  <img  src="/static/imghwm/default1.png"  data-src="image.png"  class="lazy" id="myImage" alt="No support for bubbling events: limitations and scope" >
</div>

JavaScript code:

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

Result:
When the image loading is completed, only "Image loading completed" will be output on the console " instead of outputting "Div loading completed". Because the load event does not bubble up to the parent element div.

3. Input, select and change events
   Input, select and change events are events used to handle changes in form element values. These events only affect the element whose value actually changed and will not bubble up to the parent element.

HTML code:

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

JavaScript code:

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

Result:
When the value of the input box changes, only "Input" will be output on the console Box value changed" instead of "Form value changed" will not be output. Because the input event does not bubble up to the parent element form.

4. submit and reset events
   The submit and reset events are events that are triggered when the form is submitted and reset. These events can only be applied to the form element itself and will not bubble up to parent elements.

HTML code:

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

JavaScript code:

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

Result:
When the submit button is clicked, only "Form submitted" will be output in the console " instead of "Div Submit" will be output. Because the submit event does not bubble up to the parent element div. Note that in the example we prevent the form's default submission behavior through the event.preventDefault() method.

5. scroll event
   scroll event is an event triggered when scrolling occurs. This event does not support bubbling, which means that when scrolling an element, the scroll event on the parent element will not be triggered.

HTML code:

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

JavaScript code:

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

Result:
When the div is scrolled, only "scroll" will be output in the console, and Will not bubble to upper elements.

6. mouseenter and mouseleave events
   The mouseenter and mouseleave events are events that are triggered when the mouse enters and leaves an element. These events do not support bubbling, which means that when the mouse enters or leaves an element, the corresponding event on the parent element will not be triggered.

HTML code:

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

JavaScript code:

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

Result:
When the mouse enters the div, only "The mouse enters the div" will be output in the console ", instead of outputting "mouse enters body".

7. contextmenu event
   The contextmenu event is an event triggered when the mouse right button is clicked. This event does not support bubbling, which means that when you right-click an element, the contextmenu event on the parent element will not be triggered.

HTML code:

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

JavaScript code:

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

Result:
When you right-click a div, only "right-click" will be output in the console , instead of outputting "right click on body". Note that in the example we prevent the default context menu from being displayed through the event.preventDefault() method.

3. Summary
Bubble events are an event delivery method that is triggered step by step from child elements to parent elements in the DOM tree. Most events support bubbling, but there are also some that do not. Bubble special events. This article analyzes events that do not support bubbling through specific code examples, hoping to help readers understand the limitations of bubbling events.

The above is the detailed content of No support for bubbling events: limitations and scope. For more information, please follow other related articles on the PHP Chinese website!