Summary and sharing of commonly used click events in JavaScript-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Summary and sharing of commonly used click events in JavaScript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 11, 2022 pm 02:43 PM

javascript

This article brings you relevant knowledge about JavaScript, which mainly introduces the relevant content about commonly used click times, including onclick asynchrony, synchronization, and the sequence of event triggering. As well as time registration and other contents, let’s take a look at it below. I hope it will be helpful to everyone.

Summary and sharing of commonly used click events in JavaScript

[Related recommendations: JavaScript video tutorial, web front-end】

onclick introduction

onclick is an event attribute in HTML. Its function is to trigger an event when the user clicks on an element.

The onclick event can be bound to any element, such as

loop in JavaScript. This loop will be executed 100 million times. At this time, the page will be stuck, but it will not prevent you from clicking the button.

At this time, when you click the button, there will be no response from the console. This is because the onclick event is asynchronous, so when you click the button, the onclick

event is not processed. Trigger, but will not trigger until the tasks in the JavaScript execution stack are completed.

Synchronicity of onclick

It was said above that the onclick event is asynchronous, and now it is said that the onclick event is synchronous. This seems a bit contradictory. In fact, both statements are correct. , go directly to the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>onclick</title>
</head>
<body>
<button id="btn">click</button>
<script>
    document.getElementById(&#39;btn&#39;).onclick = function () {
        console.log(&#39;click&#39;);
    }
    for (var i = 0; i < 10; i++) {
        console.log(i);
        if (i === 5) {
            document.getElementById(&#39;btn&#39;).click();
        }
    }
</script>
</body>
</html>

In the above code, when the console output reaches 5, we manually trigger the onclick event. At this time, the console will output click

, and then continue to output the following Yes, this illustrates onclick synchronization.

After consulting the relevant information, if the onclick event is manually triggered by the user, then the onclick event is asynchronous and will be pushed into the event queue. If the onclick

event is triggered by JavaScript code , then the onclick event is synchronous and will be executed immediately.

The triggering sequence of onclick

The triggering sequence of onclick events is to capture first and then bubble, that is to say, the capture event is triggered first, and then the bubbling event is triggered.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>onclick</title>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3">
            <button id="btn">click</button>
        </div>
    </div>
</div>
<script>
    document.getElementById(&#39;div1&#39;).onclick = function () {
        console.log(&#39;div1&#39;);
    }
    document.getElementById(&#39;div2&#39;).onclick = function () {
        console.log(&#39;div2&#39;);
    }
    document.getElementById(&#39;div3&#39;).onclick = function () {
        console.log(&#39;div3&#39;);
    }
    document.getElementById(&#39;btn&#39;).onclick = function () {
        console.log(&#39;btn&#39;);
    }
</script>
</body>
</html>

In the above code, we bind onclick events to the

element and the

Then click the

If you double-click the

So the order of event triggering is onmousedown, onmouseup, onclick, ondblclick.

So when using the onclick event, if multiple events related to mouse buttons are bound, then you need to pay attention to the logic of event processing to avoid some unexpected problems.

Event Object

In the onclick event, we can obtain the event object through the event parameter, which contains event-related information.

The event object event is an instance of MouseEvent. It inherits UIEvent and Event, so the event object contains all properties and methods of UIEvent and Event.

MouseEvent properties:

Summary and sharing of commonly used click events in JavaScript

MouseEvent methods:

getModifierState(): Returns a Boolean value, Indicates whether the specified key was pressed.
initMouseEvent(): Initialize the event object.
preventDefault(): Default behavior to prevent events.
stopImmediatePropagation(): Stops events from bubbling upwards and prevents further capturing or bubbling of events.
stopPropagation(): Stops events from bubbling upward.

How to register the click event

The click event can be registered through the onclick attribute, addEventListener() method and attachEvent() method.

onclick attribute

The onclick attribute is an attribute of Element. Its value is a function. When the click event is triggered, this will be executed. function.

<button onclick="console.log(&#39;click&#39;)">click</button>

addEventListener()

addEventListener()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数，第三个参数是一个布尔值，表示是否在捕获阶段触发事件处理函数。

<button id="btn">click</button>
<script>
  var btn = document.getElementById(&#39;btn&#39;);
  btn.addEventListener(&#39;click&#39;, function() {
    console.log(&#39;click&#39;);
  });
</script>

attachEvent()

attachEvent()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数。

<button id="btn">click</button>
<script>
  var btn = document.getElementById(&#39;btn&#39;);
  btn.attachEvent(&#39;onclick&#39;, function() {
    console.log(&#39;click&#39;);
  });
</script>

结语

click事件是鼠标点击事件，它是MouseEvent的一个实例，它的事件类型是click，它可以通过onclick属性、addEventListener()方法和attachEvent()方法注册。

【相关推荐：JavaScript视频教程、web前端】

The above is the detailed content of Summary and sharing of commonly used click events in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:掘金. If there is any infringement, please contact admin@php.cn delete

From C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

JavaScript: Exploring the Versatility of a Web LanguageApr 11, 2025 am 12:01 AM

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

The Evolution of JavaScript: Current Trends and Future ProspectsApr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

Demystifying JavaScript: What It Does and Why It MattersApr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Atom editor mac version download

The most popular open source editor

SublimeText3 Linux new version

SublimeText3 Linux latest version

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),