Trang chủ » Bài 14: addEventListener() và removeEventListener() trong javascript

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

Tác giả:
Đánh giá bài đăng
0
67

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.





	
	
	toidicode.com
	



	
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.





	
	
	toidicode.com
	



	
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.





	
	
	toidicode.com
	



	
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.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Facebook Messenger Chat Zalo
Messenger Zalo