Events in jquery

Loading the DOM

After the page is loaded, the browser adds events to the DOM element via JavaScript.

In regular JavaScript code, you typically use the Window.onload method, in jquery, using the $ (document). Ready () method.

The simplified notation in jquery is "$ ()".

When registering an event in window.onload, it can only be registered in a single window.onload body.

But with jquery, you can register in multiple $ (document). Ready () or $ ().

Event Bindings

Binds the specified event to the matched element.

For example, the method of binding an event in Window.onload:

"$ (" P "). OnClick (function () {

Alert (This). text ());

});”

In jquery, the $ (document). Ready () can be bound in this way:

"$ (" P "). Click (function () {

Alert (This). text ());

});”

With bind (), you can bind like this:

$ ("P"). Bind ("click", Function () {

Alert (This). text ());

});

Synthetic events

Hover (): simulates the cursor hover time. When the cursor moves over an element, the first specified function is triggered, and when the cursor moves out of the element, the specified second function is triggered.

For example, hover effect: $ ("TD"). Hover (function () {

$ (this). addclass ("hover");

}, function () {

$ (this). Removeclass ("hover");

});

Toggle (): Used to simulate a mouse continuous click event. The first time the element is clicked, the first specified function is triggered, and when the same element is clicked again, the specified second function is triggered, and if there are more functions, it is triggered sequentially until the last one.

For example, set the selection and unchecked effects of an element:

$ ("TD"). Toggle (

function () {

$ (this). AddClass ("selected");

}, function () {

$ (this). Removeclass ("selected");

});

Using toggle () without passing parameters, the effect is to toggle the visible state of the element.

Bubbling of events

Events follow the DOM hierarchy as if it were blisters upward, just as the top ends.

Workaround: Returning false in the event handler will stop bubbling the event. You can also stop the default behavior of the element.

This feature is supported for all current UI interactions or their events. Returning false in its own event handler will abort the continuation of the event down pass. Returns true if the event continues to pass down.

Properties of the Event object

Event object: The event object is created when the event is triggered. Using events in a program requires only adding a parameter to the handler function. Use some parameters in the event handler function.

For example, when the Get event occurs, relative to the position of the page: Event.pagex, Event.pagey,event is the parameter of the event handler function.

removing events

Remove all click events from a button:$ ("btn"). Unbind ("click")

Removes all events on a button:$ ("btn"). Unbind ();

One (): This method can bind the handler function to an element. When the handler fires once, the event is immediately deleted. That is, on each object, the event handler is executed only once.

Events in jquery