Creating Scripts and Editing Event Handlers in HTML Designer

Article
10/12/2006

As you edit an HTML document in Visual Studio .NET, you can select elements and create functions that cause them to respond to user events. For example, you can select a button and add a function to an embedded <SCRIPT> that will run whenever that button is clicked. The HTML Designer automatically creates a <SCRIPT> block in your document if one does not yet exist, adds a blank event-handler function to your <SCRIPT>, and links the selected HTML element to this function. You can then edit this event-handler function as needed, adding arguments to perform such tasks as displaying Web pages, collecting data from forms, and constructing queries.

Setting the targetSchema DOCUMENT property

The targetSchema property of an HTML or XML document selects the Web browser for which the document will be designed. To run properly, client-side scripts generally require a Web browser that supports HTML 4.0 or later.

You can set the targetSchema property either from the Properties window or from the DOCUMENT Property Pages dialog box. For more information, see Setting the targetSchema Property of an HTML Document.

Setting the targetSchema property identifies the schema to be used by the integrated development environment (IDE) when completing and validating the markup of a document. To ensure that event handlers work properly, follow a Document Object Model (DOM) consistent with the targetSchema setting when referencing a document's elements and their attributes.

Setting the defaultClientScript DOCUMENT property

The defaultClientScript property of an HTML or XML document sets the default scripting language used for new client-side <SCRIPT> elements. You can set the defaultClientScript property either from the Properties window or from the DOCUMENT Property Pages dialog box. For more information, see Setting the defaultClientScript Property of an HTML Document.

Objects on your Web page respond to an event (for example, onClick) by calling event handler functions. You can pass values to such functions and use functions to return values and launch other events.

To create an onClick() event handler for a button

Open your Web page for editing in Design view.
Add a button element to your HTML page. For example, drag a button from the HTML Tab, Toolbox, and drop it onto your page.
Right-click on the button and select "View Client Script" from its shortcut menu.

An onclick instruction is added to the markup for the button, for example:

onclick="return Button1_onclick()"

If no <SCRIPT> block exists, one is created. The document switches to HTML view, with the selection point placed in the new script.

To create a blank event handler function

Open your Web page for editing.
In HTML view, locate the markup for an element in the <BODY> of your page. Here, for example, is the HTML markup for a newly-added button:
```
<INPUT id="Button1" onclick="return Button1_onclick();" type="button" value="Button">
```
At the top of the HTML editing window, select the name of the element from the left Client Objects & Events drop-down list. Select an event from the list on the right.

A new, blank handler function is added to the <SCRIPT> block in the <HEAD> of your document. If no <SCRIPT> block exists, one is created:
```
<SCRIPT id="clientEventHandlersJS" language="javascript">

```
</SCRIPT>

The id of this <SCRIPT> block identifies it as the default location for new client-side event handlers created in HTML Designer.

When you have added a blank event handler function to a <SCRIPT> block, you can then configure how the function will respond when the selected element receives this event.

To configure an event handler function

Place the insertion point between the braces ( { } ) of the function, and add arguments. To display lists of options for function arguments, press CTRL+SPACEBAR as you write them.
Save your HTML document.
With your document still open in the HTML editor, select Open With on the View menu.

The Open With dialog box opens.
Choose a Web browser to display your page and test your function.

Note Use a fully functional Web browser to test scripts. The View in Browser command on the File menu opens the HTML Designer preview browser. The internal Web browser has been simplified to display quickly. It does not support scripts and should not be used to test event-handler functions.

Example

Here is a simple event-handler function that displays a message when a button named "Button1" is clicked.

<SCRIPT id="clientEventHandlersJS" language="javascript"> <!-- function Button1_onclick() { alert("Hello, world"); } --> </SCRIPT>

For Further Information

For guidance on creating scripts and writing functions, see

Event Handling in HTML Elements Sample

Handling HTML Element Events

Implementing_DHTML_Behaviors_in_Script_Using_HTML_Components

Writing Event Handlers [Visual Basic]

Handling User Control Events

Creating Event Handlers in Web Forms Pages

Server Event Handling in Web Forms

Creating an Event Handler at Run Time in Web Forms Pages

For help in understanding how and when scripts work, see

Understanding the Event Model

ASP.NET Server Control Event Model

Client Script in Web Forms Pages

Using ADO with Scripting Languages

Marking Business Objects as Safe for Scripting

Microsoft Windows Script Technologies

For reference information on elements, properties, events, and functions, see

HTML Tab, Toolbox

DHTML References

DHTML Events

SCRIPT Element | script Object

targetSchema Property

defaultClientScript Property

JScript Language Reference

VBScript Language Reference

Share via

Creating Scripts and Editing Event Handlers in HTML Designer

Example

For Further Information

See Also

Additional resources