The javascript event handling process is divided into several steps

Javascript event processing process is divided into three steps: 1. The event occurs; 2. Start the event handler; 3. The event handler reacts. Among them, in order for the event handler to be started, the corresponding event must be called through the specified object, and then the event handler is called through the event.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

JavaScript is an object-based language, and one of its most basic features is event-driven. It can simplify all operations in the graphical interface environment. Actions via the mouse or hotkeys are called events. A series of program actions triggered by the mouse or hot keys is called an event driver, and the program or function that processes events is called an event handler.

Overview of events and event processing

Event processing is a very important link in object-oriented programming. It can make the logical structure of the program clearer and make The program is more flexible and improves program development efficiency.

The process of event processing is divided into three steps:

• ①The event occurs;

• ②Start the event handler;

• ③The event handler reacts.

Among them, in order for the event handler to be started, the corresponding event must be called through the specified object, and then the event handler is called through the event. Event handlers can be any JavaScript statements, but generally use specific custom functions to handle events.

Events and event names

Events are page actions that can be responded to through scripts. Events occur when the user presses the mouse button, submits a form, or even moves the mouse on the page. An event handler is a piece of JavaScript code that is always associated with a specific part of the page and a certain event. Event handlers are called when an event associated with a specific part of the page occurs.

Most event names are descriptive and easy to understand. For example, click.submit.mousecover, etc. You can guess its meaning through the name. However, there are also a few events whose names are difficult to understand, such as blur (literally meaning "blur" in English), which means that a field or a form has lost focus. Generally, the naming principle of event handlers is to add the prefix on before the event name. For example, for the click event, the handler is named onclick.

Common Events in JavaScript

                                                                                              JavaScript related events

##onerrorThis event is triggered when an error occursonloadThis event is triggered when the page content is completed (that is, the page loading event)onresizeThis event is triggered when the browser window size is changedonunloadTriggered when the current page will be changed This event

	Events	illustrate
Mouse and keyboard events	onclick	This event is triggered when the mouse is clicked
	ondblclick	This event is triggered when the mouse is double-clicked
	onmousedown	This event is triggered when the mouse is pressed
	onmouseup	This event is triggered when the mouse is pressed and released
	onmouscover	When the mouse moves above the range of an object This event is triggered when
	onmousemove	This event is triggered when the mouse moves
	onmouscout	When the mouse This event is triggered when leaving the scope of an object
	onkeypress	This event is triggered when a key on the keyboard is pressed and released
	onkeydown	This event is triggered when a key on the keyboard is pressed
	onkeyup	When a key on the keyboard is pressed This event is triggered when pressed and released
Page related events	onabort	The picture is downloaded by the user This event is triggered when an interruption occurs
	onbeforeunload	This event is triggered when the content of the current page is about to be changed

onblurThis event is triggered when the current element loses focusonchangecurrent This event is triggered when an element loses focus and the element's content changesonfocusThis event is triggered when an element gains focusonresetThis event is triggered when the RESET attribute in the form is activatedonsubmitThis event is triggered when a form is submitted onbounceThis is triggered when the content in Marquce moves outside the Marquce display range EventonfinishThis event is triggered when the Marquce element completes the content that needs to be displayed. This event is triggered when the Marquce element starts to display the contentonstartThis event is triggered when the Marquce element starts displaying content onbeforecopyThis event is triggered when the currently selected content on the page is to be copied to the clipboard of the viewer's system onbeforecutWhen part or all of the content on the page is copied This event can be fired when cutting to the viewer's system clipboardonbeforeeditfocusThis event is triggered when the current element is about to enter the editing stateonbeforepasteThis event is triggered when content is to be pasted from the viewer's system clipboard onto the pageonbeforeupdate Notify the target object when the viewer pastes the content in the system clipboardoncontextmenuWhen the viewer presses the right button of the mouse and the menu appears or the page is triggered by keyboard keys This event is triggered when the menu is displayedoncopyThis event is triggered when the currently selected content on the page is copied##oncut ondragondragendondragenteondragleaveondragoverondragstartondroponlosecaptureonpasteonselectonselectstart

	Event	Description
##Form related events
Rolling subtitle event
Edit event
	This event is triggered when the currently selected content on the page is cut
	This event is triggered when an object is dragged (Activity event)
	This event is triggered when the mouse drag ends, that is, when the mouse button is released
	This event is triggered when the object is dragged by the mouse into its container scope
	When the object is dragged by the mouse This event is triggered when the dragged object leaves the scope of its container
	This event is triggered when the dragged object is dragged within the scope of another object's container Event
	This event is triggered when an object is to be dragged
	This event is triggered when the mouse button is released during a dragging process
	This event is triggered when the element loses the selection focus formed by mouse movement
	This event is triggered when the content is pasted
	When the text content is pasted This event is triggered on selection
	This event is triggered when selection of text content will start to occur

onafterupdateThis event is triggered when the data completes the transfer from the data source to the object##oncellchange ondataavailableondatasetchangedondatasetcompleteonerrorupdateData binding eventonrowexitonrowsdeleteonrowsinserted##External eventsThis event is triggered when the document is printedonbeforeprintThis event is triggered when the document is about to be printedonfilterchangeThis event is triggered when the filter effect of an object changesonhelpThis event is triggered when the viewer presses the F1 key or clicks the browser's help menuonpropertychangeThis event is triggered when one of the properties of the object changes EventonreadystatechangeThis event is triggered when the initialization property value of the object changes

	Event	Description
##Data binding event
	This event is triggered when the data source changes
	This event is triggered when the data reception is completed
	This event is triggered when the data source changes
	When all valid data from the data source has been read This event is triggered when
	When the data transfer is canceled using the onbeforeupdate event trigger, instead of the afterupdate event
onrowenter	This event is triggered when the data of the current data source changes and there is new valid data
	This event is triggered when the data of the current data source will change
	This event is triggered when the current data record will be deleted
	This event is triggered when the current data source is about to insert a new data record
onafterprint

Call of event handler

When using event handlers to operate the page, the most important thing is how to specify the event handler through the event of the object.

1. In JavaScript

To call an event handler in JavaScript, you first need to obtain a reference to the object to be processed, and then assign the processing function to be executed to the corresponding event.

Code:

<input id="save" name="bt_save" type="button" value="保存" />
<script language="JavaScript" type="text/javascript">
	var b_save=document.getElementById("save");
	b_save.onclick=function(){
		alert("单击了保存按钮");
	}
</script>

2. In HTML

Assign event handling in HTML Program, you only need to add the corresponding event in the HTML tag and specify the code or function name to be executed.

<input name="bt_save" type="button" value="保存" onclick="clickFunction();"/>
<script language="JavaScript" type="text/javascript">
	function clickFunction(){
		alert("单击了保存按钮");
	}
</script>

【Related recommendations:

javascript video tutorial

,

programming video】

The above is the detailed content of The javascript event handling process is divided into several steps. For more information, please follow other related articles on the PHP Chinese website!