Event Listeners
Video
JavaScript Notes
JavaScript
// JavaScript Event Listeners
// Event-driven programming: your program waits for events and uses them as triggers to run the next function(s)
document.addEventListener('DOMContentLoaded', init);
function init ( ) {
let btn = document.getElementById('btn');
let lnk = document.getElementById('lnk');
let txt = document.getElementById('txt');
txt.addEventListener('input', ev => {
console.log(ev.type, ev.target, ev.target.value);
} );
txt.addEventListener('change', ev => {
console.log(ev.type, ev.target, ev.target.value);
} );
txt.addEventListener('blur', ev => {
console.log(ev.type, ev.target, ev.target.value);
} );
btn.addEventListener('click', buttonClicked);
lnk.addEventListener('click', linkClicked);
}
function buttonClicked(ev){
console.log(ev.type, ev.target, ev.currentTarget);
}
function linkClicked(ev){
ev.preventDefault; // stop the link from being followed
console.log(ev.type, ev.target, ev.currentTarget);
}
// object.addEventListener(event, function)
myDiv.addEventListener('click', doSomething)
function doSomething(ev){
console.log(ev.type) // click
console.log (ev.target) //
}
Feedback
Submit and view feedback