JavaScript event

 JavaScript event is an event. Designers use event handlers in the code to monitor the user’s Events behavior. Usually Event is used with functions to perform certain actions. The built-in JavaScript core of the browser itself Determine what actions the user produces, for example, click action to use onclick event to monitor, to change a field in the form to use onchange event to monitor, when the mouse moves over a block, to use onmouseover to monitor... etc. When the user's action occurs, it can trigger a specific function to execute. The above is the basic concept of JavaScript event. In principle, the standard writing of every event in JavaScript grammar is English lowercase, unless it is used in HTML Don’t worry about capitalization, otherwise, it’s recommended not to write onchange as onChange, it is likely that the script will not be executed. In addition, JavaScript Event itself also has abbreviations, but not every browser can support abbreviations, it is recommended to use standard writing , Here are a few reference examples.

JavaScript event example 1: onclick

<script language="javascript">
function ShowToday(){
var Today=new Date();
alert("Today's date is" + Today.getFullYear()+ "year" + (Today.getMonth()+1) + " Month" + Today.getDate() + "Day");
}
</script>
<input type="button" onclick="ShowToday()" value="Today's day of the week">

Example output

JavaScript onclick is an event with a very high usage rate. In the example, a button ( button ) is prepared and an onclick event listener is added. When the button of this day of the week is selected, the ShowToday function will be triggered. Through " Get Today's Date " The technique will alert the result to a dialog window.

JavaScript event example two, onblur

<script language="javascript">
function TestOnblur(){
    alert('test onblur');
}
</script>
<input type="text" onblur="TestOnblur()">

Example output

Onblur means when an element is out of focus, what is out of focus? It can be said that when the user’s mouse cursor is moved away from the element, the browser will determine that the original element has been out of focus when the user clicks on other elements. The situation is similar to that when a user fills in a form element. Click the cursor to the next field and continue to fill in the data. At this time, the field that was originally filled in is out of focus. Use onblur to monitor the input field and you will find the event. In fact, onblur is not entirely limited by monitoring the mouse to move to the next field, but when the mouse clicks on other parts of the webpage, the original field is out of focus. In this example, when the mouse moves out of the field, it will The TestOnblur function is triggered when found by onblur .

JavaScript event example three, onchange

<script language="javascript">
function TestOnchange(){
    alert('test onchange');
}
</script>
<select onchange="TestOnchange()">
<option>option A</option>
<option>option B </option>
</select>

Example output

 Option A Option B 

The onchange event is when an element changes. For example, the drop-down menu is an element that is easy to change. When a netizen selects other items from the drop-down menu, it will be monitored by onchange . Usually this behavior pattern can be used to make Jump page menu, please refer to this example: JavaScript select onChange Jump page menu .

JavaScript event example 4: onmouseover

<script language="javascript">
function ChangeBgColor(){
    document.getElementById("TBox").style="width:200px;height:60px;background-color:#FFC9C9;";
}
</script>
<div onmouseover ="ChangeBgColor()" id="TBox" style="width:200px;height:60px;background-color:#FFCC6E;">
Mouse over here will change the color
</div>

Example output

Mouse over here will change the color

onmouseover is one of the mouse events. It represents when the mouse moves over an element. In this example, when the mouse moves over the DIV block, the ChangeBgColor function will be triggered to change the background color of the DIV block ( Background-color ) change, onmouseover can also be used on other different elements in the web page.

JavaScript event common event table

Event	Description
onclick	When the user clicks on an element, for example, select an option or button ( button ).
onchange	When the element changes, such as when selecting other items in the select option .
onblur	When the cursor loses focus, that is, when clicking other areas, it is usually used to fill in a field of the form .
ondblclick	Clicking a specific element twice in a row is usually used in situations that require specific confirmation.
onfocus	When web page elements are locked, such as textarea , input text .
onload	The function is triggered immediately after the page is loaded.
onmousedown	Mouse event, when the mouse button is pressed.
onmouseover	Mouse event, when the mouse cursor moves over an element or block.
onmousemove	Mouse events, when the mouse cursor moves.
onmouseout	Mouse event, when the mouse moves out of an element or block.
onmouseup	Mouse event, when the mouse button is released.
onunload	When netizens are about to leave the page.