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 ý:
=> gợi ý, bạn hãy thử
- 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:
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>
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>
– lưu ý: Với cùng một phần tử, ta đủ nội lực bắt cho nó nhiều event.
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>
– 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.
<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
<html>
<body>
<inputtype="text"onkeydown="this.style.backgroundColor='pink'"onkeyup="this.style.backgroundColor='yellow'"placeholder="gõ ký tự vào đây">
body>
html>
<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>
<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>
nguồn: http://webcoban.vn/
