Ủy quyền sự kiện là một mẫu dựa trên khái niệm Bong bóng sự kiện. Đây là một mẫu xử lý sự kiện cho phép bạn xử lý các sự kiện ở cấp độ cao hơn trong cây DOM khác với cấp độ mà sự kiện được nhận lần đầu tiên.
Có một phiên bản video của chủ đề này nếu bạn thích điều đó.
Giới thiệu ngắn gọn về tuyên truyền sự kiện
Theo mặc định, các sự kiện được kích hoạt trên một phần tử sẽ truyền lên cây DOM tới cha của phần tử, tổ tiên của nó và tiếp tục cho đến phần tử gốc (html).
Nhìn vào ví dụ này:
<div>
<span>
<button>Click Me!</button>
</span>
</div>
Ở đây chúng tôi có một div đó là cha mẹ của một span đến lượt nó là cha mẹ của button thành phần.
Do bong bóng sự kiện, khi nút nhận được một sự kiện, hãy nói nhấp chuộtsự kiện đó nổi lên trên cây, vì vậy span và div tương ứng cũng sẽ nhận được sự kiện.
Nếu bạn muốn tìm hiểu chi tiết hơn về bong bóng sự kiện, bạn có thể đọc bài viết của tôi về nó tại đây.
Ủy quyền sự kiện hoạt động như thế nào?
Với ủy quyền sự kiện, thay vì xử lý sự kiện nhấp chuột trên buttonbạn có thể xử lý nó trên div.
Ý tưởng là bạn “đại biểu” việc xử lý một sự kiện cho một phần tử khác (trong trường hợp này là div, là phần tử cha) thay vì phần tử thực (nút) đã nhận sự kiện.
Đây là những gì tôi muốn nói về điều đó trong mã:
const div = document.getElementsByTagName("div")[0]
div.addEventListener("click", (event) => {
if(event.target.tagName === 'BUTTON') {
console.log("button was clicked")
}
})
Các event đối tượng có một target thuộc tính chứa thông tin về phần tử thực sự nhận được sự kiện. Trên target.tagNamechúng tôi lấy tên của thẻ cho phần tử và chúng tôi kiểm tra xem đó có phải là CÁI NÚT.
Với mã này, khi bạn bấm vào buttonsự kiện bong bóng lên đến div mà xử lý các sự kiện.
Lợi ích của Ủy quyền sự kiện
Ủy quyền sự kiện là một mẫu hữu ích cho phép bạn viết mã rõ ràng hơn và tạo ít trình xử lý sự kiện hơn với logic tương tự.
Ý tôi là gì bởi điều này? Nhìn vào mã này:
<div>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
Ở đây chúng ta có 3 nút. Giả sử chúng ta muốn xử lý một sự kiện nhấp chuột trên mỗi nút, sao cho khi nhấp vào nút đó, văn bản của nút đó sẽ được ghi vào bảng điều khiển. Chúng ta có thể thực hiện điều đó như thế này:
const buttons = document.querySelectorAll('button')
buttons.forEach(button => {
button.addEventListener("click", (event) => {
console.log(event.target.innerText)
})
})
Tôi đang sử dụng querySelectorAll ở đây vì nó trả về một NodeList mà tôi có thể sử dụng forEach phương pháp cho. getElementsByTagName trả về một HTMLCollection mà không có forEach phương pháp.
Khi bạn nhấp vào nút đầu tiên, bạn đã đăng nhập “Nút 1” trên bảng điều khiển. Đối với nút thứ hai, “Nút 2” được ghi lại và đối với nút thứ ba, “Nút 3” được ghi lại.
Mặc dù điều này hoạt động như chúng tôi muốn, nhưng chúng tôi đã tạo ba trình xử lý sự kiện cho ba nút.
Vì sự kiện nhấp chuột trên các nút này lan truyền lên trên trong cây DOM, nên chúng ta có thể sử dụng cha mẹ hoặc tổ tiên chung mà họ phải xử lý sự kiện. Trong trường hợp này, chúng tôi ủy quyền cho một cha mẹ chung mà họ chia sẻ để xử lý logic mà chúng tôi muốn.
Đây là cách:
const div = document.querySelector('div')
div.addEventListener("click", (event) => {
if(event.target.tagName === 'BUTTON') {
console.log(event.target.innerText)
}
})
Bây giờ, chúng ta chỉ có một trình xử lý sự kiện, nhưng logic tương tự: khi bạn nhấp vào nút đầu tiên, “Nút 1” được ghi vào bảng điều khiển và điều tương tự cho các nút khác.
Ngay cả khi chúng tôi thêm một nút bổ sung như thế này:
<div>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
</div>
Chúng tôi sẽ không phải thay đổi mã JavaScript vì nút mới này cũng chia sẻ div cha mẹ (mà chúng tôi đã ủy quyền để xử lý sự kiện) bằng các nút khác.
kết thúc
Với ủy quyền sự kiện, bạn tạo ít trình xử lý sự kiện hơn và thực hiện logic dựa trên sự kiện tương tự ở một nơi. Điều này giúp bạn thêm và xóa các thành phần dễ dàng hơn mà không phải thêm mới hoặc xóa các trình lắng nghe sự kiện hiện có.
Có thể ủy quyền sự kiện do sự lan truyền sự kiện trong DOM, trong đó sự kiện mà phần tử con nhận được cũng được chuyển đến phần tử cha và tổ tiên của phần tử con. Một lần nữa, bạn có thể đọc thêm về bong bóng sự kiện tại đây.
Cảm ơn bạn đã đọc và chúc bạn mã hóa vui vẻ!
