33 terms

77. JavaScript HTML DOM Events

STUDY
PLAY
What does HTML DOM allow js to do?
HTML DOM allows JavaScript to react to HTML events.
Reacting to Events
Reacting to Events
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.
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:
What is onclick event for?
if you click on an element which has onclick attribute the value will be executed.
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
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>
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.
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>
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.
HTML Event Attributes
HTML Event Attributes
What is an event attribute?
onclick=JavaScript
...
To assign events to HTML elements you can use event attributes.
Assign an onclick event to a button element:
<button onclick="displayDate()">Try it</button>
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.
Assign Events Using the HTML DOM
Assign Events Using the HTML DOM
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:
Assign an onclick event to a button element:
<script>
document.getElementById("myBtn").onclick = function(){ displayDate() };
</script>
...
In the example above, a function named displayDate is assigned to an HTML element with the id="myBtn".
When will the function be executed?
The function will be executed when the button is clicked.
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 onload and onunload events can be used to deal with cookies.
example of onload event
<body onload="checkCookies()">
The onchange Event
The onchange Event
...
The onchange event are often used in combination with validation of input fields.
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()">
The onmouseover and onmouseout Events
The onmouseover and onmouseout Events
...
The onmouseover and onmouseout events can be used to trigger a function when the user mouses over, or out of, an HTML element.
The onmousedown, onmouseup and onclick Events
The onmousedown, onmouseup and onclick Events
...
The onmousedown, onmouseup, and onclick events are all parts of a mouse-click.
...
First when a mouse-button is clicked, the onmousedown event is triggered, then, when the mouse-button is released, the onmouseup event is triggered, finally, when the mouse-click is completed, the onclick event is triggered.
YOU MIGHT ALSO LIKE...