JavaScript事件三要素


事件三要素包含

事件源

 是指那個元素引發的事件。比如當你點擊博客園圖標的時候,會跳轉到博客園首頁。那么這個博客園圖標就是事件源。

再或者,可以這樣理解, 當你對某個元素執行動作的時候,會觸發一系列效果(動畫,跳轉....),那么這個元素就是事件源

 

事件

 事件是指執行的動作。

 例如,點擊,鼠標划過,按下鍵盤,獲得焦點。

 

事件驅動程序

 事件驅動程序即執行的結果。

例如,當你點擊博客園圖標的時候,會跳轉到博客園首頁。那么跳轉到博客園首頁就是事件的處理結果。

 

 

執行事件的步驟

 

  1. 獲取元素
  2. 綁定事件
  3. 書寫事件驅動程序

 

 

例如
全部代碼
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>點擊我有驚喜</button>
    <div id="box"></div>
    <script>
        var btn = document.getElementsByTagName("button")[0];
        var box = document.getElementById("box");

        btn.onclick =function () {
            box.innerHTML = "<img src=\"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516692944212&di=38c2e662673923e26603efe1da3d935d&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3Decfe83b9042442a7ba03f5e5b83bc827%2F728da9773912b31bc2fe74138d18367adab4e17e.jpg\" alt=\"\">";

        }
    </script>
</body>
</html>

  

 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM