Mục lục

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

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

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

1- ChangeEvent

Sự kiện change xẩy ra trong các tình huống sau:
  1. Người dùng check/uncheck trên <input type="checkbox">.
  2. Người dùng thay đổi trên <input type="radio">.
  3. Người dùng thay đổi giá trị của <input> (file, color, range).
  4. 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.
  5. Người dùng thay đổi nội dung của <textarea>, sau đó focus sang nơi khác.
  6. 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>.

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