jQuery's delegate_jquery thought of hiding divs by clicking elsewhere on the page

Let’s start with the simplest one. If the page has a div with an id of test, we need to hide the div by clicking elsewhere on the page:

Copy code The code is as follows:

                                                              
There are generally two ways of thinking about this problem. Both of them will use the principle of event bubbling. If you want to learn more about the Javascript event mechanism, you can take a look at

JavaScript and HTML Interaction - Events, which It is not the focus of this article, so here is just a brief introduction to event bubbling,

Event bubbling

IE's event bubbling: the event is initially received by the most specific element, and then propagates upwards to less specific elements

Netscape's event capture: less specific nodes receive events earlier, while the most specific elements receive events last, contrary to event bubbling

DOM event flow: DOM level 2 events stipulate that the event flow includes three stages, the event capture stage, which is in the target stage, and the event bubbling stage. The first thing that happens is the event capture, which provides an opportunity to intercept the event, and then the actual target receives the event. , and finally the bubble sentence stage.

Opera, Firefox, Chrome, and Safari all support DOM event streaming. IE does not support event streaming and only supports event bubbling

If there is the following html, click on the div area, and the click event triggering sequence of different model event elements is as follows:

Copy code The code is as follows:

< html>