01/10/2018, 11:24

Cơ chế hoạt động của event trong javascript

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
Mọi người giải thích giúp em cơ chế hoạt động ở cái đoạn code này với ạ

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Khi sự kiện onclick bốc cháy thì giá trị truyền vào cho tham số event là gì? Và nó được truyền như thế nào?

viết 13:39 ngày 01/10/2018

Thế qái nào mà lại có cụm “sự kiện onclick bốc cháy” nhỉ? Bạn google dịch chữ “fire” à?

Khi truyền đi một sự kiện (emit an event) thì cái người tạo ra sự kiện ấy sẽ truyền theo tên sự kiện, hay còn đc hiểu là định danh cho sự kiện ấy. Và truyền thêm data nữa.

Tên/định danh cho sự kiện là cái để phân biện giữa các sự kiện với nhau. Ví dụ trong bài này là bạn đang bắt sự kiện “click”, thì “click” là tên sự kiện, dùng để phân biện với các sự kiện khác (mouseover, keyup)

Giờ đang dùng “click” là sự kiện của chuột, thì nó sẽ trả về data = các thông tin liên quan khi bạn dùng chuột click. Các thông tin có thể gồm phần tử đang click vào là gì, tọa độ chuột tại đó là bao nhiêu.
Thì data này chính là cái “event” được truyền vào function callback kìa. (callback hiểu nôm na là “gọi sau”, tức là sau khi click xong thì gọi hàm đấy) để biết data gồm những gì thì console.log ra là dc.

Đấy là khái niệm về event nói chung. Trong trường hợp của bạn, “click” là sự kiện có sẵn, nhưng với những ngôn ngữ/trg hợp khác, bạn/coder có thể tự tạo sự kiện, khi ấy bạn có thể tự đặt tên sự kiện và đương nhiên là tự định nghĩa data truyền vào.

Với tất cả kiến thức ở trên thì cái code bạn đưa hiểu là

Đang lắng nghe sự kiện click, tức là cứ dùng chuột click là nó nhẩy vào hàm này. Thế nên có thêm cái điều kiện if Nếu click vào đúng đối tượng (target) là modal thì đổi style display của modal element thành none

Bài liên quan
0