JQuery handles the page's event detailed _jquery

JavaScript's introduction to event handling was mentioned in previous DOM operations. Because different browsers handle events differently, this creates unnecessary trouble for developers, and jquery solves this problem conveniently.

1. Binding Event Monitoring

(http://www.jb51.net/article/60096.htm) A detailed introduction to the monitoring of the event, seeing the difference between IE and DOM standard browsers for event sniffing, and the sequence and manner in which multiple listener events are executed.

In jquery, the event is bound by bind (), which is equivalent to the attachevent () of IE browser and the AddEventListener () of the standard DOM. The following example:

Copy Code code 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 the IMG.

Bind () Common syntax is

Bind (Eventtype,[data],listener)
Where EventType is the type of event and can be blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/mouseup/onmouseover/ Onmouseover/onmouseout/mouseenter/onmouseleave/change/select/submit/onkeydown/keypress/keyup/error

The data is an optional parameter that is used to pass some special information to the listener function. and listener for the event listener function, the above example uses the anonymous function

For multiple event types, if you want to use the same listener function, you can add a colleague to the EventType, separating the events with a space.

Copy Code code as follows:

$ (function () {
$ ("P"). Bind ("MouseEnter mouseleave", function () {
$ (this). Toggleclass ("over")
})
});

Other special event types can use the event name directly as the binding function and accept the parameter as the listener function. such as the previous repeated use of

Copy Code code as follows:

$ ("P"). Click (function () {
Add Click event Listener function
})

Where the general syntax is

Eventtypename (FN)
The eventtypename that can be used 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 provides a useful one () method for binding events. This method binding will be automatically deleted once it has been set off and is no longer valid.

Copy Code code as follows:

Create 10 <div> Blocks first
for (var i = 0; i < i++)
$ (document.body). Append ($ ("<div>Click<br>Me!</div>"));
var icounter = 1;
Each adds the Click event with one
$ ("div"). One ("click", Function () {
$ (this). CSS ({
Background: "#8f0000",
Color: "#FFFFFF"
}). html ("clicked!<br>" + (icounter++));
});

For example, to create 10 div, bind a function event to each div, and when you click on the div block, the function executes once and no longer executes.

2. Removal of event Monitoring

jquery uses unbind () to remove the event, which can accept two optional functions or set no parameters, such as the following code representing all events that remove the div tag and all click events that are marked by P.

Copy Code code as follows:

$ ("P"). Unbind ("click");
$ ("div"). Unbind ();

If you want to remove a specified event, you must use the second argument of the Unbind (Eventtype,listener) method, for example:

Copy Code code as follows:

var myFunc = function () {
Listening function body
};
$ ("P"). Bind ("click", MyFunc);
$ ("P"). Unbind ("click", MyFunc);

For example, the following code

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
var fnMyFunc1; function variables
$ ("img")
. bind ("click", fnMyFunc1 = function () {//Assigned to a functional 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); Removal Event Listener MyFunc1
});
});
</script>


<input type= "button" value= "Remove event 1" >
<div id= "Show" ></div>

For example, the above code adds the FNMYFUNC1 function bind () binding to assign the anonymous function to him as the Unbind () function invocation name.

3. Passing event objects.

Http://www.jb51.net/article/60096.htm introduces the concept of objects, and analyzes the common properties and methods of event objects, you can see that there are many differences between the event objects in different browsers, There is no time object in jquery that is passed to the event listener through a unique method.

Copy Code code 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 Listener function to p and passes the event object as a parameter, thus obtaining the coordinate value of the mouse event trigger point.

For the properties and methods of the event, jquery's most important job is to solve compatibility issues for developers, commonly used properties and methods

Attribute description
Altkey Press the ALT key to Ture, or false
Ctrlkey Press the CTRL key to Ture, or false
Shiftkey Press the SHIFT key to ture, or false
KeyCode for KeyUp and KeyDown events, returns the value of the key (that is, the value of a and a are the same, all 65)
Pagex,pagey mouse position in the client, excluding toolbars, scroll bars, etc.
Relatetarget
In the mouse event, the mouse pointer enters or leaves the element.

Screenx,screeny the mouse over the entire screen position.
Target element/object that causes the event
The name of the type event, such as Click,mouseover
Which keyboard event is a key to the Unicode value, the mouse button in the mouse button (1 left 2 key 3 for the right button)
Stoppropagation () blocks the event from bubbling up.
Preventdefault () block event default behavior

The above is the entire content of this article, the explanation is very detailed, I hope you can enjoy.