Detailed explanation of jQuery processing page events_jquery

The introduction of JavaScript to event processing was mentioned in the previous dom operation. Since different browsers handle events differently, this brings unnecessary trouble to developers. jQuery conveniently solves this trouble.

1. Bind event monitoring

( http://www.jb51.net/article/60096.htm ) gave a detailed introduction to event monitoring, and saw the difference between iE and DOM standard browsers in treating event monitoring. And the order and method of executing multiple listening events are also different.

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

Copy code The code is as follows: $(function() { $("img") .bind("click", function() { through }) .bind("click", function() { $("#show").append(" Click Event 2 "); }) .bind("click", function() { through }); }); The above code binds three click listening events to img.

bind() general syntax is

bind(eventType,[data],Listener) Among them, eventType is the type of event, which can be blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/mouseup/onmouseover/onmouseover/onmouseout/mouseenter/onmouseleave/change/select/submit/onkeydown/keypress/ keyup/error

data is an optional parameter, used to pass some special data for use by the listening function. The listener is an event listening function. In the above example, an anonymous function is used For multiple event types, if you want to use the same listening function, you can add it to the eventType at the same time, and use spaces to separate the events.

Copy code

The code is as follows: $(function() { $("p").bind("mouseenter mouseleave", function() { $(this).toggleClass("over") }) });

Some other special event types can directly use the event name as a binding function and accept parameters as listening functions. For example, which was used repeatedly before

Copy code

The code is as follows: $("p").click(function(){ //Add click event listening function }) Among them, the common syntax is

eventTypeName(fn) Available eventTypeNames include

blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/onmouseup/mousemove/mouseover/mouseout/change/select/submit/ keydown/keypress/keyup/error, etc.

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

Copy code The code is as follows: //First create 10 blocks for (var i = 0; i $(document.body).append($(" Click Me! ")); var iCounter = 1; //Add click event with one for each $("div").one("click", function() { $(this).css({ background: "#8f0000", color: "#FFFFFF" }).html("Clicked! " (iCounter)); }); For example, in the above example, create 10 divs and bind a function event to each div. When the div block is clicked, the function will be executed once and then no longer executed.

2. Remove event listener

jQuery uses unbind() to remove events. This method can accept two optional functions, or it can not set any parameters. For example, the following code means to remove all events of div tags and all click events of P tags.

Copy code 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:

Copy code The code is as follows: var myFunc = function() { //Listening function body }; $("p").bind("click",myFunc); $("p").unbind("click",myFunc); For example, the following code

Copy code The code is as follows: $(function() { var fnMyFunc1; //Function variable $("img") .bind("click", fnMyFunc1 = function() { //Assign to function variable through }) .bind("click", function() { $("#show").append(" Click Event 2 "); }) .bind("click", function() { through }); $("input[type=button]").click(function() { $("img").unbind("click", fnMyFunc1); //Remove event listening myFunc1 }); });

For example, in the above code, the fnMyFunc1 function bind() is added and the anonymous function is assigned to it when binding, thus serving as the unbind() function call name. 3. Pass the event object.

http://www.jb51.net/article/60096.htm Introduces the concept of objects, and analyzes the commonly used attributes and methods of event objects. You can see that event objects are used in different browsers There are many differences between timers. In jQuery, no time object is passed to the event listener function in the only way.

Copy code

The code is as follows: $(function() { $ ("P"). Bind ("click", function (e) {// Pass event object E var sPosPage = "(" e.pageX "," e.pageY ")"; var sPosScreen = "(" e.screenX "," e.screenY ")"; $("span").html(" Page: " sPosPage " Screen: " sPosScreen); }); }); Click here

The above code binds the mouse click event listening function to p and passes the event object as a parameter to obtain the coordinate value of the mouse event trigger point.

For event attributes and methods, jQuery’s most important job is to solve compatibility issues for developers. Commonly used attributes and methods

Property Description altKey If the alt key is pressed, it is true, otherwise it is false ctrlKey If the ctrl key is pressed, it is true, otherwise it is false shiftKey If the shift key is pressed, it is true, otherwise it is 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 toolbars, scroll bars, etc. relateTarget Mouse events occur when the mouse pointer enters or leaves an element.

screenX, screenY The position of the mouse on the entire screen. target The element/object that caused the event type The name of the event, such as click, mouseover, etc. which keyboard event represents the unicode value of the button, and mouse button represents the mouse button (1 left button, 2 middle button, 3 right button) stopPropagation() prevents events from bubbling upwards. preventDefault() prevents event default behavior

The above is the entire content of this article. It is explained in great detail. I hope you all like it.