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
Native JS to achieve directory scrolling effects
Here is a text scrolling effect implemented with ...
HTML table tag tutorial (8): background image attribute BACKGROUND
Set a background image for the table. You can use...
Example of using javascript to drag and swap div positions
1 Implementation Principle This is done using the...
Let me teach you how to use font icons in CSS
First of all, what is a font icon? On the surface...
MySQL concurrency control principle knowledge points
Mysql is a mainstream open source relational data...
Tutorial on installing MYSQL5.7 from OEL7.6 source code
First, download the installation package from the...
SQL implementation LeetCode (185. Top three highest salaries in the department)
[LeetCode] 185. Department Top Three Salaries The...
Use CSS to switch between dark mode and bright mode
In the fifth issue of Web Skills, a technical sol...
Detailed explanation of MySQL master-slave replication practice - replication based on log points
Logpoint-based replication 1. Create a dedicated ...
MySQL 5.7 zip version (zip version) installation and configuration steps detailed
Preface: I reinstalled win10 and organized the fi...
Detailed explanation of MySQL database index
Table of contents 1. Introduction to MySQL Index ...
Detailed tutorial on installing Docker on CentOS 8
1. Previous versions yum remove docker docker-cli...
Detailed explanation of BOM and DOM in JavaScript
Table of contents BOM (Browser Object Model) 1. W...
Linux kernel device driver address mapping notes
#include <asm/io.h> #define ioremap(cookie,...
Detailed explanation of CentOS configuration of Nginx official Yum source
I have been using the CentOS purchased by Alibaba...