Thêm trình xử lý sự kiện trong vòng lặp trong JavaScript

Bây giờ hãy học cách thêm hàng loạt trình xử lý sự kiện cho các phần tử. Ví dụ, giả sử chúng ta có các đoạn văn:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Giả sử chúng ta cũng có một hàm:

function func() {
	console.log('!');
}

Hãy lặp qua các đoạn văn của chúng ta và thêm hàm func làm trình xử lý sự kiện nhấp chuột cho mỗi đoạn văn:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

Hãy tiến xa hơn và làm sao để khi nhấp vào bất kỳ đoạn văn nào, nội dung đoạn văn đó sẽ được hiển thị. Tuy nhiên, có một vấn đề: có nhiều đoạn văn, nhưng chỉ có một hàm xử lý. Làm thế nào để chúng ta phân biệt các đoạn văn bên trong hàm xử lý?

Đối tượng this sẽ giúp chúng ta trong việc này - khi hàm được gọi tại thời điểm sự kiện, đối tượng này sẽ trỏ đến phần tử nơi sự kiện đó xảy ra. Hãy sửa mã hàm func của chúng ta theo như đã nói:

function func() {
	console.log(this.textContent); // hiển thị nội dung đoạn văn
}

Cho hàm sau:

function func() {
	this.value = Number(this.value) + 1;
}

Cũng có các ô input. Hãy làm sao để khi mất tiêu điểm (blur) ở bất kỳ ô input nào của chúng ta, hàm đã cho ở trên sẽ được thực thi.

Cho các đoạn văn có chứa số. Hãy làm sao để khi nhấp vào bất kỳ đoạn văn nào, số trong đó sẽ được bình phương lên.