How jQuery handles page events

How jQuery handles page events

This article describes in detail how jQuery handles page events and related information. For more information, see

 

 

Previously, dom operations mentioned the introduction of javascript to event processing. Different browsers handle different events, which makes it unnecessary for developers. jQuery easily solves this problem.

1. Bind event listening

(Http://www.jb51.net/article/60096.htm) on the event listening to a detailed introduction, see the difference between iE and DOM standard browser to event listening, and the Execution Order and method of multiple listening events are not the same.

In jQuery, binding events through bind () is equivalent to the attachEvent () of IE browser and the addEventListener () of standard DOM (). Example:

 

The Code is as follows:

<Script type = "text/javascript">
$ (Function (){
$ ("Img ")
. Bind ("click", function (){
$ ("# Show"). append ("<div> Click Event 1 </div> ");
})
. Bind ("click", function (){
$ ("# Show"). append ("<div> Click Event 2 </div> ");
})
. Bind ("click", function (){
$ ("# Show"). append ("<div> Click Event 3 </div> ");
});
});
</Script>

 

<Div id = "show"> </div>

 

The above code binds three click listening events to img.

The general syntax of bind () is

Bind (eventType, [data], Listener)
EventType indicates the event type, it can be blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/mouseup/onmouseover/onmouseout/mouseenter/onmouseleave/change/select/submit/onkeydown/ keypress/keyup/error

Data is an optional parameter used to pass some special data for the listener function. Listener is an event listening function. The above example uses an anonymous function.

If you want to use the same listening function for multiple event types, you can add them to eventType and separate events with spaces.

 

The Code is as follows:

$ (Function (){
$ ("P"). bind ("mouseenter mouseleave", function (){
$ (This). toggleClass ("over ")
})
});

 

In addition, some special event types can directly use the event name as the binding function, and accept the parameter as the listening function. For example

 

The Code is as follows:

$ ("P"). click (function (){
// Add the click event listening Function
})

 

The general syntax is

EventTypeName (fn)
The eventTypeName that can be used includes

Blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/onmouseup/mousemove/mouseover/mouseout/change/select/submit/
Keydown/keypress/keyup/error

In addition to bind (), jQuery also provides a very practical one () method to bind events. This method will be automatically deleted once it is bound and will no longer take effect.

 

The Code is as follows:

// Create 10 <div> blocks first
For (var I = 0; I <10; I ++)
$ (Document. body). append ($ ("<div> Click <br> Me! </Div> "));
Var iCounter = 1;
// Add a click event with one
$ ("Div"). one ("click", function (){
Certificate (this).css ({
Background: "#8f0000 ",
Color: "# FFFFFF"
Registry.html ("Clicked! <Br> "+ (iCounter ++ ));
});

 

For example, in the previous example, create 10 divs and bind a function event to each div. When you click the div block, the function will not be executed once.

2. Remove event listening

JQuery uses unbind () to remove events. This method can accept two optional functions and does not set any parameters, for example, the following code removes all events marked by div and all click events marked by P.

 

The Code is as follows:

$ ("P"). unbind ("click ");
$ ("Div"). unbind ();

 

If you want to remove a specified event, you must use the second parameter of the unbind (eventType, listener) method, for example:

 

The Code is as follows:

Var myFunc = function (){
// Listener function body
};
$ ("P"). bind ("click", myFunc );
$ ("P"). unbind ("click", myFunc );

 

For example, the following code

 

The Code is as follows:

<Script type = "text/javascript">
$ (Function (){
Var fnMyFunc1; // function variable
$ ("Img ")
. Bind ("click", fnMyFunc1 = function () {// assign to the function variable
$ ("# Show"). append ("<div> Click Event 1 </div> ");
})
. Bind ("click", function (){
$ ("# Show"). append ("<div> Click Event 2 </div> ");
})
. Bind ("click", function (){
$ ("# Show"). append ("<div> Click Event 3 </div> ");
});
$ ("Input [type = button]"). click (function (){
$ ("Img"). unbind ("click", fnMyFunc1); // remove event listening myFunc1
});
});
</Script>


<Input type = "button" value = "Remove Event 1">
<Div id = "show"> </div>

 

For example, in the above Code, the bind () function of fnMyFunc1 is added to assign an anonymous function to it as the name of the unbind () function call.

3. Pass the event object.

Bytes.

 

The Code is as follows:

<Script type = "text/javascript">
$ (Function (){
$ ("P"). bind ("click", function (e) {// pass event object e
Var sPosPage = "(" + e. pageX + "," + e. pageY + ")";
Var sPosScreen = "(" + e. screenX + "," + e. screenY + ")";
$ ("Span" ).html ("<br> Page:" + sPosPage + "<br> Screen:" + sPosScreen );
});
});
</Script>
<P> click here </p>
<Span id = ""> </span>

 

The above code binds the mouse click event listening function to p and transmits the event object as a parameter to obtain the coordinates of the mouse event triggering point.

For the attribute and method of the event, the most important task of jQuery is to solve the compatibility problem for the developer. common attributes and Methods

Attribute description
AltKey: press alt to true; otherwise, false.
CtrlKey: press ctrl to true; otherwise, false.
ShiftKey: press shift to true; otherwise, false.
KeyCode for keyup and keydown events, return the value of the key (that is, the values of a and A are the same, both are 65)
The position of pageX and pageY on the client, excluding the toolbar and scroll bar.
RelateTarget
In a mouse event, the mouse pointer enters or leaves the element.

ScreenX and screenY move the mouse over the screen.
Element/Object of the event caused by target
Type event name, such as click and mouseover
In the which keyboard event, the unicode value of the key is used. In the mouse key, the key represents the mouse key (the left key, the middle key, and the third key is the right button)
StopPropagation () prevents events from bubbling up.
PreventDefault () blocks default event Behavior

The above is all the content in this article. I hope you will enjoy it.