JQuery Event 1 in jQuery development: Developing jquery events

JQuery Event 1 in jQuery development: Developing jquery events

1. DOM Loading

$(document).ready()And window. onload. Although they have similar functions, there are differences in the timing of execution. The window. onload () method is executed only after all the elements (including the associated files of the elements) on the webpage are fully loaded into the browser. In this case, JavaScript can access any element in the webpage. In jQuery$(document).ready()The time handler for method registration can be called when the DOM is fully ready. In this case, all the elements in the webpage can be accessed by jQuery, but this does not mean that the files associated with these elements have been downloaded. To solve this problem, you can use the load () method of another page loading method in jQuery. The load () method binds a processing function to the onload () event of the element, if the processing function is bound to a window object, it is triggered after all the content (including the window, frame, object, and image) is loaded. If the processing function is bound to an element, it is triggered after the element content is loaded.

2. Event binding

After the document is loaded, if you intend to bind events to the elements to complete some operations, you can use the bind () method to match the elements for binding specific events. bind () the method format is as follows:

bind(type [, data],fn);

Parameters are described as follows:
The 1st parameters are event types, including blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, and mouseenter, mouseleave, change, select, submit, keydown, keypress, error, etc. Of course, you can also use custom types.
The third parameter is an optional parameter, which is an additional data object passed to the event object as the event. data Attribute Value.
The first object is the handler used for binding.
The sample code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 

The running result is as follows:

Simple event binding code example:

Stop event bubbling
Stopping event bubbling can prevent the event processing functions of other objects from being executed. The stopPropagation () method is provided in jQuery to stop event bubbling.
The jQuery sample code is as follows:

$("span").bind("click",function(event){//do something event.stopPropagation();})

Block default behavior
Elements in a Web page have their own default behaviors. For example, after a hyperlink is clicked, the page jumps. After the button is clicked, the form is submitted. Sometimes, the default behavior of elements needs to be blocked.
In jQuery, The preventDefault () method can block the default behavior of elements.
The jQuery sample code is as follows:

$("#submit").bind("click",function(event){//do something event.preventDefault();})

If you want to stop bubbling and default behavior on the event object at the same time, you can return false in the event processing function. In the form example

Event. preventDefault () // block default behavior

Change to return false;
You can also bubble the event

Event. stopPropagation () // stop event bubbling

Change to return false;

2. Attributes of event objects

(1) event. type
This method is used to obtain the event type.

(2) event. preventDefault ()
This method is used to block the default method of elements.

(3) event. stopPropagation ()
This method is used to prevent event bubbles.

(4)event.tar get
This method is used to obtain the element of the trigger event.

(5) event. relatedTarget
This method is used to obtain relevant elements of the trigger event.

(6) event. pageX and event. pageY
This method is used to obtain the x and y coordinates of the cursor over the page.

(7) event. which
This method is used to obtain the left, right, and buttons of the mouse from the mouse click event.

Get the left, right, and right-click jQuery sample code:

$ ("A"). mousedown (function (event) {alert (event. which); // 1 = left mouse button, 2 = middle mouse button, 3 = right mouse button })

The jQuery sample code for getting keyboard buttons is as follows:

$ ("Input"). keyup (function (event) {alert (event. which); // obtain the keyboard buttons })

3. Remove events
First, add a button to remove the event on the webpage.

<Button id = "delAll"> Delete event </button>

The jQuery sample code for removing an event is as follows:

$("#delAll").click(function(event){$("btn").unbind("click");})

The syntax structure of the unbind () method is as follows:

unbind([type],data)

The first parameter is the event type, and the second parameter is the processing function to be removed, which is described as follows:
(1) Delete All bound events if no parameters exist.
(2) If the event type is provided as a parameter, only binding events of this type will be deleted.
(3) If the handler at binding is used as the second parameter, only the handler for a specific event will be deleted.

In addition, jQuery provides a simple one () method when you only need to trigger it once and then immediately unbind it. The one () method can bind a handler to an element. Delete a processing function immediately after it is triggered. That is, the processing function is executed only once on each object.
The syntax format of one () is as follows:

one(type[,data],fn)

Run the following jQuery sample code:

$("#test").one("click",function(){//do something})