PHẦN CƠ BẢN
VÒNG LẶP
DATA TYPES
EVENTS
DOM
BOM
OBJECT
BỔ SUNG
THỰC HÀNH
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Bắt sự kiện click trong Javascript

Trong bài này chúng ta sẽ tìm hiểu sự kiện click trong Javascript, đây là sự kiện xảy ra khi nhấp chuột vào một đối tượng HTML nào đó. Sự kiện này áp dụng cho mọi thẻ HTML.

Click là một sự kiện rất quan trọng trong các ngôn ngữ lập trình hướng sự kiện. Khi người dùng muốn thao tác với những chức năng trên phần mềm thì phải sử dụng chuột để click. Lúc này ta sẽ bắt sự kiện đó và trả kết quả về cho user.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Khi nào sử dụng sự kiện click trong Javascript?

Ta cần bắt sự kiện click khi muốn xây dựng một chức năng nào đó, và chức năng này sẽ xảy ra khi người dùng click vào một đối tượng nào đó.

Ví dụ bạn xây dựng chức năng hiển thị danh sách sinh viên, bạn xây dựng một button Hiển Thị Sinh Viên, nếu người dùng click vào button này thì sẽ gọi Ajax để lấy danh sách và trả kết quả về cho người dùng.

2. Cú pháp sự kiện click trong Javascript

Chúng ta có hai cách để bắt sự kiện click trong js, thứ nhất là gắn trực tiếp trên thẻ HTML, và thứ hai là sử dụng thông qua thuộc tính onclick của các đối tượng DOM.

Cách 1: Gắn trực tiếp trên thẻ HTML

<element onclick="event_function()"></element>

Trong đó element là thẻ HTML bạn cần bắt sự kiện click, còn event_function() chính là hàm sẽ được thực thi khi sự kiện click xảy ra.

Ví dụ: Hiển thị thông báo khi người dùng click vào một button.

Demo RUN
<input type="button" value="Click me" onclick="showMessage()"/>
<script>
    function showMessage(){
        alert('Sự kiện click xảy ra!');
    }
</script>

Cách 2: Gắn sự kiện click vào đối tượng DOM

Mình sẽ đặt id cho thẻ input trên, sau đó sử dụng các hàm hỗ trợ DOM để gọi đến thẻ này, sau đó gắn một hàm vào thuộc tính click.

Demo RUN
<input type="button" value="Click me" id="msgbtn"/>
<script>
    var input = document.getElementById('msgbtn');
    input.onclick = function(){
        alert('Bạn đã click vào thẻ này');
    };
</script>

3. Gán nhiều hành động cho sự kiện click cùng lúc

Đối với sự kiện click trong js, bạn có thể gán nhiều hành động vào nhiều thời điểm khác nhau. Tuy nhiên, nó chỉ nhận hành động mà bạn gán cuối cùng thôi nhé.

Ví dụ: Gọi đến hai thông báo khi xảy ra sự kiện click.

Demo RUN
<input type="button" value="Click me" id="msgbtn"/>
<script>
    var input = document.getElementById('msgbtn');
    input.onclick = function(){
        alert('Lần gọi thứ nhất');
    };
    
    input.onclick = function(){
        alert('Lần gọi thứ hai');
    };
</script>

Trong ví dụ trên thì chỉ có hàm thứ hai là được gọi.

Nếu bạn muốn gọi cả hai hàm tách biệt thì tốt nhất định nghĩa hai hàm riêng, sau đó gắn chung một lần vào sự kiện click.

Demo RUN
<input type="button" value="Click me" id="msgbtn"/>
<script>
    var input = document.getElementById('msgbtn');
    input.onclick = function(){
        showMsg1();
        showMsg2();
    };
    
    function showMsg1(){
        alert('Lần gọi thứ nhất');
    }
    
    function showMsg2(){
        alert('Lần gọi thứ hai');
    }
</script>

Trên là nhữn chia sẻ về sự kiện click trong javascript. Nếu có vướng mắc gì thì hãy để lại bình luận. Hay nếu bài viết có sai sót thì hãy đóng góp giúp mình nhé.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top