DANH MỤC: JAVASCRIPT CƠ BẢN

Bài 14: addEventListener() và removeEventListener() trong javascript


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>

Xem Kết Quả

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>

Xem Kết Quả

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>

Xem Kết Quả

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.

Nguồn: Toidicode.com

Thông tin tác giả

Vũ Thanh Tài

Vũ Thanh Tài

The best way to learn is to share

Hãy tham gia group facebook để cùng giao lưu chia sẻ kiến thức! Tham Gia