02/11/2018, 23:28

Sự kiện trong javascript

Sự kiện là những hành động do người dùng hoặc hệ thống gây ra. Các hành động do người dùng gây ra có thể là di chuyển chuột, nhấn chuột, nhả chuột, nhấn phím, nhả phím, copy, kéo giãn cửa sổ, di chuyển cửa sổ v.v... Các sự kiện do hệ thống gây ra có thể là nạp tài liệu, đóng cửa sổ v.v...

Bảng các sự kiện thông dụng trong javascript.

STT Event Name Description
1 onclick Xảy ra khi click vào thẻ HTML
2 ondbclick Xảy ra khi double click vào thẻ HTML
3 onchange Xảy ra khi giá trị (value) của thẻ HTML đổi. Thường dùng trong các đối thẻ form input
4 onmouseover Xảy ra khi con trỏ chuột bắt đầu đi vào thẻ HTML
5 onmouseout Xảy ra khi con trỏ chuột bắt đầu rời khỏi thẻ HTML
6 onmouseenter Tương tự như onmouseover
7 onmouseleave Tương tự như onmouseout
8 onmousemove Xảy ra khi con chuột di chuyển bên trong thẻ HTML
9 onkeydown Xảy ra khi gõ một phím bất kì vào ô input
10 onload Xảy ra khi thẻ HTML bắt đầu chạy, nó giống như hàm khởi tạo trong lập trình hướng đối tượng vậy đó.
11 onkeyup Xảy ra khi bạn gõ phím nhưng lúc bạn nhã phím ra sẽ được kích hoạt
12 onkeypress Xảy ra khi bạn nhấn môt phím vào ô input
14 onblur Xảy ra khi con trỏ chuột rời khỏi ô input
15 oncopy Xảy ra khi bạn copy nội dung của thẻ
16 oncut Xảy ra khi bạn cắt nội dung của thẻ
17 onpaste Xảy ra khi bạn dán nội dung vào thẻ

 

VD:

- onclick

<html>
<body>
<script>
    function show_click() {
        alert('xin chao');
    }
</script>
<input onClick = "show_click()" >    
</body>
</html>

- onekeyup

<html>
  <body>
    <script language="javascript">
     
      function show_result()
      {
        // Lấy hai thẻ HTML
        var input = document.getElementById("message");
        var div = document.getElementById("result");
         
        // Gán nội dung ô input vào thẻ div
        div.innerHTML = input.value;
      }
    </script>
    <input type="text" id="message" value="" onkeyup="show_result()"/>
    <div id="result"></div>
  </body>
</html>

- oncopy

<html>
  <body>
    <script language="javascript">
      // Hàm show kết quả
      function show_message()
      {
        alert("Bạn đã copy thành công");
      }
    </script>
    <h3>Hãy copy dòng chữ dưới đây:</h3>
    <div oncopy="show_message()">Chào mừng các bạn đến với website freetuts.net</div>
  </body>
</html>

- onload

<html>
<body>
    Xin chao
</body>
</html>
<script>
        alert(1);
            window.onload = function()
            {
                alert(3);
            };
        alert(2);
</script>

- onblur

<html>
<body>
<script>
    function check(){
        var input = document.getElementById("input");
        if(!input.value){
            alert('khong dc bo trong')
        }
    }
</script>
    <input type="text" onblur="check()" id="input">
</body>
</html>

 - Hàm addEventListener() trong Javascript

Cú pháp :

elementObject.eventName  = function(){ // elementObject là đối tượng HTML mà chúng ta sử dụng DOM để lấy - eventName là tên của event bỏ "on" như là click,change ...
    // do something
};

VD:  Người dùng click chuột phải vào button xuất hiện thông báo.

<html>
    <body>
        <input type="button" id="show-btn" value="Click me" />
         
        <script language="javascript">
            // Lấy đối tượng
            var button = document.getElementById("show-btn");
             
            // Thêm sự kiện cho đối tượng
            button.onclick = function()
            {
              alert("Bạn vừa click vào button");
            };

           // button.addEventListener
        </script>
    </body>
</html>

- Hàm removeEventListener() trong Javascript

Cú pháp: 

object.removeEventListener("click", some_action);

Ví dụ: Xây dựng một ứng dụng khi di chuyển chuột thì sẽ xuất hiện một dãy số ngẫu nhiên, nếu người dùng click vào button Stop Random thì sẽ dừng random dãy số đó.

<html>
    <body>
      
      	<div id="result"></div>
      	<input type="button" value="Stop Random" id="stop_random" />
        
        <script language="javascript">
          	// Bước 1: Lấy các đối tượng
          	var result = document.getElementById("result");
          	var button = document.getElementById("stop_random");
          	var html = document.getElementsByTagName("html")[0];
          
          	// Bước 2: Định nghĩa hành động hiển thị dãy số random
          	function do_random()
            {
              	var randomString = Math.random();
              	result.innerHTML = randomString;
            }
          	
          	// Bước 3: Thêm hành động do_random cho sự kiện mousemove thẻ <html>, 
            html.addEventListener("mousemove", do_random);
          
          	// Bước 4: Thêm sự kiện click cho button
            button.addEventListener("click", function(){
              	// Xóa hành động do_random khỏi sự kiện mousemove
              	html.removeEventListener("mousemove", do_random);
            });    	
        </script>
    </body>
</html>

 

+3