Let's deeply understand the event object in js
|
We know that the commonly used events in JS are:
So what exactly is the "event object" in JS? First of all, what is an event?First of all, JS is used to implement some dynamic operations, and users sometimes want to implement some functions, such as submitting a form, clicking the mouse, etc., which requires triggering this event in the browser. Then the browser will perceive (or capture) the user's behavior and respond to and process the event. This is called an event. So, what is the reason for generating event objects?In most cases, the triggering of an event is an action that the user wants to perform. In other words, we cannot be sure when the user triggers the event. Moreover, due to the propagation mechanism of the event, we cannot even be sure at which node the event is triggered. This is a headache. In order to solve this problem, after the event occurs, the system will call the event handler (a piece of code) we wrote to solve it. This leads to the question of what is an event object?When calling the handler, the system will encapsulate all the information about the event into an object and pass it to the listening function (event handler) as a parameter. So this object is called an event object. Depending on the event type, the information contained in the event object is also different; for example, in a click event, it contains the horizontal and vertical coordinates of the mouse click, and in a keyboard event, it contains the keyboard key value, etc.
<body>
<div id="div">
<p>pppp</p>
</div>
<input type="text" value="" id="i">
</body>
<script>
var d = document.getElementById('div');
//Mouse event d.addEventListener('click',function(e){
console.log(e);
});
var i = document.getElementById('i');
//Keyboard event i.addEventListener('keydown',k);
function k(e){
console.log(e);
}
</script>
Now that we understand the meaning of event objects, let's take a look at the properties and methods of event objects. (1) General attributes: event.bubbles: returns a Boolean value indicating whether the current event will bubble; event.eventPhase: Returns an integer value indicating the position of the event stream in the propagation phase
event.type: returns a string indicating the event type, case-sensitive; event.timeStamp: returns a millisecond timestamp indicating the time when the event occurred; clientX, clientY: Get the X, Y coordinates of the mouse event Event Object (2) Event proxy/delegate properties: event.target: A reference to the event trigger, returning the node where the triggering event occurred. (Key Points) event.currentTarget: Returns the node where the event is currently located, that is, the node to which the listening function being executed is bound. (Just understand)
var d = document.getElementById('d');
d.onclick = function(e){
//Return the event node console.log(e.currentTarget);
//Return to trigger node console.log(e.target);
}
The meaning of event proxy (event delegation): Since the event will propagate upward to the parent node in the bubbling stage, the listening function of the child node can be defined on the parent node, and the listening function of the parent node will uniformly handle the events of multiple child elements. This method is called event proxy, also called event proxy or event delegation.
<head>
<title></title>
<meta charset="UTF-8">
<style>
div{padding: 40px}
#div3{width: 300px;height: 300px;border: 1px solid red;}
#div2{width: 200px;height: 200px;border: 1px solid red;}
#div1{width: 100px;height: 100px;border: 1px solid red}
</style>
</head>
<body>
<div id="div3">div3
<div id="div2">div2
<div id="div1">div1</div>
</div>
</div>
</body>
<script>
var d = document.getElementById('div3');
d.onclick = function(e){
e.target.style.background = 'red';
}
</script>
According to the above code, the positions of the three divs are roughly as follows: click on each div, and the entire div will turn red. Mainly, e.target returns the node triggered by the click.
(3) Method to prevent the browser's default behavior and prevent event propagation event.preventDefault(): This method prevents the browser from executing the default behavior of the current event. For example, after clicking a link, the browser jumps to the specified page; or after pressing the space bar, the page scrolls down a certain distance. event.stopPropagation(): This method stops the event from continuing to propagate in the DOM structure, preventing the triggering of listening functions defined on other nodes.
<body>
<div id="div2">2
<div id="div1">1
<a id="a" href="Baidu 2">My bright moon smells more and more want to smell</a>
</div>
</div>
</body>
<script>
var d2 = document.getElementById('div2');
var d1 = document.getElementById('div1');
var a = document.getElementById('a');
d2.onclick = function(e){
alert('d2');
}
d1.onclick = function(e){
alert('d1');
}
a.onclick = function(e){
//Stop event propagation e.stopPropagation();
alert('a');
//Prevent the browser's default behavior e.preventDefault();
}
</script>
Use the event object to implement a simple example: a div that follows the mouse (by modifying the XY value of the event object)
<body>
<div id="div2">2
<div id="div1">1
<a id="a" href="Baidu 2">My bright moon smells more and more want to smell</a>
</div>
</div>
</body>
<script>
var d2 = document.getElementById('div2');
var d1 = document.getElementById('div1');
var a = document.getElementById('a');
d2.onclick = function(e){
alert('d2');
}
d1.onclick = function(e){
alert('d1');
}
a.onclick = function(e){
//Stop event propagation e.stopPropagation();
alert('a');
//Prevent the browser's default behavior e.preventDefault();
}
</script>
Before clicking (no movement)
After clicking (follow the mouse) SummarizeThis is the end of this article about event objects in js. For more relevant js event objects, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: MySQL installation tutorial under Linux centos7 environment
>>: Exploring the Linux Kernel: The Secrets of Kconfig
Recommend
Nodejs plug-in and usage summary
The operating environment of this tutorial: Windo...
How to sort a row or column in mysql
method: By desc: Neither can be achieved: Method ...
Detailed explanation of docker entrypoint file
When writing a Dockerfile, include an entrypoint ...
Comparison of the efficiency of different methods of deleting files in Linux
Test the efficiency of deleting a large number of...
Introduction to install method in Vue
Table of contents 1. Globally registered componen...
Simple implementation of html hiding scroll bar
1. HTML tags with attributes XML/HTML CodeCopy co...
HTML+CSS project development experience summary (recommended)
I haven’t updated my blog for several days. I jus...
HTML+css to create a simple progress bar
1. HTML code Copy code The code is as follows: Ex...
How to install JDK 13 in Linux environment using compressed package
What is JDK? Well, if you don't know this que...
Linux operation and maintenance basic process management and environment composition analysis
Table of contents 1. Basic overview of the proces...
Goodbye Docker: How to Transform to Containerd in 5 Minutes
Docker is a very popular container technology. Th...
JavaScript commonly used array deduplication actual combat source code
Array deduplication is usually encountered during...
MySQL 8.0.24 installation and configuration method graphic tutorial
This article shares the installation tutorial of ...
Analysis of the process of configuring Alibaba Cloud proxy warehouse based on Nexus
The default remote repository of Nexus is https:/...
Tutorial on building svn server with docker
SVN is the abbreviation of subversion, an open so...