Ở bài trước chúng ta đã được làm quen với đối tượng trong Javascript, Trong bài hướng dẫn này, chúng ta sẽ được làm quen với khái niệm sự kiện trong Javascript, có những loại sự kiện nào, các hàm sự kiện hay được sử dụng trong Javascript. Chúng ta cùng nhau theo dõi nhé.

Sự kiện là gì?

Sự kiện HTML là “hành đồng” xảy ra với các phần tử HTML, qua đó ta có thể bắt được sự kiện và yêu cầu javascript thực thi một hay nhiều “kịch bản” nào đó.

Mỗi sự kiện chúng ta có thể gán nhiều hành động. Ví dụ bạn có một sự kiện là tết âm lịch, thì bạn sẽ có những hành động trong sự kiện đó là mua đồ mới, dọn dẹp nhà cửa, mua bao lì xì, ..

Xét về mặt thực tế thì ta có dụ thế này: Giả sử bạn xây dựng một form đăng ký tài khoản và bạn muốn bắt sự kiện khi người dùng CLICK vào button đăng ký thì hiện những hành động như:

  • Kiểm tra người dùng có nhập dữ liệu không.
  • Kiểm tra người dùng nhập dữ liệu có đúng định dạng không.

Như vậy, bạn cần phải nhớ rằng mỗi sự kiện trong JS thì ta có thể gán nhiều hành động khác nhau, và gán bao nhiêu hành động thì phụ thuộc vào từng chức năng cụ thể.

Các sự kiện (Events) trong javascript

Sự kiện chuột (mouse)

Khi sử dụng chuột chúng ta có các thao tác di chuột, click chuột, click đúp chuột, click chuột phải,… Tương ứng với đó trong javascript cũng có các sự kiện sau:

  • onclick: Sự kiện xảy ra khi người dùng click vào phần tử

Hãy thử ví dụ sau:

<html> 
    <head> 
         <script type="text/javascript"> 
                function sayHello() { 
                    alert("Hello We are HourOfCode Vietnam") 
                } 
            </script> 
    </head> 
    <body> 
        <p>Click chuột vào nút bên dưới và quan sát kết quả</p> 
        <form> <input type="button" onclick="sayHello()" value="Xin chao!" /> 
        </form> 
    </body> 
</html>
  • ondblclick: Sự kiện xảy ra khi người dùng double-click vào phần tử
  • oncontextmenu: Sự kiện xảy ra khi người dùng click chuột phải để mở context menu (ấn phím menu trên bàn phím không được nhé)
  • onmousedown: Sự kiện xảy ra khi người dùng ấn một nút chuột trên phần tử (kể cả nút chuột giữa)
  • onmouseup: Sự kiện xảy ra khi người dùng thả nút chuột qua một phần tử
  • onmouseleave: Sự kiện xảy ra khi con trỏ chuột di chuyển ra khỏi phần tử
  • onmouseover và onmouseout: Hai kiểu sự kiện này sẽ giúp bạn tạo các hiệu quả đẹp với hình ảnh hoặc ngay cả với văn bản. Sự kiện onmouseover kích hoạt khi bạn di chuyển chuột qua bất kỳ phần tử nào và onmouseout kích hoạt khi bạn di chuyển chuột ra khỏi phần tử đó.

Hãy thử ví dụ dưới đây

<html> 
    <head> 
        <script type="text/javascript"> 
                function over() { 
                     document.getElementById('result').innerHTML="Mouse Over"; 
                } 
                function out() { 
                    document.getElementById('result').innerHTML="Mouse Out";
                } 
         </script> 
    </head> 
    <body> 
        <p>Đưa chuột vào vùng văn bản và quan sát kết quả:</p> 
        <div onmouseover="over()" onmouseout="out()"> 
        <h2><mark>Đây là vùng văn bản</mark></h2> 
        </div> 
		<h3 id="result"></h3>
    </body> 
</html>

Sự kiện bàn phím (Keyboad)

  • onkeydown: Sự kiện xảy ra khi người dùng đang ấn 1 phím (sẽ được kích hoạt với tất cả các phím)
  • onkeypress: Sự kiện xảy ra khi người dùng ấn 1 phím (một số phím sẽ không kích hoạt sự kiện này như phím alt, shift, ctrl, esc, backspace, delete, các phím mũi tên…)
  • onkeyup: Sự kiện xảy ra khi người dùng thả 1 phím

Sự kiện khung (Frame)

  • onresize: Sự kiện xảy ra khi người dùng thay đổi kích thước trình duyệt
  • onscroll: Sự kiện xảy ra khi thanh cuộn của phần tử đang được cuộn

Chú ý: * Khi bạn thay đổi kích thước cửa sổ làm cho vị trí cuộn của trang bị ảnh hưởng cũng sẽ kích hoạt sự kiện scroll

Sự kiện form

  • onfocus: Sự kiện xảy ra khi thành phần được tập trung. Một thành phần được focus như là một ô nhập liệu có con trỏ ở bên trong. Một ô check box hoặc radio được tab vào hoặc click vào cũng sẽ kích hoạt sự kiện focus.
  • onblur: Đối nghịch với sự kiện onfocus. Sự kiện xảy ra khi thành phần rời bỏ sự tập trung.
  • onchange: Sự kiện xảy ra khi thành phần đã được thay đổi nội dung, giá trị. Đối với ô <input><keygen><select>, và <textarea>.

Đối với ô nhập liệu khi người sử dụng thay đổi giá trị của ô nhập liệu và thoát khỏi ô nhập đó (blur) thì sự kiện onchange mới được kích hoạt. Còn khi người dùng nhập dữ liệu vào ô input hoặc textarea mà mình cần lấy giá trị để validate thì sao. Chúng ta sẽ sử dụng sự kiện oninput dưới đây.

  • oninput: Sự kiện xảy ra khi người dùng nhập giá trị vào ô input hoặc textarea Chú ý: * Đối với các ô select, checkbox, radio thì cũng có sự kiện oninput nhưng tùy trình duyệt bạn sử dụng. Như google chrome thì không có sự kiện oninput cho các ô checkbox, radio. Vì vậy chỉ nên sử dụng sự kiện oninput với các ô nhập liệu thôi.
  • onselect: Sự kiện xảy ra khi người dùng chọn một số văn bản trong ô nhập liệu (input text, textarea, keygen)
  • onsubmit: Sự kiện xảy ra khi form được gửi đi.
  • onreset: Sự kiện sảy ra khi form được reset về giá trị mặc định.

Sự kiện Clipboard

  • oncut: Sự kiện xảy ra khi người dùng cắt nội dung của một phẩn tử
  • onpaste: Sự kiện xảy ra khi người dùng dán một số nội dung vào trong phẩn tử
  • oncopy: Sự kiện xảy ra khi người dùng sao chép nội dung của một phần tử.

Các hàm của sự kiện hay dùng:

  • preventDefault(): Ngăn chặn sự kiện thực hiện chức năng mặc định. Ví dụ ta có một sự kiện submit() form, nhưng ta không muốn nó submit bình thường mà dùng ajax gửi request chẳng hạn thì mình sẽ dùng hàm preventDefault() để ngăn chặn form submit bình thường.
  • element.addEventListener(event, function)
  • element.removeEventListener(event, function)

Trên đây là một số event thường sử dụng trong Javascript. Làm việc với Javascript thì không thể quên khái niệm event được nên hãy học chắc bài này nhé các bạn. Hẹn gặp lại các bạn vào bài viết tiếp theo! Chúc bạn thành công!