Sự kiện onclick trong html là một trong những keyword được search nhiều nhất trên Google về chủ đề sự kiện onclick trong html. Trong bài viết này, xaydungweb.vn sẽ viết bài viết Tổng hợp sự kiện onclick trong html mới nhất 2020.

Tổng hợp sự kiện onclick trong html mới nhất 2020

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

– Thông thường, event là những hành động của user khi tương tác lên phần tử HTML.

– gợi ý:

=> ví dụ, bạn hãy thử nhấn chuột vào đây

=> gợi ý, bạn hãy thử

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

Khi user nhấn chuột vào phần tử, đó là một event.
Khi user gõ văn bản vào textfield, đó là một sự kiện.
Khi người dùng di chuyển con trỏ vào phần tử, đó là một sự kiện.
….

2) Các event 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 mục một vài sự kiện đa dạng mà ta thường dùng trong JavaScript.

Tên event	mô tả
onclick	sự kiện xảy ra khi user nhấn chuột vào phần tử
ondblclick	sự kiện xảy ra khi người dùng click kép chuột vào phần tử
onmouseenter	sự kiện xảy ra khi người dùng di chuyển con trỏ vào phần tử
onmouseleave	sự kiện xảy ra khi user di chuyển con trỏ ra khỏi phần tử.
onkeydown	sự kiện xảy ra khi user vừa mới bấm một phím
onkeyup	event xảy ra khi người dùng nhả phím ra
oncopy	event xảy ra khi user copy content của phần tử
oncut	event xảy ra khi người dùng cắt nội dung của phần tử
onpaste	event xảy ra khi người dùng dán content vào phần tử
onchange	sự kiện xảy ra khi người dùng refresh trị giá của phần tử

Bạn sẽ được tìm hiểu đầy đủ all các event trong bài chỉ dẫn nâng cao về event

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

– “Bắt sự kiện” là khi một event nào đó xảy ra thì ta mong muốn JavaScript giận dữ lại với sự kiện đó bằng việc thực thi một đoạn mã định hình.

– ví dụ, tôi muốn khi người dùng click chuột vào nút này thì câu lệnh alert(‘Xin chào JavaScript’) sẽ được thực thi.

– gợi ý, tôi muốn:

– Khi user 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 user 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) mẹo bắt event trong JavaScript

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

(1) Phần tử sử dụng để xảy ra event.
(2) event 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”>

gợi ý

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.

<html>
<body>
    <buttonondblclick="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>

nhìn thấy ví dụ

ví dụ

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

<html>
<body>
    <buttononclick="hello()">Xin chàobutton>
    <pid="demo">p>
    <script>functionhello()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>

nhìn thấy gợi ý

– lưu ý: Với cùng một phần tử, ta đủ nội lực bắt cho nó nhiều event.

ví dụ

Phần tử

có id là dùng thử bên dưới được bắt hai sự kiện:

Khi user 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ì event onmouseleave xảy ra và câu lệnh this.style.backgroundColor=’gray’ sẽ được thực thi.

<html>
<head>
    <styletype="text/css">#demowidth:300px;height:200px;background-color:gray;
        
    phong cách>
head>
<body>
    <divid="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 k đượ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 k được chứa ký tự là dấu nháy đơn.

gợi ý

<buttononclick="alert("Hello")">Xin chàobutton> <buttononclick='alert('Hello')'>Xin chàobutton> <buttononclick="alert('Hello')">Xin chàobutton> <buttononclick='alert("Hello")'>Xin chàobutton>

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

ví dụ

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

nhìn thấy gợi ý

gợi ý

<html>
<body>
    <textareacols="50"rows="15"oncopy="alert('Bạn vừa copy content 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 tut học lập trình webtextarea>
body>
html>

xem gợi ý

gợi ý

<html>
<body>
    <selectonchange="alert('Bạn vừa cải thiện trị giá của phần tử này')">
        <optionvalue="html">HTMLoption>
        <optionvalue="css">CSSoption>
        <optionvalue="javascript">JavaScriptoption>
        <optionvalue="mysql">MySQLoption>
        <optionvalue="php">PHPoption>
    select>
body>
html>