Use jQuery (5) to process page events and jquery events

Use jQuery (5) to process page events and jquery events

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.cnblogs.com/ahthw/p/4213521.html) 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:

<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.

$(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

$ ("P"). click (function () {// Add a click event listener 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.

// Create 10 <div> blocks for (var I = 0; I <10; I ++) $ (document. body ). append ($ ("<div> Click <br> Me! </Div> "); var iCounter = 1; // Add the click Event $ (" div ") with one for each user "). one ("click", function () {detail (this).css ({background: "#8f0000", color: "# FFFFFF" comment ).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.

$("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:

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

For example, the following code

<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.

<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)
PageX, pageY	The position of the mouse on the client, excluding the toolbar and scroll bar.
RelateTarget	In a mouse event, the mouse pointer enters or leaves the element.
ScreenX, screenY	Place the mouse on the screen.
Target	Element/object that causes the event
Type	Event name, such as click and mouseover
Which	In a keyboard event, the unicode value of the key is used. In a mouse event, the key represents the mouse key (1-left, 2-middle, 3-right)
StopPropagation ()	Prevents events from bubbling up.
PreventDefault ()	Block default event Behavior

4. event triggering

In some cases, the user is expected to trigger the event without any operation. For example, after the page is opened, the listener function is automatically clicked once. If you want to click a button, other buttons will also be clicked. JQuery uses tigger (eventTepe) to trigger events. The ebentType parameter is a valid event type, such as click and submit.

For example, there are two buttons with their own event listening functions. When you click button 1, you can run your own listening function. When you click button 2, you can run your own listening function, the listening function of Button 1 is also run, as if button 1 is also clicked

<Script type = "text/javascript"> function Counter (oSpan) {var iNum = parseInt (oSpan. text (); // obtain the oSpan value in the span. text (iNum + 1); // The number of clicks plus 1} $ (function () {$ ("input: eq (0 )"). click (function () {Counter ($ ("span: first") ;}); $ ("input: eq (1 )"). click (function () {Counter ($ ("span: last"); $ ("input: eq (0 )"). trigger ("click"); // click Event of trigger button 1 });}); </script> <input type = "button" value = "Button 1"> <input type = "button" value = "Button 2"> <br> <div> button 1 clicks: <span> 0 </span> </div> <div> button 2 clicks: <span> 0 </span> </div>

For special event types, such as blur, change, click, focus, select, and submit, you can also use the event name as the trigger function. The statement of the preceding trigger button 1 is equal to: $ ("input: eq (0)"). click ();

Other highlights

JQuery tutorial (29)-jQuery plug-in development-Specify parameters for plug-in Methods jQuery tutorial (28)-jQuery plug-in development-jQuery tutorial (27) -jQueryajax-Modify default options jQuery tutorial (26)-ajax-use JSONP to load Remote Data jQuery tutorial (25)-security restrictions on ajax operations