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>

 

Bài liên quan

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...

Pham Dat viết 2 tuần trước

Các sự kiện trong JavaScript

Sự kiện HTML là “sự kiện” xảy ra với các phần tử HTML. Khi JavaScript được sử dụng trong các trang HTML, JavaScript có thể “tác động trở lại” với những sự kiện này. Sự kiện HTML Một sự kiện HTML có thể là một cái gì đó trình duyệt làm, ...

Hoàng Hải Đăng viết 14:44 ngày 07/09/2018

Xử lý sự kiện trong Reactjs

Xin chào tất cả mọi người, dạo gần đây mình có mình có được tham gia một dự án làm về Reactjs, thì mình có tìm hiểu một số phần về Component, JSX, Prop... và một số phần căn bản của Reactjs thì mình thấy phần xử lý sự kiện (Handling Event) tương đối là quan trọng nên viết bài này để vừa ôn tập lại ...

Trịnh Tiến Mạnh viết 18:02 ngày 12/08/2018

Scrum cho người mới bắt đầu - Phần cuối: Các sự kiện trong Scrum

Trước tiên, ở phần này mình sẽ dẫn lại liên kết của 3 phần trước để cho mọi người tiện theo dõi nhé : Scrum cho người mới bắt đầu - Phần 1: Tổng quan về Agile Scrum cho người mới bắt đầu - Phần 2: Scrum cơ bản Scrum cho người mới bắt đầu - Phần 3: Nhóm scrum Oki, ở phần này nội dung chúng ...

Tạ Quốc Bảo viết 18:01 ngày 12/08/2018

Azure - Kiến trúc hướng sự kiện trong cloud với lưới sự kiện Azure(Phần II)

Xử lý Sự kiện với Chức năng Azure Bây giờ đến phần thú vị của việc đăng ký các sự kiện. Trình xử lý đầu tiên của chúng tôi sẽ là một chức năng Azure. Để tìm hiểu các khái niệm cơ bản về tạo một hàm, xem bit.ly/2A6pFgu. Đối với tình huống này, tôi muốn đăng ký cụ thể các sự kiện cho nhân viên được ...

Trịnh Tiến Mạnh viết 17:28 ngày 12/08/2018
+3