Bài trước mình đã giới thiệu với mọi người 2 cách thêm sự kiện trong javascript rồi, ở bài này mình sẽ giới thiệu với mọi người cách thêm sự kiện cho DOM bằng hàm addEventListener(), và xóa sự kiện cho một DOM bằng hàm removeEventListener() trong javascript.
1, Hàm addEventListeners().
-Hàm addEventListener() có tác dụng thêm sự kiện cho đối tượng HTML, sử dụng với cú pháp.
element.addEventListener('eventName',functionName);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 (bỏ chữ ‘on‘) như click,mouseover,…
- functionName là tên hàm mà các bạn muốn gọi khi xảy ra sự kiện.
Hoặc bạn có thể sử dụng hàm ẩn danh với cú pháp:
element.addEventListener('eventName',function(){
//code
});VD: Thêm sự kiện click.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>toidicode.com</title>
<link rel="stylesheet" href="">
</head>
<body>
<div>Click vào chữ '<em>click</em>' để xem kết quả</div>
<p id="container"> Click</p>
<script type="text/javascript">
var element = document.getElementById('container');
element.addEventListener('click', function() {
alert('Bạn vừa click');
})
</script>
</body>
</html>
VD: Thêm sự kiện cho đối tượng window.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>toidicode.com</title>
<link rel="stylesheet" href="">
</head>
<body>
<div>Kéo dãn của sổ trình duyệt để xem kết quả</div>
<p id="container"> Click</p>
<script type="text/javascript">
window.addEventListener('resize', getResize);
function getResize()
{
alert('Bạn vừa thay đổi kích cỡ màn hình');
}
</script>
</body>
</html>
2, Hàm removeEventListener().
-Trái lại với hàm addEventListener() thì hàm removeEventListener() lại có tác dụng là xóa bỏ đi các sự kiện đang được áp lên sự kiện, sử dụng với cú pháp:
element.removeEventListener('eventName', functionName, option);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 (bỏ chữ ‘on‘) như click,mouseover,…
- functionName là tên hàm mà bạn muốn xóa bỏ hành động.
- option là các giá trị true|false (có thể bỏ trống).
VD: xóa bỏ sự kiện click.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>toidicode.com</title>
<link rel="stylesheet" href="">
</head>
<body>
<div>Click vào chữ '<em>click</em>' để xem kết quả</div>
<p id="container">Click</p>
<script type="text/javascript">
var element = document.getElementById('container');
element.addEventListener('click', getClick );
function getClick()
{
alert('Bạn vừa click');
}
element.removeEventListener('click', getClick);
</script>
</body>
</html>
3, Lời kết.
– Như vậy mình đã giới thiệu xong đến mọi người về 2 hàm addEventListener() và removeEventListener() trong Javascript rồi, 2 hàm này tính đến thời điểm mình viết bài thì hầu như nó đã được hỗ trợ trên hầu hết các trình duyệt, nên các bạn có thể yên tâm mà sử dụng.