77. JavaScript HTML DOM Events

Pataasin ang iyong marka sa homework at exams ngayon gamit ang Quizwiz!

What is onclick event for?

if you click on an element which has onclick attribute the value will be executed.

Why do we use this. in the code below?

innerHTML is a property so we always have to tell the owner of the property. properties can not be accessed without using their owner.

What can happen when an event occur?

A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.

Assign Events Using the HTML DOM

Assign Events Using the HTML DOM

example of onload event

<body onload="checkCookies()">

Assign an onclick event to a button element:

<button onclick="displayDate()">Try it</button>

In this example, the content of the <h1> element is changed when a user clicks on it:

<html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body> </html>

In this example, a function is called from the event handler:

<html> <body> a this valueje a h1 itt here. <h1 onclick="changeText(this)">Click on this text!</h1> itt hivjuk meg a functiont. <script> function changeText(id) { id.innerHTML = "Ooops!"; itt declaráljuk a functiont. } </script> </body> </html>

Below is an example of how to use the onchange. The upperCase() function will be called when a user changes the content of an input field.

<input type="text" id="fname" onchange="upperCase()">

Assign an onclick event to a button element:

<script> document.getElementById("myBtn").onclick = function(){ displayDate() }; </script>

What does HTML DOM allow js to do?

HTML DOM allows JavaScript to react to HTML events.

HTML Event Attributes

HTML Event Attributes

What are the examples of HTML events?

When a user clicks the mouse When a web page has loaded When an image has been loaded When the mouse moves over an element When an input field is changed When an HTML form is submitted When a user strokes a key

What happens in this code? <button onclick="displayDate()">Try it</button>

In the example above, a function named displayDate will be executed when the button is clicked.

Reacting to Events

Reacting to Events

The HTML DOM allows you to assign events to HTML elements using JavaScript:

The HTML DOM allows you to assign events to HTML elements using JavaScript:

When will the function be executed?

The function will be executed when the button is clicked.

The onchange Event

The onchange Event

The onload and onunload Events

The onload and onunload Events

When are the onload and onunload events triggered?

The onload and onunload events are triggered when the user enters or leaves the page.

What do we use the onload for?

The onload event can be used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.

The onmousedown, onmouseup and onclick Events

The onmousedown, onmouseup and onclick Events

The onmouseover and onmouseout Events

The onmouseover and onmouseout Events

Mi az előnye this használatának az előbbi esetben?

igy csak egyszer kell afunction definiálni és bármelyik elementre hasznáható a function call mivel a this-t tartalmazza amelynek a valueje aszerint változik hogy melyik elementben van.

What is an event attribute?

onclick=JavaScript

How to add JavaScript code to an HTML event attribute?

onclick=JavaScript To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute:


Kaugnay na mga set ng pag-aaral

311L module 2 (CP quizzes & rationales)

View Set

CompTIA 220-1002 (V 11.0) letters only for definition

View Set

STAAR 8th Grade Science-Chemistry Review tutorial 1

View Set

Chapter 47: Lipid-Lowering Agents

View Set