当前位置：网站首页>Events in JS

Events in JS

2022-06-11 09:38:00 【Snatch bamboo shoots 123】

Catalog

Page Events
Mouse events
Keyboard events
Form Events
Edit event

Events are actions performed when a user accesses a page , When the browser detects an event , It can trigger the... Associated with this event JavaScript object , These objects are called event handlers

Page Events

event	describe
onload	When the user enters the page and all page elements are loaded , Will trigger this event . E.g. advertising pop-up window
onbeforeunload	Triggered before the user starts leaving the page （ For example, a pop-up window pops up when a user is about to leave a site without saving its content ）

Mouse events

Many interactions between users and pages are done through the mouse ,

event	describe
onclick	Click events
onmouseover	Move in event
onmouseout	Remove Events
onmousemove	Mobile event
onmousedown	The event triggered when the mouse is pressed
onmouseup	The event triggered when the mouse is released

Be careful ： arbitrarily HTML Tag elements can be added to click events

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> This is a html5 demo</title>
    <style> p{
       font-size: 20px; width: 50%; } </style>
</head>
<body>
	<script> window.onload=function(){
       let option=document.getElementById("content"); // Mouse click  option.onclick=function(){
       alert(" This is a prompt box "); } // Mouse migration  option.onmouseover=function(){
       this.style.backgroundColor="#1ea21e" } // Mouse removal  option.onmouseout=function(){
       this.style.backgroundColor="#a26321" } } </script>
	<p id="content"> This is a paragraph </p>
</body>
</html>

Chrome Browser run results
Insert picture description here

Keyboard events

event	describe
onkeydown	Press the keyboard
onkeyup	The keyboard is released

Form Events

event	describe
onfoucs	Event triggered when focus is obtained
onblur	Events triggered when focus is lost
onchange	onfocus and onblur The two events are often used together

such as , When the user is ready to enter content in the text box , The text box gets the cursor , It will trigger onfocus event ; When the text box loses the cursor , It triggers onblur event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> This is a html5 demo</title>
    <script> window.onload=function(){
       let myinput=document.getElementById("search") myinput.onfocus=function(){
       if (this.placeholder==" use Baidu Search , You will know "){
       this.placeholder="" } } myinput.onblur=function(){
       if(this.placeholder==""){
       this.placeholder=" use Baidu Search , You will know " } } } </script>
    <style> input{
       height: 25px; } </style>

</head>
<body>
	<input id="search" type="text" placeholder=" use Baidu Search , You will know "/>
	<input id="Button" type="button" value=" Search for "/>
</body>
</html>

Chrome Browser run results
Insert picture description here

About focus
Not all HTML Every element has a focus event , Generally has “ Gain and lose focus ” There are only two elements of ： Form elements and hyperlinks . In fact, focus events are generally used for single line text boxes and multi line text boxes

Edit event

Prevent page content from being copied

// After the user clicks the copy option of the right mouse button , You can't get the content on the pasted version 
document.oncopy=function(){
    
	return false;
}

Prevent page content from being selected

// User cannot select content 
document.onselectstart=function(){
    
	return false;
}

No right mouse button

// Just can't right-click , But you can use shortcut keys 
document.oncontextmenu=function(){
    
	return false;
}

原网站

版权声明
本文为[Snatch bamboo shoots 123]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/162/202206110914078225.html