Event bubbling is not all events support event bubbling, such as submit, Focus,blur does not support event bubbling, although mouseover,mouseout support bubbling, but generally not, because the need to calculate the location of the element, the consumption is relatively large. The advantage of event bubbling is that the event delegate can be used to improve the performance of the page, and the disadvantage is that if the same event is bound in the parent element, the triggering of the child element event will also trigger the event of the parent element, and the workaround is to suppress the event bubbling of the child element. Event delegation This is a good thing, with which he can improve the performance of the page. First, each function is an object, consumes memory, and the more objects in memory, the worse the performance. Second, all event programs must be specified in advance to cause the DOM to be accessed, delaying the interaction time of the entire page. For example the Cick event, we can bind all the click events on the page to the document element, and then differentiate between the attributes of the Event.target object (such as Class,id, etc.) to determine which event is coming from and execute the corresponding code. There is also an advantage to event delegation that if some DOM is added dynamically, the corresponding event will be bound once it is added (if the document element is bound) and no more binding is necessary. The Event.currenttarget = = Event.target can be used to determine whether the binding element itself is occurring or bubbled up by a child element. The event binding function in jquery: On key is its selecter parameter, if not this parameter, directly on this element trigger, whether it is triggered by itself or the child element bubbling up to trigger, of course, you can distinguish event.target in function to implement the event delegate. If the Selecter parameter exists, then the event is delegated. It is not triggered on top of the selector level and its descendants in the parameter. You can also use Event.currenttarget = = Event.target to determine whether the binding element itself occurs or is bubbling up by a child element. The arguments are multiple words in "", not [].
JavaScript Event Learning Notes