Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to deal with JQuery events, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to deal with JQuery events. Let's take a look at it.

What is an event: the response of a page to different visitors is called an event.

Event application: an event handler is a method that is called when something happens in HTML.

For example:

1. Page loading: a function bound to be executed when querying and manipulating

The following means binding a function to be executed when DOM is loaded and ready to query and manipulate.

two。 Event handling: adding event

The following means to add a click event handler to li

3. Add / remove classes

ToggleClass () switches the selected elements to add / remove classes.

On () adds an event handler to the element

This means to add a divHover class to the li tag

4. An element binds multiple events with the same function:

Mouseover () the event that is triggered when the mouse pointer is over the element. The event is triggered when the mouse pointer enters the selected element or any child element

Mouseout () adds / triggers a mouse leave event. Event is also triggered when the mouse leaves a child of the selected element

On () adds an event handler to the element

The following means that the divHover class is added when the mouse pointer enters # div2, and the divHover class is deleted when the mouse leaves # Div2

5. Multiple elements bind to the same event (same event delegate) event name, selector, method to be executed by the event

On () adds an event handler to the element

The following means to bind click events and select li and event execution console output

6. Bind multiple events with different functions

Mouseenter () add / trigger mouse move event

AddClass () adds one or more classes to the selected element.

The mouseleave () add / trigger mouse leave event is triggered only when it leaves the selected element, most of the time. Will be used in conjunction with the mouseenter event.

Mousemove () adds / triggers mobile events.

The following means that the divHover class is added when the mouse pointer enters # div3, and when the mouse leaves # div3, the divHover class is deleted again, and the mouse mousemove () in # div3 adds / triggers mobile events.

7. Pass the data to the processing function and pass parameters dynamically

Click # btn3 and you will output Hello btn3

8. Remove event

(1) off () removes event handlers added by the on () method

Remove the click event on the button:

This means to use off to remove the click event on the # btn3 button

(2) undelegate () removes event handlers from current or future selected elements

Remove click events from li:

The following means to use off to remove click events on li

9. Add one or more events

(1) one or more can only be triggered once.

One () adds one or more event handlers to the selected element. The handler can only be triggered once per element

The following means to use one (), which can only be triggered once in the click of # div3, that is, output one () once in the console.

(2) current or future child elements are added

Delegate () adds a handler to the current or future child elements of the matching element

The following means to add a handler to the current matching element

(3) add new elements

Append () inserts content at the end of the selected element (before the closing tag)

The following means to insert li_ "+ I +" at the end of the ul tag

This is the end of the article on "how to deal with JQuery events". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to deal with the JQuery incident". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.