Event-driven and event-handling for JavaScript

Source: Internet
Author: User
Tags html page

1. Basic Concepts

JavaScript is an object-based (object-based) language. This differs from Java in that Java is an object-oriented language. And based on the basic characteristics of the object is the use of event-driven (Event-driven). It is in the context of a graphical interface, making all input changes simple. Usually the action of a mouse or hotkey is what we call an event, and the action of a sequence of programs triggered by a mouse or hotkey is called an event-driven Driver. The event handler or function, which we call an event handler, is Handler.

2. Event Handling Program

The handling of object events in JavaScript is usually performed by functions (function). The basic format is the same as the function, and you can use all the functions described earlier as event handlers. The format is as follows:

Function event handler name (parameter table) {

Event-handling statement set;

......

}

3. Event-driven

Events in JavaScript event drivers are triggered by the action of a mouse or hotkey. It mainly has the following several events:

(1) Click event onclick

The onclick event is generated when the user clicks the mouse button. The event handler or code specified by the onclick is invoked to execute. Typically generated in the following basic objects:

button (Buttons object)

CheckBox (check box) or (Check list box)

Radio (radio buttons)

Reset buttons (important button)

Submit buttons (submission button)

For example, you can activate the change () file by using the following buttons:

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

After the onclick equals sign, you can use a function that you write as an event handler, or you can use internal functions in JavaScript. You can also use JavaScript code directly, and so on. Cases:

<input type= "button" value= "" Onclick=alert ("This is an example");

(2) onchange Change events

This event is sent when the character value is entered with the text or Texturea element, and the event is raised when an option state changes in the Select table item. Cases:

<Form>
<Input type="text" name="Test" value="Test" onCharge="check('this.test)">
</Form>

(3) Selected event Onselect

This event is raised when the text in the text or textarea object is highlighted.

(4) Get focus event onfocus

This event occurs when the user clicks text or textarea and a select object. The object becomes the foreground object at this time.

(5) Loss of focus onblur

When the text object or TextArea object and the Select object no longer have the focus and fall back to the background, the file is raised, and he is a corresponding relationship to the Onfocas event.

(6) Loading file onload

This event occurs when the document is loaded. OnLoad one role is to detect the value of a cookie at the first load of a document, and assign it to a variable, so that it can be used by the source code.

(7) Uninstall file OnUnload

Raises the OnUnload event when the Web page exits and updates the status of the cookie.

Ceshicx.htm

<title>一个JavaScript的测试程序</title>
<script language="JavaScript">
<!--
function kkk(){
do{
username=prompt("请问您是何方神圣,报上名来","");
}while(username=="")
document.write(username,",久仰大名,请多多关照!");
}
//-->
</script>
<body>
<INPUT type="button" value="你敢碰我吗?"name=button1 onClick="kkk()">
</body>

Figure 3-4 The beginning window

Description: The start page of this HTML page, shown in Figure 3-4, has only one element, that is, a button. If you do not set any events, there is no response when you click the button. But now, the onclick event of the click button is defined, and the event is given to the Scripting KKK (). Is the first step to achieving interaction. Then, after the user clicks the button, a dialog box with JavaScript as shown in Figure 3-5 appears in the browser, prompting the user to enter a name. At this point, just enter the name and click OK to see the browser's display as shown in Figure 3-6.

Figure 3-5 Hint window

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.