JavaScript事件三要素（小案例實現）
阿新 • • 發佈：2018-11-13
js的基礎為HTML與CSS，那麼在實現對他們進行一些互動操作時我們首先要明白的是事情三要素
事件三要素：
1.事件源（你是要對什麼東西進行操作）
2.事件（你要做什麼實現所要的互動效果）
3.處理函式（在事件進行後你要目標變成什麼樣子）
案例：
下面小編舉一個很簡單的例子去根據事件三要素來進行操作（非常簡明的一個例子那麼我們只需要實現點選按鈕去實現操作）：
對於像小編一樣初學js的同學在之後實戰中三要素有助於我們去理解去實際操作，
那麼我們先分析該事件三要素
事件源：無非就是該盒子
事件：滑鼠點選按鈕
處理函式：按意願去對盒子進行更改
同樣我們看生活中例項1(京東站點一個廣告欄條點選×會消失)：
那麼同樣事件具有三要素。我們以：事件源.事件=處理函式 實現js的互動效果。
那麼小編先將自己那個盒子案例原始碼附上：
<head> <meta charset="UTF-8"> <title>JS小案例</title> </head> <style type="text/css"> .demo1{ width: 200px; height: 200px; background-color: red; //給盒子定義一個初始化狀態 } </style> <body> <div class="demo1" id="demo"></div> <button id="btn">點選改變寬度</button> <button id="btn1">點選改變背景顏色</button> <script type="text/javascript"> var demo=document.getElementById("demo"); //以document的getid方法去獲取物件 var btn=document.getElementById("btn"); var btn1=document.getElementById("btn1"); btn.onclick=function() { demo.style.width="400px"; } btn1.onclick=function () { demo.style.backgroundColor="pink"; } </script> </body> </html>
對此介紹主要是瞭解js的實現給一個很直觀的體驗。
那麼這邊附上一個事件表（當然不是全部只是一些常用常見的）：
