Basic jquery Tutorial Chapter 3rd

The Window.onload event differs from the $ (document). Ready () event handler

1, the time to trigger the operation is different. The Window.onload event is not triggered until the document is completely downloaded to the browser. $ (document). The Ready () event handler is called when the DOM is fully in place and can be used, and all associated files are not necessarily downloaded.

2. Execute multiple scripts. The Window.onload event can only execute one script, and the last specified function replaces the previously specified function. $ (document). The Ready () event handler can execute multiple scripts, and each time it is called, a new function is added to the internal behavior queue, and all functions are executed after the page is loaded and executed sequentially in the order in which they were registered.

Name collisions caused by multiple libraries

WORKAROUND: 1, call the Jquery.noconflict () method

　　　　　　　　

1 <script src= "Prototype.js" ></script>2 <script src= "Jquery.js" ></script >3 <script>4jquery.noconflict (); 5 </script>6 <script src= "Myscript.js" ></script>

2. The callback function passed to the. Ready () method receives $ as a parameter.

jquery (document). Ready (function($) {    // in this case, normal use }), or shorthand syntax: jQuery (  function($) {    // normal use });

The journey of the 3.3.1 event

Event capture: A strategy that allows multiple elements to respond to a click event, which is first handed to the outermost element and then to a more specific element.

Event bubbling: In contrast to event capture, when an event occurs, it is first sent to the most specific element, and after the element has a response opportunity, the event bubbles up to a more general element.

The DOM standard specifies that both strategies are used: First, the event is captured from the general element to the specific element layer by level, and then the event bubbles back to the top layer of the DOM tree.

1. Block event bubbling. Through the event object. The event object is passed to the invoked event handler when the element obtains an opportunity to handle the event, contains information about the event, and also provides some methods that affect the event's passing process in the DOM. such as event target: Event.target (), stop event Propagation: stoppropagation ().

2. Block the default action: Preventdefault () method.

3. Stop event propagation and default operation at the same time. Returns false in the event handler.

Basic jquery Tutorial Chapter 3rd