Hướng dẫn và ví dụ Javascript ChangeEvent

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.
Hướng dẫn và ví dụ Javascript Event

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 và ví dụ Javascript InputEvent

Hướng dẫn và ví dụ Javascript ChangeEvent

1. ChangeEvent

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

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

Các bài viết mới nhất