Javascript events and event processing, javascript events

Javascript events and event processing, javascript events

In js, the event processing process is divided into three steps:

1. Events

2. Start the event handler

3. Event Handlers respond

Event handler calls

1. In javascript

To call the event handler in javascript, you must first obtain the reference of the object to be processed, and then assign the processing function to the corresponding event.

2. In html

To assign an event handler in html, you only need to add the corresponding event to the html Tag and specify the code or function name to be executed.

DOM event model:

The DOM structure is a tree structure. When an HTML element generates an event, the event will be directly transmitted in the path between the element node and the root node. All nodes passing through the path will receive the event, this propagation process is called a DOM event stream.

Javascript events

(1) Click Event onClick
An onClick event is generated when you click the mouse button. At the same time, the event handler or code specified by onClick will be called and executed. Usually generated in the following basic objects:
Button (button Object)
Checkbox (check box) or (check list box)
Radio (single button)
Reset buttons (important button)
Submit buttons (submit button)
For example, you can use the following buttons to activate the change () file:

<Form>
<Input type = "button" Value = "" onClick = "change ()">
</Form>

After the onClick equal sign, you can use your own functions as the event processing program, or use internal functions in JavaScript. You can also directly use JavaScript code. Example: <Input type = "button" value = "" onclick = alert ("this is an example ");

(2) onChange event
This event is triggered when the input character value of the text or texturea element is changed, and this event is also triggered when the status of an option in the select Table item changes. Example:
<Form>
<Input type = "text" name = "Test" value = "Test" onCharge = "check ('this. test)">
</Form>
(3) onSelect event
This event is triggered when the Text in the Text or Textarea object is highlighted.
(4) Get the focus event onFocus
This event is generated when you click Text, textarea, and select objects. In this case, the object becomes the foreground object.
(5) loss of focus onBlur
When a text object, textarea object, and select object no longer have the focus and return to the background, this file is triggered and corresponds to the onFocas event.
(6) load the file onLoad
This event is generated when a document is loaded. OnLoad is used to detect the cookie value when a document is loaded for the first time, and assign a value to it using a variable so that it can be used by the source code.
(7) uninstall the file onUnload
When the Web page exits, the onUnload Event is triggered and the Cookie status can be updated.

JavaScript events and event handlers

Question 1

<Input type = "text" id = "Number1" name = "Number1">
<Input type = "text" id = "Number1" name = "Number2">
<Input type = "button" name = "MAX" value = "max" onclick = "alert (Math. max (document. getElementById ('number1 '). value, document. getElementById ('number2 '). value) "/>

2nd questions

<Form name = "form1" action = "#" onsubmit = "return check ()" method = "POST">
Last name: <input type = "text" name = "familyname" value = ""/> <br/>
Name: <input type = "text" name = "firstname" value = ""/> <br/>
Age: <input type = "text" name = "age" value = "/> <br/>
Weight: <input type = "text" name = "weight" value = ""/> <br/>
<Input type = "submit" value = "submit"/>
</Form>
<Script type = "text/javascript">
Function check (){
Var o = document. form1;
If (o. familyname. value = "" | o. firstname. value = "")
{
Alert ("the last name or name cannot be blank"); return false;
}
If (o. age. value <17 ){
Alert ("age must be greater than 17"); return false;
}
If (o. weight. value <80 ||o. weight. value> 300 ){
Alert ("the weight must be between 80 and 300"); return false;
} ...... Remaining full text>