search

Home >Web Front-end >JS Tutorial >Summary and sharing of commonly used click events in JavaScript

Summary and sharing of commonly used click events in JavaScript

WBOY
WBOYforward
2022-10-11 14:43:155987browse

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:juejin.im. If there is any infringement, please contact admin@php.cn delete
Previous article：[Front-end essentials] 16 practical tools/website sharingNext article：[Front-end essentials] 16 practical tools/website sharing

Related articles

See more