Trong bài này mình sẽ giới thiệu đến mọi người về xử lý sự kiện trong DOM javascript.
1, Thêm sự kiện bằng HTML attribute.
-Như ở series học HTML mình cũng có nói qua với các bạn về các attribute như: onClick, onMouseover,.... Dùng để bắt các sự kiện và thực thực thi hành động bằng javascript. Và giá trị của các thẻ này là code javascript.
VD: Xuất ra thông báo 'bạn vừa click' khi click vào thẻ div sau:
<div id="series" onclick="alert('Bạn vừa click')">Học CSS</div>
-Tương tự các bạn cũng có thể gọi hàm trong attribute đó.
VD: Khi rê chuột vào thẻ div sau thì sẽ gọi hàm show().
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Toidicode.com javascript</title>
</head>
<body>
<div >Di chuột vào chữ Học css để xem kết quả</div>
<div id="series" onmouseover="show()">Học CSS</div>
<script type="text/javascript">
function show(){
alert('Bạn vừa rê chuột vào')
}
</script>
</body>
</html>
Danh sách các event attribute
| Sự kiện | HTML5 | Mô tả |
|---|---|---|
| onafterprint | √ | Kích hoạt sau khi một tài liệu được in |
| onbeforeprint | √ | Kích hoạt trước khi một tài liệu được in |
| onbeforeonload | √ | Kích hoạt trước khi một tài liệu được tải |
| onerror | √ | Kích hoạt khi một lỗi xảy ra |
| onhaschange | √ | Kích hoạt khi một tài liệu đã thay đổi |
| onload | Kích hoạt khi một tải liệu được tải | |
| onmessage | √ | Kích hoạt khi một thông báo được kích hoạt (chạy) |
| onoffline | √ | Kích hoạt khi một tài liệu ở ngoại tuyến (bị ngắt mạng) |
| ononline | √ | Kích hoạt khi một tài liệu ở dạng trực tuyến |
| onpagehide | √ | Kích hoạt khi một cửa sổ bị ẩn |
| onpageshow | √ | Kích hoạt khi một cửa sổ trở lên được nhìn thấy (hiện lên) |
| onpopstate | √ | Kích hoạt khi lịch sử của cửa sổ thay đổi |
| onredo | √ | Kích hoạt khi một tài liệu thực hiện một redo |
| onresize | √ | Kích hoạt khi một cửa sổ được thay đổi lại kích thước |
| onstorage | √ | Kích hoạt khi một tài liệu được tải |
| onundo | √ | Kích hoạt khi một tài liệu thực hiện một undo |
| onunload | Kích hoạt khi một người sử dụng rời khỏi tài liệu | |
| onclick | Kích hoạt trên con chuột vừa nhấn vào phần tử | |
| ondblclick | Kích hoạt trên con chuột vừa nhấn đúp vào phần tử | |
| ondrag | Kích hoạt khi một phần tử được kéo | |
| ondragend | √ | Kích hoạt ở phần cuối của thao tác kéo |
| ondragenter | √ | Kích hoạt khi một phần tử đã được kéo tới một mục tiêu được thả xuống hợp lệ |
| ondragleave | √ | Kích hoạt khi một phần tử rời khỏi một mục tiêu thả xuống hợp lệ |
| ondragover | √ | Kích hoạt khi một phần tử đang được kéo qua một mục tiêu có thể thả xuống hợp lệ |
| ondragstart | √ | Kích hoạt ở phần đầu của một hoạt động kéo |
| ondrop | √ | Kích hoạt khi một phần tử được kéo đang được thả xuống |
| onmousedown | Kích hoạt khi một nút chuột (chuột trái hay phải) được nhấn | |
| onmousemove | Kích hoạt khi con trỏ chuột di chuyển | |
| onmouseout | Kích hoạt khi con trỏ chuột rời khỏi một phần tử | |
| onmouseover | Kích hoạt khi con trỏ chuột di chuyển qua một phần tử | |
| onmouseup | Kích hoạt khi một nút chuột được thả ra | |
| onmousewheel | √ | Kích hoạt khi sử dụng bánh xe chuột |
| onscroll | √ | Kích hoạt khi một thanh cuốn của phần tử được cuốn |
2, Thêm sự kiện bằng javascript.
-Để thêm sự kiện bằng javascript chúng ta sử dụng cú pháp:
element.eventName = function ()
{
//code
}
Trong đó:
- element là các đối tượng HTML (được gọi bằng các phương thức getElement...).
- eventName là tên các sự kiện như onclick,onmouseover,...
VD: Thêm sự kiện khi con trỏ chuột chạm vào thẻ html có id='jav'.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Toidicode.com javascript</title>
</head>
<body>
<div >Di chuột vào chữ Học javascript để xem kết quả</div>
<div id="jav" >Học javascript</div>
<script type="text/javascript">
//chọn thẻ có id = jav
var element = document.getElementById('jav');
//Thêm sự kiện
element.onmouseover = function (){
alert('Bạn vừa di chuột vào');
};
</script>
</body>
</html>
-Trong trường hợp mà đối tượng HTML các bạn chọn có nhiều hơn 1 thì các bạn cần phải chạy một vòng for để duyệt và add sự kiện cho nó.
VD:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Toidicode.com javascript</title>
</head>
<body>
<div >Di chuột vào chữ Học javascript để xem kết quả</div>
<ul>
<li class="list">Li 1</li>
<li class="list">Li 2</li>
<li class="list">Li 3</li>
<li class="list">Li 4</li>
<li class="list">Li 5</li>
<li class="list">Li 6</li>
<li class="list">Li 7</li>
</ul>
<script type="text/javascript">
//chọn thẻ có class = list
var element = document.getElementsByClassName('list');
//Thêm sự kiện
for(i=0; i<element.length; i++) {
element[i].onclick = function () {
alert('Bạn vừa click vào thẻ ' + this.innerText);
};
}
</script>
</body>
</html>
3, Lời Kết.
-Như vậy mình đã giới thiệu xong với vọi người về DOM element trong javascript rồi. Các bạn cố gắng thực hành nhiều về phần này cho nhớ.
Đăng ký nhận tin.
Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!
Bạn ơi mình click vào li1 ,li2... nó vẫn hiển thị thông báo là bạn vừa click vào Li7 (Có thể do biến i nó lưu lại). Chỗ này xử lý thế nào bạn nhỉ.
Toàn
7 năm trước
Chào Toàn,
Ví dụ đó mình đã không test kỹ, và mình đã sử lại rồi mời bạn xem lại à (lỗi do function closures )!.
Link Update: https://toidicode.com/live/?id=85
Vũ Thanh Tài
7 năm trước
Bạn cho mình hỏi trong phần thí dụ thứ 2 duyệt qua các thẻ ul li trong trong phần thêm sự kiện javascript. Bạn khai báo var j = i để làm gì vậy ?
Hien Nguyen
6 năm trước
Cảm ơn bạn nhé!
Mình nhầm đó ạ.
Vũ Thanh Tài
6 năm trước
admin ơi trang web này này https://mangapark.net/manga/daichohen-doraemon/i1643911 có mấy cái menu mọi khi bấm chọn 1 mục xuống dưới thì nó sẽ load sang trang web có chứa danh sách à ,menu đó dùng sự kiện onchange à hay onload????
[img]https://i36.photobucket.com/albums/e23/longyu/menu_zpsgqpcphyp.jpg[/img]
jonh777
5 năm trước
onchange nhé bạn!
Vũ Thanh Tài
5 năm trước
menu đó chắc cũng ghi mấy bài hướng dẫn trên web
jonh777
5 năm trước
làm menu đó 0 cần lệnh if else hả bạn
jonh777
5 năm trước
admin đâu rồi
jonh777
5 năm trước
vũ thành tài ,mình tưởng cái sự kiện khi ta chọn 1 menu option và bấm xuống thì nó chuyển tới tới trang web liên quan tới cái menu đó là onloiad ,onuload chứ ,thí dụ bấm menu trên trangthu3 nó đi tới trang thứ 3,bạn đâu rồi
jonh777
5 năm trước
bạn ơi trong javascript nếu muốn tạo hiệu ứng chuyển sang trang web khác khi chọn 1 menu có liên kết đến web đó thì dùng document.form à??????
jonh777
5 năm trước
bạn ơi ,onclick áp dụng được cho nút button,thế nó áp dụng cho onload được 0,à bạn docuemt.getelementbyid(id) áp dụng cho function tenham() được 0,mà hình như đối số trong hàm nhiều 0 dùng return được???????????????
jonh777
5 năm trước
bạn ơi document.getelementbyclassname áp dụng cho <select name"="name"> được 0,cái menu xổ xuống đó
jonh777
5 năm trước
document.getElementsByTagName('class_name')phương thức này chỉ để select element theo class name thôi nhé bạn!
Vũ Thanh Tài
5 năm trước
https://mangapark.net/,https://mangakakalot.com/manga/tomodachi bạn ơi 2 trang web xem truyện này làm bằng html dom và javascript à???????????????????????????????
jonh777
5 năm trước
mình nói mấy cái menu của 2 trang web xem truyện đó
jonh777
5 năm trước
bạn ơi mình đã biết cách làm hộp lựa chọn <select></select><option></option> hoạt động rồi đó là sử dụng hàm formHandle ,và dùng biến var là URL=document.form.site.option cộng với window.location.href=url;thì sẽ làm cho cho option chuyển hướng trang ,cái này gọi là combo box mà,dù mình cũng chưa hài làm ,vì khi chuyển hướng trang thì trang kế tiếp không còn menu combo box
jonh777
5 năm trước
var url=document.form.site.option(selectedindex).value;
jonh777
5 năm trước
var url=document.form.site.option(document.form.site.selectedindex).value chứ
jonh777
5 năm trước
bạn đâu rồi
jonh777
5 năm trước
bạn tài mãnh khoẻ chứ,dạo này còn on ở web này không
jonh777
4 năm trước