Day11:操作HTML （二）

第 12 屆 iThome 鐵人賽

DAY 11

Modern Web

小白的JavaScript讀書日記系列第 11 篇

12th鐵人賽

q20038848

2020-09-12 09:32:18

2271 瀏覽

分享至

經由Day10我們了解了如何取得元素節點，今天要介紹的內容是觸發事件處理以及存取屬性及字串。
我們開始吧!

觸發事件執行處理 - 事件驅動模型 (Event Driven Model)

簡單來說就是瀏覽網頁時出現的各種事件，例如:
一開啟網頁就提醒你今天的優惠，送出購物車時跳出的您確定要送出購物車(?)，滑鼠滑過去產生的變化，Day3的Hello World...等等
JavaScript可以針對以上這些事件撰寫所要執行的程式，這種程式設計模型稱為事件驅動模型。
此時，用以定義事件觸發所執行相關處理的函式，稱為事件處理程序(Event Handler)或者事件監聽器(Event Listener)。
下列列出主要的事件函式
https://www.w3schools.com/jsref/dom_obj_event.asp
零零總總一大堆，通常要用再來查表就可。

事件驅動模型的中心是"事件"和"事件處理程序(Event Handler)"/ 事件監聽器(Event Listener)，因此需要先定義下面三項

由哪個元素觸發事件
觸發什麼事件
觸發的事件要與哪一個"事件處理程序(Event Handler)"/ "事件監聽器(Event Listener)"關聯

上述觀念勒勒長，終於差不多進入實作了! 我們接著看下去
接下來我們來看JavaScript提供的宣告方式
1.以標籤內屬性宣告
語法：
<標籤名稱 on 事件名稱="JavaScript程式">

<!--html-->
<input type="button" value="送出購物車" onclick="window.alert('確定送出？')"/>

結果如下圖，點擊送出購物車按鈕後，會跳出一個彈跳視窗提醒你（畫面是不是很熟悉ＸＤ

上述方法是直接將JavaScript程式window.alert寫在HTML的標籤裡面，通常程式很簡短例如例子的，可能會這樣做，但這樣在HTML裡面混入JavaScript會降低可讀性。

2.以元素物件宣告
語法：obj.on event = function(){statements
obj:window物件或元素物件
event:事件名稱 statements:事件觸發時要執行的處理

<body>
      <!--按鈕-->
  <input id="btn" type="button" value="送出購物車" />
  <script>

    //註冊頁面時載入的事件處理程序
    window.onload = function () {
      //點擊按鈕時，執行的事件處理程序
      document.getElementById('btn').onclick = function () {
        window.alert("您確定要送出？")
      }
    }
  </script>
</body>

onload事件的意思是，請確保頁面完全載入後，才觸發JavaScript程式。
p.s.這邊可以試看看以下程式碼，在與上面的比對。

  <script>
    //註冊頁面時載入的事件處理程序
    function atention() {
      //點擊按鈕時，執行的事件處理程序
      document.getElementById('btn').onclick = function () {
        window.alert("您確定要送出？")
      }
    }
    atention();
  </script>
  <input id="btn" type="button" value="送出購物車" />

Try1:將上述例子改寫，不用onload事件，還有什麼方式可以讓程式正確執行呢？

在元素物件宣告中所使得onXXXX屬性設定有個缺點，只能針對同一個元素或者同一個事件，不能附加多個事件處理程序。因此出現了以下事件監聽器的寫法，他可以讓一個元素同一個事件附加多個事件處理程序。

3.使用addEventListener方式宣告
語法：elem.addEventListener(type, listener, capture)
elem:元素物件
type:事件種類
listener:對應事件要執行的處理
capture:事件方向（true or false）

<body>
  <!--按鈕-->
  <input id="btn" type="button" value="送出購物車" />
  <script>
    //註冊頁面時載入的事件處理程序
    document.addEventListener('DOMContentLoaded', function () {
      document.getElementById('btn').addEventListener('click', function () {
        window.alert('您確定要送出？');
      }, false)
    }, false);
  </script>
</body>

上述是用addEventListener改寫，這邊用到的DOMContentLoaded與元素物件寫法中用到的onload意思上都是在網頁完全載入後執行處理，但實際上還是有一點點差異

onload:內容及所有圖片都載入後才執行。
DOMContentLoaded:內容載入後執行（不等待圖片載入）
因此在使用DOMContentLoaded在載入上執行時間會快一點。

以上三中方法哪種比較好用呢？可以針對你當下的情況，去選擇一個比較適合的方法。
這有點像打怪，你手上有弓、劍，砲，當你遇到遠距離的怪獸，你可以選擇用弓或劍的意思ＸＤ

取得/設定屬性值及文字

這邊要介紹如何取得及設定，我們拿到元素的屬性和字串。

存取屬性:getAttribute/setAttribute
語法：
elem.getAttribute(name) //取得
elem.setAttribute(name, value) //設定
elem:元素物件
name:屬性名稱
value:屬性值

<body>
  <button id="btn" onclick="123">送出購物車</button>
  <script>
    // 抓取btn的屬性值
    let x = document.getElementById('btn').getAttribute('onclick')
    console.log(x); // 123
    
    //取得btn
    //並設置屬性名稱(onclick)的屬性值(window.alert("您確定要送出？"))
    document.getElementById("btn").setAttribute('onclick', 'window.alert("您確定要送出？")')
  </script>
</body>

存取字串innerHTML/textContent
要取得設定字串可以用這兩個屬性，我們用程式碼來解釋兩者的差異：

<body>
  <div id="text">
    <p style="color:red;">textContent未設定</p>
  </div>
  <div id="html">
    <p style="color:blue;">innerHTML未設定</p>
  </div>
  <button id="btn" onclick="myFun()">Try</button>
  
  <script>
    function myFun() {
      //將textContent未設定 取代成 '<a href="www.google">Google</a>'
      document.getElementById('text').textContent = '<a href="www.google">Google</a>';

      //將innerHTML未設定 取代成 Google
      document.getElementById('html').innerHTML = '<a href="www.google">Google</a>'
    };
    
    //比較取字串
    console.log(text.textContent); // textContent未設定
    console.log(text.innerHTML); // <p style="color:red;">textContent未設定</p>
  </script>
</body>

在按下Try之前紅顯示紅色字的textContent未設定，以及藍色字的innerHTML未設定，
當我們按下Try後，
紅色字被取代成黑色字(原色)的Google
藍色字被取代成藍色超連結的Google
由上述可以得知，textContent是單純用純文字的方式插入，
而innerHTML會判斷插入的字串是否為html字串，如果是他就幫你轉換。

在取得字串時的差異：
我們可以發現textContent取出字串時，是只取純文字的部分，
innerHTML在取出字串時，會取出整段的html字串。

今日總結：

事件驅動模型，以及怎麼宣告
如何存取屬性和字串(textContent and innerHTML的差異)
Try1:修正下列程式碼，不用onload事件，還有什麼方式可以讓程式正確執行呢？

  <script>
    function atention() {
      document.getElementById('btn').onclick = function () {
        window.alert("您確定要送出？")
      }
    }
    atention();
  </script>
  <input id="btn" type="button" value="送出購物車" />

以上，我們明天見囉～