Bài 13: DOM event trong javascript
Bài 13: DOM event trong javascript
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ự […]
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ớ.
Lượt xem : 238
