🔧 Difference between Java Script events and Java Script ES6 Event handlers!!
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
**HOW TO MAKE A JAVASCRIPT EVENT
**To create an event with javascript, we can add attributes with the event names above, to the html element that we want to give an event for example.
JavaScript events can be defined as something the user does in a website or browser. This can be a multitude of different things such as clicking a button, closing the browser, hovering over an element on the browser, etc.
onChange Event :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function msg(x){
document.bgColor=x;
}
</script>
</head>
<body>
<select onchange="msg(this.value)">
<option value="">Select Color</option>
<option value="Red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</body>
</html>
onChange, Event With DOM :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="selCourse" onchange="msg()">
<option>React JS</option>
<option>JavaScript</option>
<option>Node JS</option>
<option>Angular</option>
</select>
<script>
function msg() {
// alert("hi..")
var txt = document.getElementById('selCourse').value;
alert(txt);
}
</script>
</body>
</html>
onSubmit Event :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
function msg(){
alert("form submited")
}
</script>
</head>
<body>
<form onsubmit="msg()">
<button>
Submit
</button>
</form>
</body>
</html>
*onSubmit Event, DOM :: *
<!DOCTYPE html>
Document
<form onsubmit="msg(event)" id="form">
<input type="text" id="username">
<input type="password" id="password">
<button>submit</button>
</form>
<script>
function msg(e){
e.preventDefault()
alert("form submited..")
var username = ocument.getElementById('username').value
var pass = document.getElementById('password').value
console.log(username);
console.log(pass)
}
</script>
</body>
</html>
**Adding Event Listener
**The addEventListener() method attaches an event handler to the specified element.The addEventListener() method attaches an event handler to an element without overwriting existing event handlers.
You can add many event handlers to one element.
You can add many event handlers of the same type to one element, i.e two "click" events.
You can add event listeners to any DOM object not only HTML elements. i.e the window object.
The addEventListener() method makes it easier to control how the event reacts to bubbling.
When using the addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup.
You can easily remove an event listener by using the removeEventListener() method.
The first parameter is the type of the event (like "click" or "mousedown" or any other HTML DOM Event.
<body>
<button id="myBtn">Try it</button>
<script>
function myFunction() {
alert ("Hello World!");
}
document.getElementById("myBtn").addEventListener("click", myFunction);
</script>
</body>
OR
<br> document.getElementById("myBtn").addEventListener("click", function() {<br> alert("Hello World!");<br> });<br>
*Add Alert Date :: with addEventListener
*
<button id="dte">Date is..</button>
<script>
var today = new Date();
document.getElementById("dte").addEventListener("click",function(){
alert(today);
})
</script>
</body>
*onClick event with addEventListener
*
<!DOCTYPE html>
<head>
<title>submit form </title>
</head>
<body>
<button id="btn">
Submit
</button>
<script>
var btn = document.getElementById("btn");
btn.addEventListener('click', function () {
alert("this is alert message");
})
</script>
</body>
</html>
*onClick -onChange event with addEventListener
*
<!DOCTYPE html>
<head>
<title>submit form </title>
</head>
<body>
<select id="change">
<option>this is demo text</option>
<option>this is demo two</option>
<option>this is demo three</option>
<option>this is demo four</option>
</select>
<button id="btn">
Submit
</button>
<script>
// onclick Handelor
var btn = document.getElementById("btn");
btn.addEventListener('click', function () {
alert("this is alert message");
})
// onChange Handelor
var change = document.getElementById("change");
change.addEventListener('change',function(){
console.log(change.value);
})
</script>
</body>
</html>
*onSubmission with addEventListener
*
<!DOCTYPE html>
submit form
<form id="form">
<input type="text" id="username" placeholder="username" required />
<input type="email" id="email" placeholder="email" required />
<button value="register">
Submit
</button>
</form>
<script>
var form = document.getElementById("form");
form.addEventListener('submit',function(e){
event.preventDefault()
var username = ocument.getElementById("username").value
console.log(username)
var email = document.getElementById("email").value
console.log(email)
})
</script>
</body>
</html>
🔧 Registering Handlers and Handling Events
📈 32.57 Punkte
🔧 Programmierung
📰 Difference-in-Difference 101
📈 22.89 Punkte
🔧 AI Nachrichten