programming javascript

Điều nào sau đây đề cập đến trình xử lý sự kiện trong javascript?

Trong hướng dẫn này, chúng ta sẽ xem xét một tính năng rất tiện dụng của JavaScript được gọi là các sự kiện. Bằng cách viết mã phản ứng với các sự kiện, bạn có thể làm cho các trang web của mình tương tác nhiều hơn

Đọc để tìm hiểu làm thế nào…

sự kiện là gì?

Sự kiện cho phép bạn viết mã JavaScript phản ứng với các tình huống nhất định. Ví dụ về các sự kiện bao gồm

Người dùng nhấp vào nút chuột
Trang Web đang tải
Một trường biểu mẫu đang được thay đổi

xử lý sự kiện

Để cho phép bạn chạy các đoạn mã của mình khi các sự kiện này xảy ra, JavaScript cung cấp cho chúng tôi các trình xử lý sự kiện. Tất cả các trình xử lý sự kiện trong JavaScript đều bắt đầu bằng từ Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 6 và mỗi trình xử lý sự kiện xử lý một loại sự kiện nhất định. Đây là danh sách tất cả các trình xử lý sự kiện trong JavaScript, cùng với các đối tượng mà chúng áp dụng và các sự kiện kích hoạt chúng

Trình xử lý sự kiệnÁp dụng cho. Kích hoạt khi. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 7 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 0Việc tải hình ảnh bị hủy bỏ. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 1 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 2Đối tượng trong câu hỏi bị mất tiêu điểm (e. g. bằng cách nhấp vào bên ngoài nó hoặc nhấn phím TAB). Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 3 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 4Dữ liệu trong phần tử biểu mẫu được thay đổi bởi người dùng. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 5 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 6Đối tượng được nhấp vào. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 7 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 8Đối tượng được nhấp đúp vào. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 9 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 00Một biểu tượng được kéo và thả vào trình duyệt. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 01 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 02Xảy ra lỗi JavaScript. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 03 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 2Đối tượng trong câu hỏi thu hút sự chú ý (e. g. bằng cách nhấp vào nó hoặc nhấn phím TAB). ________ 105 ________ 106 Người dùng nhấn một phím. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 07 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 06Người dùng nhấn hoặc giữ một phím. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 09 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 06Người dùng nhả khóa. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 11 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 02Toàn bộ trang đã tải xong. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 13 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 14Người dùng nhấn nút chuột. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 15Không cóNgười dùng di chuyển chuột. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 16 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 17Người dùng di chuyển chuột ra khỏi đối tượng. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 18 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 17Người dùng di chuyển chuột qua đối tượng. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 00 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 14Người dùng thả một nút chuột. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 02 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 00Người dùng di chuyển khung hoặc cửa sổ trình duyệt. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 04 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 05Người dùng nhấp vào nút Đặt lại của biểu mẫu. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 06 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 00Người dùng thay đổi kích thước cửa sổ hoặc khung trình duyệt. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 08 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 09Người dùng chọn văn bản trong trường. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 00 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 05Người dùng nhấp vào nút Gửi của biểu mẫu. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 02 Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 00Người dùng rời khỏi trang

Sử dụng trình xử lý sự kiện

Để sử dụng trình xử lý sự kiện, bạn thường đặt tên trình xử lý sự kiện trong thẻ HTML của đối tượng mà bạn muốn làm việc, theo sau là Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 04, trong đó Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 05 là JavaScript bạn muốn thực thi khi sự kiện xảy ra

Ví dụ

Mặc dù tên trình xử lý sự kiện gốc của JavaScript chứa các chữ in hoa (_______406), nhưng bạn nên sử dụng tất cả chữ thường trong chính HTML ( Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 07) nếu bạn muốn phần đánh dấu của mình tuân theo đặc tả XHTML (mà chúng tôi làm. ). Tất cả tên phần tử và thuộc tính phải là chữ thường trong XHTML

Đối tượng Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 08

Đối tượng Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 08 được tạo tự động bất cứ khi nào có sự kiện xảy ra. Có một số thuộc tính được liên kết với đối tượng Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 08 có thể được truy vấn để cung cấp thêm thông tin về sự kiện

Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 21Được sử dụng bởi sự kiện Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 22. Trả về một mảng URL của các đối tượng bị loại bỏ. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 23Lưu trữ chiều cao của cửa sổ hoặc khung chứa đối tượng được kết nối với sự kiện. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 24Trả về một chuỗi liệt kê bất kỳ phím bổ trợ nào được nhấn giữ trong một sự kiện phím hoặc chuột. Các giá trị khóa bổ trợ là. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 25, Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 26, Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 27 và Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 28. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 29Các thuộc tính này giữ tọa độ pixel X và Y của con trỏ so với trang, tại thời điểm xảy ra sự kiện. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 10Các thuộc tính này giữ tọa độ pixel X và Y của con trỏ so với màn hình, tại thời điểm xảy ra sự kiện. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 11Trả về một chuỗi đại diện cho đối tượng đã bắt đầu sự kiện. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 12Trả về một chuỗi đại diện cho loại sự kiện (nhấn phím, nhấp chuột, v.v.). Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 13Trả về một số đại diện cho nút chuột đã được nhấn (1=trái, 2=giữa, 3=phải) hoặc mã ASCII của phím được nhấn. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 14Lưu trữ chiều rộng của cửa sổ hoặc khung chứa đối tượng được kết nối với sự kiện. Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 15Các thuộc tính này giữ tọa độ pixel X và Y của con trỏ so với lớp được kết nối với sự kiện hoặc, đối với sự kiện Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 16, chiều rộng và chiều cao của đối tượng sau khi nó được thay đổi kích thước. (Bạn cũng có thể sử dụng Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 17 và Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 18 để làm điều tương tự. )

Một số xử lý sự kiện phổ biến

Trong phần này, chúng ta sẽ xem xét một số trình xử lý sự kiện được sử dụng phổ biến hơn và xem xét cách chúng có thể được sử dụng

Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 19

Ví dụ

Mã ví dụ này đảm bảo rằng bạn nhập cả họ và tên của mình. Nó sẽ hiển thị một hộp cảnh báo và lấy nét lại trường hộp văn bản nếu bạn chỉ nhập một từ vào hộp văn bản

Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 61

Trình xử lý Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 61 được thực thi khi người dùng nhấp chuột vào đối tượng được đề cập. Bởi vì bạn có thể sử dụng nó trên nhiều loại đối tượng, từ các nút cho đến các hộp kiểm cho đến các liên kết, đây là một cách tuyệt vời để tạo các trang Web tương tác dựa trên JavaScript

Ví dụ

Trong ví dụ này, một hộp cảnh báo được hiển thị khi bạn nhấp vào liên kết bên dưới

Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 63

Ví dụ

Hộp văn bản ví dụ này chứa lời nhắc “Vui lòng nhập địa chỉ email của bạn” sẽ bị xóa sau khi hộp văn bản có tiêu điểm

Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 66

Bạn có thể sử dụng Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 66 để xác định khi nào một phím trên bàn phím đã được nhấn. Điều này hữu ích để cho phép các phím tắt trong biểu mẫu của bạn và để cung cấp tính tương tác và trò chơi

Ví dụ

Ví dụ này sử dụng trình xử lý sự kiện Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 66 cho đối tượng Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 00 để xác định thời điểm nhấn phím. Ngoài ra, nó sử dụng thuộc tính Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 70 của đối tượng Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 08 để xác định mã ASCII của phím đã được nhấn, sau đó hiển thị phím đã nhấn trong hộp văn bản. Nếu Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 72 không được xác định thì nó sử dụng Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 73 thay thế (Internet Explorer sử dụng Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 73 thay vì Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 72)

dùng thử

Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 76

Trình xử lý sự kiện Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 76 được kích hoạt khi trang tải xong. Các cách sử dụng phổ biến của Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 76 bao gồm các cửa sổ quảng cáo bật lên đáng sợ và để bắt đầu các hành động khác như hoạt ảnh hoặc bộ hẹn giờ sau khi toàn bộ trang đã tải xong

Ví dụ

Ví dụ đơn giản này hiển thị hộp cảnh báo khi trang tải xong

dùng thử

Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 79, Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 00

Cách sử dụng cổ điển của hai trình xử lý sự kiện này là dành cho hình ảnh di chuột qua JavaScript (hình ảnh, chẳng hạn như các nút, thay đổi khi bạn di chuột qua chúng). Chúng tôi có một hướng dẫn về chủ đề này có tên là Các nút chuyển qua với JavaScript

Ví dụ

Đây là một ví dụ đơn giản làm thay đổi giá trị của hộp văn bản tùy thuộc vào việc con trỏ chuột có ở trên một liên kết hay không

Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 01

Trình xử lý sự kiện Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 01, chỉ hoạt động với đối tượng Please enter your name: <input type="text" name="your_name" onchange="validateField(this)"/> <script type="text/javascript"> function validateField ( fieldname ) { if ( ( fieldname.value ) && ( ! fieldname.value.match ( " " ) ) ) { alert ( "Please enter your first and last names!" ); fieldname.focus ( ); } } </script> 05, thường được sử dụng để xác thực biểu mẫu trước khi nó được gửi đến máy chủ. Trên thực tế, chúng tôi có toàn bộ hướng dẫn về chủ đề này, được gọi là Xác thực biểu mẫu bằng JavaScript

Ví dụ

Ví dụ này yêu cầu bạn xác nhận xem bạn có muốn gửi biểu mẫu hay không khi bạn nhấp vào nút. Nó trả về ________ 004 cho trình xử lý sự kiện nếu biểu mẫu được gửi và ________ 005 nếu việc gửi bị hủy

Trình xử lý sự kiện trong JavaScript là gì?

Trình xử lý sự kiện là mã JavaScript gọi một đoạn mã cụ thể khi một hành động cụ thể xảy ra trên phần tử HTML . Trình xử lý sự kiện có thể gọi mã JavaScript trực tiếp hoặc một hàm.