Bắt sự kiện click button 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.

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

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.

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.

Bài viết này được đăng tại [free tuts .net]

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.

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

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

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

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

1) Sự kiện là gì !?

- Thông thường, sự kiện là những hành động của người dùng khi tương tác lên phần tử HTML.

- Ví dụ:

• Khi người dùng click chuột vào phần tử, đó là một sự kiện.

=> Ví dụ, bạn hãy thử

• Khi người dùng gõ văn bản vào textfield, đó là một sự kiện.

=> Ví dụ, bạn hãy thử

• Khi người dùng di chuyển con trỏ vào phần tử, đó là một sự kiện.

=> Ví dụ, bạn hãy thử

Di chuyển con trỏ vào đây

• ....

2) Các sự kiện trong JavaScript

- Trong JavaScript, mỗi sự kiện sẽ tương ứng với một cái tên.

- Dưới đây là danh sách một vài sự kiện phổ biến mà ta thường dùng trong JavaScript.

Bạn sẽ được tìm hiểu đầy đủ tất cả các sự kiện trong bài hướng dẫn nâng cao về sự kiện

3) Bắt sự kiện là gì !?

- "Bắt sự kiện" là khi một sự kiện nào đó xảy ra thì ta muốn JavaScript phản ứng lại với sự kiện đó bằng việc thực thi một đoạn mã xác định.

- Ví dụ, tôi muốn khi người dùng thì câu lệnh alert('Xin chào JavaScript') sẽ được thực thi.

- Ví dụ, tôi muốn:

- Khi người dùng di chuyển con trỏ vào phần tử này thì màu nền của phần tử này sẽ chuyển sang màu hồng (tức là câu lệnh this.style.backgroundColor='pink' được thực thi)

- Khi người dùng di chuyển con trỏ ra khỏi phần tử này thì màu nền của phần tử này sẽ chuyển sang màu trắng (tức là câu lệnh this.style.backgroundColor='white' được thực thi)

4) Cách bắt sự kiện trong JavaScript

- Trước khi bắt sự kiện thì ta cần phải xác định rõ ba thành phần:

• (1) Phần tử dùng để xảy ra sự kiện.
• (2) Sự kiện sẽ xảy ra.
• (3) Đoạn mã sẽ được thực thi khi sự kiện xảy ra.

- Dưới đây là cú pháp dùng để bắt sự kiện:

<Tên-phần-tử Tên-sự-kiện="đoạn mã sẽ được thực thi khi sự kiện xảy ra">

Khi người dùng click kép chuột vào nút "Xem kết quả" thì đoạn mã:

var a = 100;
var b = 50;
var result = (a + b)*2;
alert('Kết quả của biểu thức là: ' + result) sẽ được thực thi.

<!DOCTYPE html>
<html>
<body>
    <button ondblclick="var a = 100;var b = 50;var result = (a + b)*2;alert('Kết quả của biểu thức là: ' + result)">Xem kết quả</button>
</body>
</html>

Xem ví dụ

Khi người dùng click chuột vào nút "Xin chào" thì hàm hello() sẽ được thực thi

<!DOCTYPE html>
<html>
<body>
    <button onclick="hello()">Xin chào</button>
    <p id="demo"></p>
    <script>
        function hello(){
            var name = "Nguyễn Thành Nhân";
            var year = 1993;
            var str = "Tôi tên " + name + " sinh năm " + year;
            document.getElementById("demo").innerHTML = str;
        }
    </script>
</body>
</html>

Xem ví dụ

- Lưu ý: Với cùng một phần tử, ta có thể bắt cho nó nhiều sự kiện.

Phần tử <div> có id là demo bên dưới được bắt hai sự kiện:

• Khi người dùng di chuyển con trỏ vào nó thì sự kiện onmouseenter xảy ra và câu lệnh this.style.backgroundColor='yellow' sẽ được thực thi.
• Khi người dùng di chuyển con trỏ vào nó thì sự kiện onmouseleave xảy ra và câu lệnh this.style.backgroundColor='gray' sẽ được thực thi.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #demo{
            width:300px;
            height:200px;
            background-color:gray;
        }
    </style>
</head>
<body>
    <div id="demo" onmouseenter="this.style.backgroundColor='yellow'" onmouseleave="this.style.backgroundColor='gray'"></div>
</body>
</html>

Xem ví dụ

- Lưu ý:

• Nếu đoạn mã được viết bên trong bên trong cặp dấu nháy kép thì trong đoạn mã tuyệt đối không được chứa ký tự là dấu nháy kép.
• Nếu đoạn mã được viết bên trong bên trong cặp dấu nháy đơn thì trong đoạn mã tuyệt đối không được chứa ký tự là dấu nháy đơn.

<button onclick="alert("Hello")">Xin chào</button> <!-- SAI -->
<button onclick='alert('Hello')'>Xin chào</button> <!-- SAI -->
<button onclick="alert('Hello')">Xin chào</button> <!-- ĐÚNG -->
<button onclick='alert("Hello")'>Xin chào</button> <!-- ĐÚNG -->

5) Một số ví dụ khác

<!DOCTYPE html>
<html>
<body>
    <input type="text" onkeydown="this.style.backgroundColor='pink'" onkeyup="this.style.backgroundColor='yellow'" placeholder="gõ ký tự vào đây">
</body>
</html>

Xem ví dụ

<!DOCTYPE html>
<html>
<body>
    <textarea cols="50" rows="15" oncopy="alert('Bạn vừa sao chép nội dung của phần tử này')" oncut="alert('Bạn vừa cắt nội dung của phần tử này')" onpaste="alert('Bạn vừa dán nội dung vào phần tử này')">Tài liệu hướng dẫn học lập trình web</textarea>
</body>
</html>

Xem ví dụ

<!DOCTYPE html>
<html>
<body>
    <select onchange="alert('Bạn vừa thay đổi giá trị của phần tử này')">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
        <option value="mysql">MySQL</option>
        <option value="php">PHP</option>
    </select>
</body>
</html>

Xem ví dụ