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.

	
	
	
	



	
Click vào chữ 'click' để xem kết quả
	
 Click
	
		var element = document.getElementById('container');
		element.addEventListener('click', function() {
			alert('Bạn vừa click');
		})
	

Xem Kết Quả

VD: Thêm sự kiện cho đối tượng window.

	
	
	
	



	
Kéo dãn của sổ trình duyệt để xem kết quả
	
 Click
	
		window.addEventListener('resize', getResize);
        function getResize()
        {
        	alert('Bạn vừa thay đổi kích cỡ màn hình');
        }
	

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.

	
	
	
	



	
Click vào chữ 'click' để xem kết quả
	
Click
	
		var element = document.getElementById('container');
		element.addEventListener('click', getClick );
		function getClick()
		{
			alert('Bạn vừa click');
		}
		element.removeEventListener('click', getClick);
	

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.