#24 JS: HTML DOM Events - Part 2 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 24

Modern Web

Learn & Play JavaScript -- Entry-Level Front-End Web Development系列第 24 篇

#24 JS: HTML DOM Events - Part 2

13th鐵人賽 front-end frontend event javascript

Vida Lin

2021-09-24 19:01:52

1007 瀏覽

分享至

For the topic today, I can't fully understand the logic that it works.
So forgive me if I don't explain that clearly. It takes time to digest the knowledge before outputting an understandable article.

Simple example of event handling

<!DOCTYPE html>
<html>
<head>
<title>JS - HTML DOM Events - Part 2-1</title>
<script type="text/javascript">
function over(element){
    element.style.color="orange";
}
function out(element){
   element.style.color="black"; 
}
</script>
</head>
<body style="font-family:Arial";>
    <button onclick="alert('Clicked');">Click</button> <!-- Registering an event -->
    <span onmouseover="over(this);"
        onmouseout="out(this);">Get your cursor here to know my real color.</span>
    <div onmouseover="over(this);"
        onmouseout="out(this);">Closer, closer, closer!</div>
        
</body>
</html>

When it comes to event handling, “this” represents the ..., ... objects.

Advanced example of event handling

<!DOCTYPE html>
<html>
<head>
<title>JS - HTML DOM Events - Part 2-2</title>
<script type="text/javascript">
// Advanced way to register an event dynamically through JS.
function init(){ //init = initialization
    var btn=document.getElementById("btn");
    var handler=function(){ // prepare a event listener, aka a event handler
        alert("Clicked");
    }
    btn.addEventListener("click"/*event name*/, handler);
}
</script>
</head>
<body onload="init();">  <!-- Statically register the "load" event on <body>. Onload event will be initialized once the webpage is fully loaded. -->
    <button id="btn">Click</button>
 
        
</body>
</html>

Music of Today: The List by Moonchild

Like/Share/Follow

Feel free to comment and share your ideas below to learn together!
If you guys find this article helpful, please kindly do the writer a favor — LIKE this article.