Hướng dẫn sử dụng Javascript ChangeEvent

Xem thêm các chuyên mục:

Các hướng dẫn ECMAScript, Javascript

ChangeEvent

1- ChangeEvent

Sự kiện change xẩy ra trong các tình huống sau:

Người dùng check/uncheck trên <input type="checkbox">.
Người dùng thay đổi trên <input type="radio">.
Người dùng thay đổi giá trị của <input> (file, color, range).
Người dùng thay đổi nội dung của <input> ( text, number, email, password, tel, time, week, month, date, datetime-local, search, url), sau đó focus sang nơi khác.
Người dùng thay đổi nội dung của <textarea>, sau đó focus sang nơi khác.
Người dùng thay đổi lựa chọn (option) trên phần tử <select>.

ChangeEvent thừa kế tất cả các thuộc tính (property) và phương thức của interface Event.

TODO Link!

Ví dụ với sự kiện change:

changeevents-elements-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>ChangeEvent Example</title>
      <meta charset="UTF-8">

      <style>.title {font-weight:bold;}</style>

      <script>
          function changeHandler(evt)  {
            alert("Changed!");
          }
      </script>

   </head>
   <body>

      <h2>ChangeEvent example</h2>

      <p class="title">Input (checkbox, radio):</p>
      <input type="checkbox"  onchange ="changeHandler(event)"/>
      <input type="radio" name ="gender" value="M" onchange ="changeHandler(event)"/>
      <input type="radio" name ="gender" value="F" onchange ="changeHandler(event)"/>

      <p class="title">Input (range):</p>
      <input type="range" min ="1" max="10" onchange ="changeHandler(event)"/>

      <p class="title">Input (color):</p>
      <input type="color" onchange ="changeHandler(event)"/>

      <p class="title">Input (file):</p>
      <input type="file" onchange ="changeHandler(event)"/>


      <p class="title">Input (image, hidden, buton, submit, reset):</p>
        - (Not support 'change' event)

      <p class="title">Input (text, number, email, password, tel, time, week, month, date, datetime-local, search, url):</p>
      <input type="text" onchange ="changeHandler(event)"/>

      <p class="title">Textarea element</p>
      <textarea onchange ="changeHandler(event)" rows="3" cols="30"></textarea>

      <p class="title">Select:</p>
      <select onchange ="changeHandler(event)">
         <option value ="en">English</option>
         <option value ="de">German</option>
         <option value ="vi">Vietnamese</option>
      </select>

      <p id="log-div"></p>


   </body>
</html>

Ví dụ với sự kiện change trên phần tử <select>:

changeevents-select-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>ChangeEvent Example</title>
      <meta charset="UTF-8">

      <script>
          function changeHandler(evt)  {
            alert("Language: " + evt.target.value);
          }
      </script>

   </head>
   <body>

      <h2>ChangeEvent example</h2>

      <p class="title">Select Language:</p>
      <select onchange ="changeHandler(event)">
         <option value ="en">English</option>
         <option value ="de">German</option>
         <option value ="vi">Vietnamese</option>
      </select>


   </body>
</html>

Event: change vs input

Bạn có thể cân nhắc sử dụng sự kiện input vì nó khá giống với sự kiện change:

Sự kiện input xẩy ra ngay sau khi giá trị của một phần tử thay đổi, mà không yêu cầu phần tử phải mất focus.
Sự kiện input hỗ trợ các phần tử với thuộc tính (attribute) contenteditable="true". Trong khi sự kiện change chỉ hỗ trợ các phần tử <input>, <texarea>, <select>.

Hướng dẫn sử dụng Javascript InputEvent

Xem thêm các chuyên mục:

Các hướng dẫn ECMAScript, Javascript