Table of Contents
1. Click event
1. click event
2. dblclick event
2. Mouse events
1. mouseenter and mouseleave events
2. Hover event
3. Keyboard events
1. keydown, keypress and keyup events
4. Other common events
Conclusion
Home Web Front-end JS Tutorial List of common jQuery events

List of common jQuery events

Feb 24, 2024 am 11:57 AM
mouse events Keyboard events click event form submission

List of common jQuery events

[List of commonly used events in jQuery, specific code examples are required]

jQuery is a popular JavaScript library that is widely used in web development. In jQuery, event handling is a very important part. Through events, we can achieve interactive and dynamic effects on the page. This article will introduce commonly used events in jQuery, including click events, mouse events, keyboard events, etc., and provide specific code examples.

1. Click event

1. click event

The click event is an event triggered when an element is clicked. It can be obtained through the click() method. Bind the handler function of the click event.

$("#btn").click(function(){
    alert("按钮被点击了!");
});
Copy after login

2. dblclick event

The dblclick event is an event triggered when an element is double-clicked. The handler function of the dblclick event can be bound through the dblclick() method.

$("#box").dblclick(function(){
    alert("盒子被双击了!");
});
Copy after login

2. Mouse events

1. mouseenter and mouseleave events

mouseenter and mouseleave events are triggered when the mouse enters and leaves the element respectively. They can be passed mouseenter( ) and mouseleave() methods to bind the handler function.

$("#box").mouseenter(function(){
    $(this).css("background-color", "red");
}).mouseleave(function(){
    $(this).css("background-color", "white");
});
Copy after login

2. Hover event

The hover event is triggered when the mouse enters and leaves the element, and the handler function can be bound through the hover() method.

$("#box").hover(function(){
    $(this).css("background-color", "blue");
}, function(){
    $(this).css("background-color", "white");
});
Copy after login

3. Keyboard events

1. keydown, keypress and keyup events

keydown, keypress and keyup events are triggered when the keyboard keys are pressed, held down and released respectively , the processing function can be bound through the corresponding method.

$(document).keydown(function(event){
    console.log("按下了键:" + event.key);
});

$(document).keypress(function(){
    console.log("按住键不放。");
});

$(document).keyup(function(){
    console.log("释放了键。");
});
Copy after login

4. Other common events

In addition to the above-mentioned common events, jQuery also supports other events, such as change, submit, resize, etc. These events can also be bound to handler functions through corresponding methods.

$("#input").change(function(){
    alert("输入框内容发生了变化。");
});

$("#form").submit(function(){
    alert("表单提交了。");
});

$(window).resize(function(){
    alert("窗口大小发生了变化。");
});
Copy after login

In projects, reasonable use of these events can add interactivity and user experience to the page. I hope the content of this article can be helpful to the majority of developers.

Conclusion

Through the introduction of this article, we have learned about the commonly used events in jQuery and their corresponding code examples. These events are commonly used interactive methods in web development, and mastering them can help developers achieve richer page effects. I hope readers can improve their front-end skills through practice and continuous learning.

The above is the detailed content of List of common jQuery events. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to add touch events to pictures in vue How to add touch events to pictures in vue May 02, 2024 pm 10:21 PM

How to add click event to image in Vue? Import the Vue instance. Create a Vue instance. Add images to HTML templates. Add click events using the v-on:click directive. Define the handleClick method in the Vue instance.

What is the event-driven mechanism of C++ functions in concurrent programming? What is the event-driven mechanism of C++ functions in concurrent programming? Apr 26, 2024 pm 02:15 PM

The event-driven mechanism in concurrent programming responds to external events by executing callback functions when events occur. In C++, the event-driven mechanism can be implemented with function pointers: function pointers can register callback functions to be executed when events occur. Lambda expressions can also implement event callbacks, allowing the creation of anonymous function objects. The actual case uses function pointers to implement GUI button click events, calling the callback function and printing messages when the event occurs.

The difference between event and $event in vue The difference between event and $event in vue May 08, 2024 pm 04:42 PM

In Vue.js, event is a native JavaScript event triggered by the browser, while $event is a Vue-specific abstract event object used in Vue components. It is generally more convenient to use $event because it is formatted and enhanced to support data binding. Use event when you need to access specific functionality of the native event object.

How to build a single-page application using PHP How to build a single-page application using PHP May 04, 2024 pm 06:21 PM

Steps to build a single-page application (SPA) using PHP: Create a PHP file and load Vue.js. Define a Vue instance and create an HTML interface containing text input and output text. Create a JavaScript framework file containing Vue components. Include JavaScript framework files into PHP files.

Why can't click events in js be executed repeatedly? Why can't click events in js be executed repeatedly? May 07, 2024 pm 06:36 PM

Click events in JavaScript cannot be executed repeatedly because of the event bubbling mechanism. To solve this problem, you can take the following measures: Use event capture: Specify an event listener to fire before the event bubbles up. Handing over events: Use event.stopPropagation() to stop event bubbling. Use a timer: trigger the event listener again after some time.

What does div mean in css What does div mean in css Apr 28, 2024 pm 02:21 PM

A DIV in CSS is a document separator or container used for grouping content, creating layouts, adding style, and interactivity. In HTML, the DIV element uses the syntax <div></div>, where div represents an element to which attributes and content can be added. DIV is a block-level element that occupies an entire line in the browser.

What scenarios can event modifiers in vue be used for? What scenarios can event modifiers in vue be used for? May 09, 2024 pm 02:33 PM

Vue.js event modifiers are used to add specific behaviors, including: preventing default behavior (.prevent) stopping event bubbling (.stop) one-time event (.once) capturing event (.capture) passive event listening (.passive) Adaptive modifier (.self)Key modifier (.key)

What is the abbreviation of dom in js? What is the abbreviation of dom in js? May 09, 2024 am 12:00 AM

DOM (Document Object Model) is an API for accessing, manipulating and modifying the tree structure of HTML/XML documents. It represents the document as a node hierarchy, including Document, Element, Text and Attribute nodes, which can be used to: access and modify Document structure Access and modify element styles Create/modify HTML content in response to user interaction

See all articles