Adding JavaScript events to web pages

You can use the Quick Edit view to add or edit JavaScript events to your web pages.

Before you begin

Create a web page.
Add a tag to the page, for example a button.
Open the Quick Edit view if it is not already open (Window > Show View > Quick Edit in the Web perspective).

Procedure

Select an event in the event pane (the left pane) of the Quick Edit view. For example, select an onclick event.
To add JavaScript directly to the attribute for the event, type the JavaScript code in the editor pane of the Quick Edit view. For example, if you type alert('x') in the Quick Edit view for the onclick event of a command button tag, the JavaScript code is added as the value for the onclick event:
```
<h:commandButton onclick="alert('x')">
```
To add a JavaScript function to an event, click the Function check box and then click in the editor pane of the Quick Edit view. A function, for example func1 is automatically added and is referenced in the following places:
- An attribute is added to the tag, for example <h:commandButton onclick="return func_1(this, event);"
- Comments are added to the editor pane of the Quick Edit view:
```
//use 'thisObj' to refer directly to this component instead of keyword 'this'
//use 'thisEvent' to refer to the event generated instead of keyword 'event'
```
- A function is added to the <script> tag inside the <head> of the page:
```
<script type="text/javascript">
function func_1(thisObj, thisEvent) {
//use 'thisObj' to refer directly to this component instead of keyword 'this'
//use 'thisEvent' to refer to the event generated instead of keyword 'event'
}
```
You can also type the function name or click Browse to select an existing function in the web page or create a new function:
1. In the Select Function window, select an existing function or create a new function by clicking the New function button.
2. In the Add Function window, enter the name of the new function and click OK.
3. You can edit the function parameters in the Calling Parameters field.
4. Click OK.
Select the next tag to which you want to add a scripted event or select another event, and repeat the procedure.

Feedback