, etc. The triggering order of the onclick event is to capture first and then bubble, that is to say, the capture event is triggered first, and then the bubbling event is triggered.
The asynchronicity of onclick
The onclick event is asynchronous, which means that the onclick event is triggered only after the tasks in the JavaScript execution stack are executed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onclick</title>
</head>
<body>
<button id="btn">click</button>
<script>
document.getElementById('btn').onclick = function () {
console.log('click');
}
console.log('start');
for (var i = 0; i < 1000000000; i++) ;
console.log('end');
</script>
</body>
</html> Copy after login
In the above code, we bound the onclick event to the element, and then used a for
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('btn').onclick = function () {
console.log('click');
}
for (var i = 0; i < 10; i++) {
console.log(i);
if (i === 5) {
document.getElementById('btn').click();
}
}
</script>
</body>
</html> Copy after login
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('div1').onclick = function () {
console.log('div1');
}
document.getElementById('div2').onclick = function () {
console.log('div2');
}
document.getElementById('div3').onclick = function () {
console.log('div3');
}
document.getElementById('btn').onclick = function () {
console.log('btn');
}
</script>
</body>
</html> Copy after login
In the above code, we bind onclick events to the
element and the
element respectively, and then click the element, the console will output btn , div3, div2, div1, this is the triggering sequence of the onclick event.
The order in which events are triggered In the onclick event, if we bind multiple events related to mouse buttons, what is the order in which these events are triggered?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onclick</title>
</head>
<body>
<button id="btn">click</button>
<script>
document.getElementById('btn').onclick = function () {
console.log('click');
}
document.getElementById('btn').ondblclick = function () {
console.log('dblclick');
}
document.getElementById('btn').onmousedown = function () {
console.log('mousedown');
}
document.getElementById('btn').onmouseup = function () {
console.log('mouseup');
}
</script>
</body>
</html> Copy after login
In the above code, we bound four events onclick, ondblclick, onmousedown, and onmouseup to the element.
Then click the element, and the console will output mousedown, mouseup, and click in sequence.
If you double-click the element, the console will output mousedown, mouseup, click, mousedown, mouseup, click, dblclick in sequence.
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:
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('click')">click</button> Copy after login
addEventListener()
addEventListener()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数，第三个参数是一个布尔值，表示是否在捕获阶段触发事件处理函数。
<button id="btn">click</button>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
console.log('click');
});
</script> Copy after login
attachEvent()
attachEvent()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数。
<button id="btn">click</button>
<script>
var btn = document.getElementById('btn');
btn.attachEvent('onclick', function() {
console.log('click');
});
</script> Copy after login
结语
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!
![JavaScript in-depth analysis [Web front-end must know basic skills]](https://img.php.cn/upload/course/000/000/041/61d3ff1c83b43350.jpg)
![JavaScript basic syntax [dom|bom|es6 new syntax|jQuery|data visualization echarts]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
