Phương thức addEventListener

Phương thức addEventListener cho phép gán trình xử lý sự kiện cho một phần tử. Với nó, bạn có thể chỉ định, ví dụ, phải làm gì khi nhấp chuột vào nút hoặc phải làm gì khi nhập văn bản vào trường văn bản. Trong tham số đầu tiên, chúng ta chỉ định loại sự kiện được truyền, trong tham số thứ hai - hàm, mà sẽ được kích hoạt sau sự kiện được chỉ định trong tham số đầu tiên. Trong tham số tùy chọn thứ ba, chúng ta truyền đặc tính của đối tượng (once, capture, passive) hoặc tham số useCapture.

Cú pháp

phần tử.addEventListener('loại sự kiện', hàm, [đặc tính đối tượng]);
hoặc
phần tử.addEventListener('loại sự kiện', hàm, [useCapture]);

Ví dụ

Hãy làm sao để khi nhấp vào nút sẽ hiển thị thông báo:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click', function() {
	alert('message');
});

Ví dụ

Hãy viết mã để khi mất focus trong input thông báo sẽ được hiển thị với văn bản từ input đó:

<input id="input" value="text">

let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	alert(this.value);
});

Ví dụ

Hãy làm sao để khi nhấp vào nút, thông báo chỉ được hiển thị trong console một lần duy nhất. Để làm điều này, chúng ta sử dụng tham số thứ hai:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click',
	function() {
		console.log('message');
	},
	{
		once: true
	}
);

Ví dụ

Tham số passive cấm gọi phương thức event.preventDefault khi xử lý sự kiện. Hãy áp dụng phương thức event.preventDefault vào ví dụ trước, và cũng chỉ định trong tham số passive giá trị true:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('No message');
	},
	{
		passive: true
	}
);

Sau khi thực thi mã chúng ta sẽ thấy các thông báo sau:

'No message';
'Unable to preventDefault inside passive event listener invocation.'

Ví dụ

Tham số useCapture với giá trị true thể hiện sự nổi bọt của sự kiện từ phần tử bên trong ra bên ngoài, với giá trị false - từ ngoài vào trong phần tử. Khi truyền tham số useCapture, tên của nó được bỏ qua và chỉ ghi đơn giản là true hoặc false. Hãy xem cách sự kiện nổi bọt trong phần tử cha và phần tử con khi nhấp vào chúng:

<div id="parent">Parent
	<p id="child">Child</p>
</div>

#parent{
	width: 60px;
	padding: 10px;
	border: 1px solid red;
	text-align: center;
}
#child{
	width: 60px;
	marging-right: 40px;
	border: 1px solid blue;
	text-align: center;
}

let parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
	() => alert('parent'), 
	true
);
child.addEventListener('click',
	() => alert('child'), 
	true
);

Xem thêm

phương thức removeEventListener,
loại bỏ sự kiện khỏi phần tử