What are the events that cannot be delivered by bubbling?

What events cannot be bubbled?

Event bubbling means that when an element triggers an event on a web page, if its parent element also has a listener for the event, then the event will also be triggered on the parent element. Event bubbling is very common in web development. It can easily manage the event response of multiple elements in the page. However, not all events are suitable for bubbling delivery, and some events need to be prevented from bubbling to avoid unnecessary problems. This article will introduce several common events that cannot be bubbled and provide specific code examples.

1. Focus and blur events

In a web page, when an element gains focus (focus) or loses focus (blur), the corresponding event will be triggered. These two events cannot be bubbled and delivered because the focus event is related to the user's interaction on the page. If the focus event can be bubbled and delivered, it may lead to unexpected results. The following is a sample code:

<div id="outer">
  <input id="inner" type="text">
</div>

<script>
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");

outer.addEventListener("focus", function() {
  console.log("outer focus");
});

inner.addEventListener("focus", function(event) {
  event.stopPropagation(); // 阻止冒泡传递
  console.log("inner focus");
});

inner.addEventListener("blur", function(event) {
  event.stopPropagation(); // 阻止冒泡传递
  console.log("inner blur");
});

outer.addEventListener("blur", function() {
  console.log("outer blur");
});
</script>

In the above code, when the internal text input box gains focus, the internal focus event is triggered, and the event is prevented from bubbling to the external through the stopPropagation() method. div element, and the external focus event will not be triggered.

2. scroll event

The scroll event is an event triggered when the page is scrolled and cannot be delivered by bubbling. Since the scroll event is related to the scrolling of the web page, if the scroll event can be bubbled, it may cause confusion in the page scrolling. The following is a sample code:

<div id="container" style="height: 200px; overflow: auto;">
  <div id="content" style="height: 1000px;"></div>
</div>

<script>
var container = document.getElementById("container");
var content = document.getElementById("content");

container.addEventListener("scroll", function() {
  console.log("container scroll");
});

content.addEventListener("scroll", function(event) {
  event.stopPropagation(); // 阻止冒泡传递
  console.log("content scroll");
});
</script>

In the above code, when the content area scrolls, the scroll event of the content area is triggered, and the event bubbling is prevented from being passed to the container element through the stopPropagation() method, so The container's scroll event will not be triggered.

3. Load and unload events

The load event is triggered after the page or image is loaded, and the unload event is triggered when the page is about to be unloaded. These two events cannot be bubbled and delivered because they are related to the loading and unloading of the entire page. If they can be bubbled and delivered, it may lead to confusion in the order of page loading and unloading. The following is a sample code:

window.addEventListener("load", function() {
  console.log("page loaded");
});

window.addEventListener("unload", function() {
  console.log("page unloaded");
});

In the above code, the load event will be triggered when the page is loaded, and the unload event will be triggered when the page is about to be unloaded. These two events will not bubble up and be delivered to other elements.

Summary

In addition to the events mentioned above, there are some other events that cannot be bubbled, such as input, change, reset, submit, mouseenter, mouseleave and other events. When using these events, you need to pay attention to the event delivery mechanism to avoid unnecessary problems. Understanding the principles of event delivery can better control and manage event responses in web pages and improve user experience.

The above is the detailed content of What are the events that cannot be delivered by bubbling?. For more information, please follow other related articles on the PHP Chinese website!