77. JavaScript HTML DOM Events
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: