javascript addeventlistener code example
Example 1: js addeventlistener
document.getElementById("example").addEventListener('click', function() {
alert('Click');
});
Example 2: javascript addeventlistener
var element = document.getElementById("#id");
element.addEventListener('click', function(){
console.log("click");
});
Example 3: js addeventlistener
var element=document.getElementById("some_id");
var listener=element.addEventListener('click',function(event){
});
Example 4: javascript addeventlistener
$("#id / .class").on('click', function(){
console.log("click");
});
Example 5: addEventListener
<body style="height: 5000px">
<style>
body,
html {
scroll-snap-type: y proximity;
}
.snaptarget {
scroll-snap-align: start;
position: relative;
top: 200px;
height: 200px;
background-color: green;
}
</style>
<div class="snaptarget"></div>
</body>
Example 6: addEventListener
<body style="height: 5000px">
<script>
function snap(destination) {
if (Math.abs(destination - window.scrollY) < 3) {
scrollTo(window.scrollX, destination);
} else if (Math.abs(destination - window.scrollY) < 200) {
scrollTo(window.scrollX, window.scrollY + ((destination - window.scrollY) / 2));
setTimeout(snap, 20, destination);
}
}
var timeoutId = null;
addEventListener("scroll", function() {
if (timeoutId) clearTimeout(timeoutId);
timeoutId = setTimeout(snap, 200, parseInt(document.getElementById('snaptarget').style.top));
}, true);
</script>
<div id="snaptarget" class="snaptarget" style="position: relative; top: 200px; width: 100%; height: 200px; background-color: green"></div>
</body>