JavaScript: Sự kiện tương tự phương thức sự kiện

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Mỗi một sự kiện bản chất là một thuộc tính của thẻ HTML nào đó. Vì các thẻ HTML được coi như những đối tượng trong JavaScript, cho nên có một số phương thức sự kiện có thể được sử dụng tương tự như sự kiện (xem các phương thức này ở bảng dưới). Khi một phương thức sự kiện được sử dụng thì đối tượng sẽ cư xử nó tương tự với sự kiện tương ứng, ví dụ như phương thức sự kiện click() cư xử như sự kiện onClick, blur() cư xử như sự kiện onBlur, ... Phương thức sự kiện được sử dụng bằng cách đặt dấu chấm giữa tên đối tượng và tên phương thức giống như việc sử dụng tất cả các phương thức khác, chẳng hạn như: document.test.button1.click(), window.focus().

Lưu ý: Các phương thức sự kiện mặc dù cư xử như những sự kiện tương ứng nhưng bản thân chúng lại không có khả năng kích hoạt sự kiện. Ví dụ như phương thức sự kiện click không hề có khả năng tự kích hoạt sự kiện onClick.

Danh sách các phương thức sự kiện

Phương thức sự kiện

Sự kiện tương ứng

Hiệu ứng

blur()

onBlur

Lose focus khỏi trang web, frame và các trường của form

click()

onClick

Tương ứng với việc click chuột vào một trường của form

focus()

onFocus

Focus vào trang web, frame hay các trường của form

reset()

onReset

Xóa dữ liệu của các trường của form, thiết lập các giá trị của chúng về dạng mặc định ban đầu

select()

onSelect

Chọn hoặc highlight văn bản trong một trường nào đó của form

submit()

onSubmit

Submit form dữ liệu

Ví dụ:

    <html>
    <head><title>Simulation Methods</title></head>
    <body bgcolor="yellow">
1   <form name="myform"
2       action="http://localhost/cgi-bin/doit.pl"
        method="post">
    Enter your name:<br>
        <input type="text"
            name="namefield"
            size="30"
            value="Name: "
3           onFocus="this.select()">
    <p>
    Enter your address:<br>
4       <input type="text"
           name="addressfield"
           size="30"
           value="Address: "
5          onFocus="this.select()">
    <p>
    </form>
6   <a href="#" onClick="javascript: document.myform.submit();">
    Click here to submit your form</a>
    <p>
7   <a href="#" onClick="javascript:document.myform.reset();">
    Click here to reset your form</a>
    </body>
    </html>

GIẢI THÍCH

  1. Form có tên myform.

  2. URL mà form dữ liệu sẽ được gửi tới sau khi submit.

  3. Sự kiện onFocus được gán một phương thức có tên select(), theo đó nếu người dùng focus vào textbox thì sự kiện onFocus được kích hoạt và và hàm select() sẽ có nhiệm vụ bôi đen toàn bộ văn bản mà người dùng điền vào textbox.

  4. Một textbox nữa được định nghĩa để lưu địa chỉ của người dùng.

  5. Khi focus tới trường này thì phương thức select() tương ứng cũng sẽ bôi đen dữ liệu được điền.

  6. Khi click vào link tương ứng thì sự kiện onClick sẽ được kích hoạt và đoạn mã JavaScript trong sự kiện này sẽ được thực thi, cụ thể là nó sẽ submit dữ liệu.

  7. Khi click vào link tương ứng thì sự kiện onClick sẽ được kích hoạt và đoạn mã JavaScript trong sự kiện này sẽ được thực thi và nó sẽ có nhiệm vụ reset lại form.

» Tiếp: Giá trị trả về cho sự kiện
« Trước: Cài đặt và sử dụng sự kiện
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!