Javascript Events
Events are things, which happen with HTML or Javascript variable.
Javascript can catch (react) that thing (events).
Javascript Events
Javascript events can be triggered by the user or by the browser. Let's imagine a problem, that you need to call a function, when the HTML tag clicked or any other events.
To explain it, you must know, that you can use Javascript Events in two ways.
1) With Html Tags
2) With Javascript Codes
Here is the syntax of using events.
<any-tag any-event="Javascript code">
object.[any-event]=function(){myScript}; object.addEventListener("[any-event]", myScript); Let's make an example.
<!DOCTYPE html>
<html>
<body>
<button onclick="getElementById('element').innerHTML='click-event'">Click Me</button>
<p id="element">Test me</p>
</body>
</html>Javascript has a very long list for Events. We'll try to show you the basics, which you will need.
This is the HTML tag events list
Mouse Events
| Attribute | Value | Description |
|---|---|---|
| onclick | script | Fires on a mouse click on the element |
| ondblclick | script | Fires on a mouse double-click on the element |
| ondrag | script | Script to be run when an element is dragged |
| ondragend | script | Script to be run at the end of a drag operation |
| ondragenter | script | Script to be run when an element has been dragged to a valid drop target |
| ondragleave | script | Script to be run when an element leaves a valid drop target |
| ondragover | script | Script to be run when an element is being dragged over a valid drop target |
| ondragstart | script | Script to be run at the start of a drag operation |
| ondrop | script | Script to be run when dragged element is being dropped |
| onmousedown | script | Fires when a mouse button is pressed down on an element |
| onmousemove | script | Fires when the mouse pointer is moving while it is over an element |
| onmouseout | script | Fires when the mouse pointer moves out of an element |
| onmouseover | script | Fires when the mouse pointer moves over an element |
| onmouseup | script | Fires when a mouse button is released over an element |
| onmousewheel | script | Deprecated. Use the onwheel attribute instead |
| onscroll | script | Script to be run when an element's scrollbar is being scrolled |
| onwheel | script | Fires when the mouse wheel rolls up or down over an element |
Form Events
| Attribute | Value | Description |
|---|---|---|
| onblur | script | Fires the moment that the element loses focus |
| onchange | script | Fires the moment when the value of the element is changed |
| oncontextmenu | script | Script to be run when a context menu is triggered |
| onfocus | script | Fires the moment when the element gets focus |
| oninput | script | Script to be run when an element gets user input |
| oninvalid | script | Script to be run when an element is invalid |
| onreset | script | Fires when the Reset button in a form is clicked |
| onsearch | script | Fires when the user writes something in a search field (for <input="search">) |
| onselect | script | Fires after some text have been selected in an element |
| onsubmit | script | Fires when a form is submitted |
Keyboard Events
| Attribute | Value | Description |
|---|---|---|
| onkeydown | script | Fires when a user is pressing a key |
| onkeypress | script | Fires when a user presses a key |
| onkeyup | script | Fires when a user releases a key |
Lets make some examples.
<!DOCTYPE html>
<html>
<body>
<p>Here is W3docs.com keypress Events exmple</p>
<input type="text" onkeypress="myFunction()">
<script>
function myFunction() {
alert("Hello onkeypress event");
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<body>
<button ondblclick="myFunction()">W3docs.com Dbclick Event</button>
<p id="element">Text will change</p>
<script>
function myFunction() {
document.getElementById("element").innerHTML = "Hello World";
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<body>
<p id="element" onmousedown="mDown()" onmouseup="mUp()">
The text will be colored when you click on it
</p>
<script>
function mDown() {
document.getElementById("element").style.color = "blue";
}
function mUp() {
document.getElementById("element").style.color = "red";
}
</script>
</body>
</html>
0 Comments
CAN FEEDBACK
Emoji