JavaScript - DOM Event trong Javascript

22/03/2019, 4:53 PM | 02/04/2019, 4:21 PM | 1.9K | 024

Sự kiện ( event ) nếu bạn đã đọc qua tài liệu về HTML rồi thì chắc hẳn đã nắm được, nó là một hành động nào đó tác động lên đối tượng HTML. Khi người dùng click vào nút là một sự kiện, di chuột vào đối tượng nào đó, hay load lại trang cũng là một sự kiện v.v... Vậy bài này chúng ta cùng tìm hiểu về sự kiện nhé.
1. Sự kiện với HTML attribute
Để thêm sự kiện cho phần tử HTML, bạn có thể sử dụng trực tiếp thuộc tính ( attribute ) của chúng như sau :
Ví dụ : Khi click vào nút thì đưa ra thông báo

Xem DEMO

<input type="button" id="message" value="Click Me" onclick="alert('Bạn vừa click vào button')"/>

Bạn cũng có thể gọi một hàm cho sự kiện onclick để cho kết quả tương tự như sau :

<html>
    <head>
      <script>
          function ThongBao(){
              alert('Bạn vừa click vào button');
          }
      </script>
    </head>
    <body>
        <input type="button" id="message" value="Click Me" onclick="ThongBao()"/>
    </body>
</html>

Các sự kiện thường dùng trong Javascript :

Tên sự kiện	Mô tả
onchange	kích hoạt khi giá trị một phần tử thay đổi
onfocus	kích hoạt khi phần tử được tập trung ( một textbox đang có con trỏ chuột hay một checkbox được tích...)
onblur	kích hoạt khi phần tử rời bỏ tập trung ( ngược với onfocus )
onsubmit	kích hoạt khi một form được gửi đi
oncopy	kích hoạt khi copy nội dung của thẻ
onpaste	kích hoạt khi dán nội dung vào thẻ
oncut	Kích hoạt khi cắt nội dung của thẻ
onkeydown	Kích hoạt khi một phím được nhấn xuống ( tất cả các phím )
onkeypress	Kích hoạt khi một phím được nhấn xuống ( trừ một số phím như Shift, Esc, Ctrl, Delete, các phím mũi tên )
onkeyup	Kích hoạt khi một phím được nhả ra
onclick	Kích hoạt khi click chuột vào thẻ
ondblclick	Kích hoạt khi nhấn đúp chuột vào thẻ
onmousedown	Kích hoạt khi một nút chuột được nhấn
onmousemove	Kích hoạt khi con trỏ chuột di chuyển bên trong thẻ
onmouseover	Kích hoạt khi chuột bắt đầu di chuyển vào thẻ
onmouseout	Kích hoạt khi chuột bắt đầu dời khỏi thẻ
onmouseup	Kích hoạt khi một nút chuột được nhả ra
onwheel	Kích hoạt khi bán xe chuột lăn ( thay thể cho onmousewheel không sử dụng nữa )
onafterprint	Kích hoạt sau khi một tài liệu được in
onbeforeprint	Kích hoạt trước khi một tài liệu được in
onbeforeonload	Kích hoạt trước khi một tài liệu được tải
onhaschange	Kích hoạt khi một tài liệu đã thay đổi
onerror	Kích hoạt khi có một lỗi xảy ra
onload	Kích hoạt khi một tài liệu được tải
onmessage	Kích hoạt khi có một thông báo
onoffline	Kích hoạt khi một tài liệu ngoại tuyến
ononline	Kích hoạt khi một tài liệu trực tuyến
onpagehide	Kích hoạt khi một cửa sổ bị ẩn
onpageshow	Kích hoạt khi một cửa sổ trở lên được hiện lên
onpopstate	Kích hoạt khi lịch sử của cửa sổ thay đổi
onresize	Kích hoạt khi cửa sổ bị thay đổi kích cỡ
onstorage	Kích hoạt khi một tài liệu được tải
onunload	Kích hoạt khi một người dùng rời khỏi tài liệu

2. Thêm các sự kiện với DOM
Sử dụng HTML DOM để thêm sự kiện cho phần tử HTML bằng cú pháp sau :

element.EventName = functionName;

Trong đó :
     - element : là các đối tượng HTML
     - EventName : là tên các sự kiện
     - functionName : là một hàm
Ví dụ 1 : Thêm sự kiện onclick cho Button

Xem DEMO

<html>
    <head>
     
    </head>
    <body>
        <input type="button" id="message" value="Click Me"/>
      
         <script>
            document.getElementById('message').onclick = ThongBao;
            function ThongBao(){
                alert('Chào bạn ! Chúc bạn ngày mới vui vẻ !');
            }
        </script>
    </body>
</html>

Ví dụ 2 : Thêm sự kiện onkeyup cho textbox. Khi người dùng nhập giá trị vào ô textbox thì lấy giá trị đó và gán vào thẻ <p>

Xem DEMO

<html>
    <head>
     
    </head>
    <body>
        <input type="text" id="message" value=""/>
        <p id="show"></p>
         <script> 
            // lấy id của textbox
            var TextId = document.getElementById('message');
            // gán sự kiện onkeyup cho textbox
            TextId.onkeyup = ChangeValue;
           
            // hàm sử lý sự kiện onkeyup
            function ChangeValue(){
                // lấy thẻ có id="show"
                var display = document.getElementById('show');
               
                // gán giá trị của textbox cho thẻ p
                display.innerHTML = TextId.value;
            }
        </script>
    </body>
</html>

Ví dụ 3 : Lấy danh sách các thẻ <p> thuộc thẻ <div>. Lặp qua từng đối tượng trong danh sách lấy về và gán sự kiện onmouseover và onmouseout. Đồng thời kết hợp sử dụng DOM CSS để đổi màu cho <p>

Xem DEMO

<html>
    <head>
     
    </head>
    <body>
        <div id="List">
            <p>Chelsea !!!</p>
            <p>Manchester UTD !!!</p>
            <p>Manchester City !!!</p>
            <p>Arsenal !!!</p>
            <p>Tottenham !!!</p>
        </div>
      
         <script> 
            // lấy danh sách các thẻ <p> nằm trong thẻ có id="List"
            var ListName = document.querySelectorAll("#List p");
            // lặp qua từng đối tượng trong danh sách
            for(var i = 0; i < ListName.length; i++){
                // gán sự kiện khi di chuột vào
                ListName[i].onmouseover = function (){
                   // đổi màu thành đỏ
                   this.style.color = 'red';
                }
                // gán sự kiện khi di chuột ra
                ListName[i].onmouseout = function (){
                   // đổi màu thành đen
                   this.style.color = 'black';
                }
            }
			
        </script>
    </body>
</html>

Ở ví dụ trên mình có thử dụng đối tượng this nên mình sẽ giải thích qua về đối tượng này
Đối tượng this trong Javascript
Ta có thể hiểu this chính là đối tượng đang được sử dụng hoặc truy cập tới. Ở ví dụ 3 đối tượng this đại diện cho thẻ HTML đang được truy cập tới nên bạn có thể sử dụng các thuộc tính hay phương thức của thẻ đó, như ở trên mình đã đổi màu chữ của thẻ đó bằng this.style.color
Ví dụ 4 : Ta truyền đối tượng this vào hàm ClickMe() theo dạng tham số

Xem DEMO

<html>
    <head>
     	<script> 
          
			function ClickMe(Obj){
               // Obj đại diện cho đối tượng this truyền vào
               alert("Kiểu là : " + Obj.type + " và Value là : " + Obj.value);
            }
            
        </script>
    </head>
    <body>
        <div>
            <input type="button" value="Click vào đây để xem kết quả" onclick="ClickMe(this)"/>
        </div>
    </body>
</html>

Ở ví dụ trên ta có thể thấy Obj đại diện cho this và chính là đối tượng HTML nên ta có thể thao tác với thuộc tính và phương thức của nó qua Obj.

Sự kiện Onload trong Javascript
Ở bảng trên có một sự kiện khá quan trọng và hay sử dụng bạn cần lưu ý đó là sự kiện onload. Như bạn thấy ở các ví dụ trên mình thường viết các đoạn <script> bên trong thẻ body và dưới các thẻ HTML như <input>, <p> ... mà không phải trong thẻ <head>, tại sao lại như vậy ? câu trả lời là Javascript sẽ biên dịch tài liệu từ trên xuống dưới và từ trái qua phải. Vậy nên ở Ví dụ 3 phía trên nếu bạn đặt đoạn mã <script> trong thẻ <head> thì sẽ sai vì khi đó các thẻ HTML chưa được load và khi ta dùng DOM element để lấy danh sách các thẻ <p> sẽ không có kết quả.
Ví dụ : Đoạn code sau sẽ không hiển thị được kết quả vì khi javascript biên dịch từ trên xuống dưới, thẻ có id=01 chưa được định nghĩa

<html>
    <head>
     	<script> 
            // sẽ không lấy được thẻ có id là 01
            // vì thẻ này chưa được định nghĩa
            var NameId = document.getElementById("01");
            alert(NameId.innerHTML);
        </script>
    </head>
    <body>
        <div>
            <p id="01">Chelsea !!!</p>
            <p>Manchester UTD !!!</p>
        </div>
    </body>
</html>

Nhưng nếu bạn viết như sau thì sẽ cho kết quả :

<html>
    <head>
     	
    </head>
    <body>
        <div>
            <p id="01">Chelsea !!!</p>
            <p>Manchester UTD !!!</p>
        </div>
        <script> 
            // đoạn code này sẽ cho kết quả
            // vì thẻ có id=01 này đã được định nghĩa trước rồi
            var NameId = document.getElementById("01");
            alert(NameId.innerHTML);
        </script>
    </body>
</html>

Vậy sự kiện onload có tác dụng gì ở đây ? ta xét ví dụ tương tự nhưng thêm sự kiện onload và sẽ đưa ra được kết quả :

Xem DEMO

<html>
    <head>
     	<script> 
            
            window.onload = function(){
            	// đoạn code này sẽ cho kết quả
                // vì code trong sự kiện onload này sẽ được load cuối cùng
                var NameId = document.getElementById("01");
                alert(NameId.innerHTML);
            };	
        </script>
    </head>
    <body>
        <div>
            <p id="01">Chelsea !!!</p>
            <p>Manchester UTD !!!</p>
        </div>
    </body>
</html>

      Sự kiện onload có ý nghĩa là : khi trình duyệt tải xong tất cả mọi thứ thì đoạn code trong onload mới được chạy, điều này lý giải tại sao đoạn code ở ví dụ trên lại cho ra được kết quả.
      Lưu ý là nếu bạn sử dụng onload cho một thẻ HTML nào đó thì nó chỉ có tác dụng với thẻ đó thôi, còn nếu bạn sử dụng window.onload thì nó có tác dụng cho toàn trang.
      Đến đây nhiều bạn sẽ thắc mắc tại sao ở ví dụ 4 mình viết <script> trong thẻ <head> sao vẫn đúng ?. Là bởi vì ở ví dụ đó khi bạn click vào button thì nó gọi tới hàm ClickMe() và các đoạn code trong hàm đó được thực thi một lần nữa.
      Như vậy bạn cần nắm được cách biên dịch tài liệu của Javascript để viết code sao cho có được kết quả đúng.

      Các sự kiện ( event ) trong javascript là rất quan trọng và được sử dụng nhiều, trên đây mình chỉ đưa ra ví dụ đơn giản, bạn có thể dựa vào bảng các sự kiện để làm các bài toán cho riêng mình nhé :)