Home > Developer > Web Develop
Js event bubbling and js bubbling
Javasrt RT events have two important features: Event bubbling and target elements.
Event bubbling: when an event on an element is triggered, for example, if you click a button, the same event will be triggered among all the ancestor elements of that element. This process is called event bubbling, which starts from the original element until the top layer of the DOM tree.
Target element: the target element of any event is the first element, and label is also used in this example. With event proxy, we can add the event processor to an element and wait for an event to bubble up from its child element, it is also easy to know which element the event starts.
Event bubbling and capturing
Capture is from the upper-level element to the lower-level element, and bubble is from the lower-level element to the upper-level element.
The following program simulates event bubbling:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Visit this page and click label to view the console output:
You can see the sequence of event triggering after clicking label:
1. Trigger The onclick event of the label;
2. Trigger The onclick event of input;
3. The input Click Event causes event bubbling to trigger the outer label click event.
Solution:
If you click an element and do not want the event to continue propagation, you can use the following method:<% @ Page language = "java" import = "java. util. * "pageEncoding =" UTF-8 "%> <% String path = request. getContextPath (); String basePath = request. getScheme () + ": //" + request. getServerName () + ":" + request. getServerPort () + path + "/"; %> <! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> This will only call the label click event once.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
