Javascript: Phương thức addEventListener thêm xử lý sự kiện – Đại Phố Web & Hosting

Posted on by mtoplistChuyên mục:Top List

Phương thức document.addEventListener() thêm một đoạn chương trình xử lý sự kiện vào đối tượng document.

Bạn cũng có thể sử dụng phương thức element.addEventListener() để đính kèm một trình xử lý sự kiện vào một phần tử được chỉ định.

Cú pháp

event
Bắt buộc.

Một chuỗi chỉ định tên của sự kiện.

Lưu ý: Không sử dụng tiền tố on. Ví dụ: sử dụng click thay vì onclick.

function
Bắt buộc.

Chỉ định hàm để chạy khi sự kiện xảy ra.

Khi sự kiện xảy ra, một đối tượng sự kiện được truyền cho hàm dưới dạng tham số đầu tiên. Loại đối tượng sự kiện phụ thuộc vào sự kiện được chỉ định. Ví dụ: sự kiện click thuộc đối tượng MouseEvent.

Giá trị trả về

Không có giá trị trả về

Phiên bản DOM: DOM Level 2 Events

Ví dụ

Gắn sự kiện nhấp chuột vào document. Khi người dùng nhấp vào bất kỳ đâu trong trang HTML, xuất câu Hello World vào phần tử <p> có id="demo":

<!DOCTYPE html>
<html>
<body>
	<p>This example uses the addEventListener() method to attach a click event to the document.</p>
	<p>Click anywhere in the document.</p>
	<p><strong>Note:</strong> The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.</p>
	<p id="demo"></p>
	<script>
		document.addEventListener("click", function()
			{
				document.getElementById("demo").innerHTML = "Hello World!";
			});
	</script>
</body>
</html>

Bạn cũng có thể tham chiếu tới một hàm được đặt khai báo ở đâu đó:

<!DOCTYPE html>
<html>
<body>
	<p>This example uses the addEventListener() method to execute a function when a user clicks anywhere in the document.</p>
	<p id="demo"></p>
	<script>
		document.addEventListener("click", myFunction);
		function myFunction()
		{
			document.getElementById("demo").innerHTML = "Hello World";
		}
	</script>
</body>
</html>

mtoplist