Hướng dẫn sử dụng Javascript ChangeEvent
Xem thêm các chuyên mục:
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>.