Di chuyển chuột JavaScript

Sự kiện

Events will show up here! 2 xảy ra khi con trỏ chuột đi qua một phần tử và

Events will show up here! 3 – khi nó rời khỏi

Những sự kiện này rất đặc biệt, bởi vì chúng có thuộc tính

Events will show up here! 4. Tài sản này bổ sung cho

Events will show up here! 5. Khi một con chuột rời khỏi phần tử này để chuyển sang phần tử khác, một trong số chúng sẽ trở thành

Events will show up here! 5 và phần tử còn lại –

Events will show up here! 4

Cho

Events will show up here! 2

• Events will show up here! 9 – là phần tử nơi con chuột đi qua
  let parent = document.getElementById('parent'); parent.onmouseover = parent.onmouseout = parent.onmousemove = handler; function handler(event) { let type = event.type; while (type.length < 11) type += ' '; log(type + " target=" + event.target.id) return false; } function clearText() { text.value = ""; lastMessage = ""; } let lastMessageTime = 0; let lastMessage = ""; let repeatCounter = 1; function log(message) { if (lastMessageTime == 0) lastMessageTime = new Date(); let time = new Date(); if (time - lastMessageTime > 500) { message = '------------------------------\n' + message; } if (message === lastMessage) { repeatCounter++; if (repeatCounter == 2) { text.value = text.value.trim() + ' x 2\n'; } else { text.value = text.value.slice(0, text.value.lastIndexOf('x') + 1) + repeatCounter + "\n"; } } else { repeatCounter = 1; text.value += message + "\n"; } text.scrollTop = text.scrollHeight; lastMessageTime = time; lastMessage = message; }

  0 – là yếu tố mà từ đó con chuột đến (
  Events will show up here! 4 →
  Events will show up here! 5)

  Đối với

  Events will show up here! 3 thì ngược lại

  • Events will show up here! 9 – là phần tử mà con chuột để lại
    let parent = document.getElementById('parent'); parent.onmouseover = parent.onmouseout = parent.onmousemove = handler; function handler(event) { let type = event.type; while (type.length < 11) type += ' '; log(type + " target=" + event.target.id) return false; } function clearText() { text.value = ""; lastMessage = ""; } let lastMessageTime = 0; let lastMessage = ""; let repeatCounter = 1; function log(message) { if (lastMessageTime == 0) lastMessageTime = new Date(); let time = new Date(); if (time - lastMessageTime > 500) { message = '------------------------------\n' + message; } if (message === lastMessage) { repeatCounter++; if (repeatCounter == 2) { text.value = text.value.trim() + ' x 2\n'; } else { text.value = text.value.slice(0, text.value.lastIndexOf('x') + 1) + repeatCounter + "\n"; } } else { repeatCounter = 1; text.value += message + "\n"; } text.scrollTop = text.scrollHeight; lastMessageTime = time; lastMessage = message; }

    0 – là phần tử dưới con trỏ mới, con chuột đó đã để lại cho (
    Events will show up here! 5 →
    Events will show up here! 4)

    Trong ví dụ bên dưới, mỗi khuôn mặt và các đặc điểm của nó là các phần tử riêng biệt. Khi bạn di chuyển chuột, bạn có thể thấy các sự kiện chuột trong vùng văn bản

    Mỗi sự kiện có thông tin về cả

    Events will show up here! 5 và
    Events will show up here! 4

    Kết quả

    script. js

    Phong cách. css

    mục lục. html

    container.onmouseover = container.onmouseout = handler; function handler(event) { function str(el) { if (!el) return "null" return el.className || el.tagName; } log.value += event.type + ': ' + 'target=' + str(event.target) + ', relatedTarget=' + str(event.relatedTarget) + "\n"; log.scrollTop = log.scrollHeight; if (event.type == 'mouseover') { event.target.style.background = 'pink' } if (event.type == 'mouseout') { event.target.style.background = '' } }

    body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

    Events will show up here!
    Events will show up here! 4 có thể là

    #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

    1

    Thuộc tính

    Events will show up here! 4 có thể là

    #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

    1

    Điều đó là bình thường và chỉ có nghĩa là con chuột không đến từ phần tử khác mà từ bên ngoài cửa sổ. Hoặc nó rời khỏi cửa sổ

    Chúng ta nên ghi nhớ khả năng đó khi sử dụng

    let parent = document.getElementById('parent'); parent.onmouseover = parent.onmouseout = parent.onmousemove = handler; function handler(event) { let type = event.type; while (type.length < 11) type += ' '; log(type + " target=" + event.target.id) return false; } function clearText() { text.value = ""; lastMessage = ""; } let lastMessageTime = 0; let lastMessage = ""; let repeatCounter = 1; function log(message) { if (lastMessageTime == 0) lastMessageTime = new Date(); let time = new Date(); if (time - lastMessageTime > 500) { message = '------------------------------\n' + message; } if (message === lastMessage) { repeatCounter++; if (repeatCounter == 2) { text.value = text.value.trim() + ' x 2\n'; } else { text.value = text.value.slice(0, text.value.lastIndexOf('x') + 1) + repeatCounter + "\n"; } } else { repeatCounter = 1; text.value += message + "\n"; } text.scrollTop = text.scrollHeight; lastMessageTime = time; lastMessage = message; }

    0 trong mã của mình. Nếu chúng ta truy cập vào

    #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

    5 thì sẽ xảy ra lỗi

    Sự kiện

    #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

    6 kích hoạt khi chuột di chuyển. Nhưng điều đó không có nghĩa là mọi pixel đều dẫn đến một sự kiện

    Trình duyệt thỉnh thoảng kiểm tra vị trí chuột. Và nếu nó nhận thấy những thay đổi thì sẽ kích hoạt các sự kiện

    Điều đó có nghĩa là nếu khách truy cập di chuyển chuột rất nhanh thì một số phần tử DOM có thể bị bỏ qua

    Nếu chuột di chuyển rất nhanh từ các phần tử

    #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

    7 đến

    #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

    8 như được vẽ ở trên, thì phần tử trung gian

    #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

    9 (hoặc một số trong số chúng) có thể bị bỏ qua. Sự kiện
    Events will show up here! 3 có thể kích hoạt vào ngày

    #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

    7 và sau đó ngay lập tức vào ngày
    Events will show up here! 2 vào ngày

    #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

    8

    Điều đó tốt cho hiệu suất, vì có thể có nhiều yếu tố trung gian. Chúng tôi không thực sự muốn xử lý từng cái một

    Mặt khác, chúng ta nên nhớ rằng con trỏ chuột không “ghé thăm” tất cả các phần tử trên đường đi. Nó có thể nhảy"

    Đặc biệt, có thể con trỏ nhảy ngay vào giữa trang từ bên ngoài cửa sổ. Trong trường hợp đó,

    Events will show up here! 4 là

    #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

    1, bởi vì nó đến từ “hư không”

    Bạn có thể kiểm tra nó "trực tiếp" trên một giá đỡ bên dưới

    HTML của nó có hai phần tử lồng nhau.

    parent
    child
    6 ở bên trong
    parent
    child
    7. Nếu bạn di chuyển chuột nhanh qua chúng, thì có thể chỉ có div con kích hoạt sự kiện hoặc có thể div cha hoặc có thể sẽ không có sự kiện nào cả

    Đồng thời di chuyển con trỏ vào phần tử con

    parent
    child
    8, sau đó nhanh chóng di chuyển con trỏ ra ngoài qua phần gốc. Nếu chuyển động đủ nhanh thì bỏ qua phần tử cha. Con chuột sẽ vượt qua phần tử cha mà không nhận thấy nó

    Kết quả

    script. js

    Phong cách. css

    mục lục. html

    ________số 8_______

    #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

    parent
    child

    Nếu kích hoạt

    Events will show up here! 2 thì phải có
    Events will show up here! 3

    Trong trường hợp di chuyển chuột nhanh, các yếu tố trung gian có thể bị bỏ qua, nhưng có một điều chúng tôi biết chắc chắn. nếu con trỏ “chính thức” nhập một phần tử (sự kiện ______0_______2 được tạo), thì khi rời khỏi phần tử đó, chúng ta luôn nhận được ____0_______3

    Một tính năng quan trọng của

    Events will show up here! 3 – nó kích hoạt, khi con trỏ di chuyển từ một phần tử sang phần tử con của nó, e. g. từ
    ...
    4 đến
    ...
    5 trong HTML này
    ...

    Nếu chúng ta đang ở trên

    ...
    4 và sau đó di chuyển con trỏ sâu hơn vào trong
    ...
    5, chúng ta sẽ nhận được
    Events will show up here! 3 trên
    ...
    4

    Điều đó có vẻ lạ, nhưng có thể dễ dàng giải thích

    Theo logic của trình duyệt, con trỏ chuột có thể chỉ ở trên một phần tử bất kỳ lúc nào – phần tử được lồng nhiều nhất và trên cùng bởi chỉ mục z

    Vì vậy, nếu nó chuyển sang phần tử khác (thậm chí là phần tử con), thì nó sẽ rời khỏi phần tử trước đó

    Xin lưu ý một chi tiết quan trọng khác của xử lý sự kiện

    Sự kiện

    Events will show up here! 2 về hậu duệ nổi lên. Vì vậy, nếu
    ...
    4 có trình xử lý
    Events will show up here! 2, nó sẽ kích hoạt

    Bạn có thể thấy điều đó rất rõ trong ví dụ dưới đây.

    parent
    child
    6 ở bên trong
    parent
    child
    7. Có trình xử lý

    function mouselog(event) { let d = new Date(); text.value += `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} | ${event.type} [target: ${event.target.id}]\n`.replace(/(:|^)(\d\D)/, '$10$2'); text.scrollTop = text.scrollHeight; }

    5 trên phần tử
    ...
    4 xuất chi tiết sự kiện

    Nếu bạn di chuyển chuột từ

    ...
    4 đến
    ...
    5, bạn sẽ thấy hai sự kiện trên
    ...
    4

    1. #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

       0 (trái cha mẹ), sau đó

    2. #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

       1 (đến với đứa trẻ, sôi sục)

    Kết quả

    script. js

    Phong cách. css

    mục lục. html

    function mouselog(event) { let d = new Date(); text.value += `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} | ${event.type} [target: ${event.target.id}]\n`.replace(/(:|^)(\d\D)/, '$10$2'); text.scrollTop = text.scrollHeight; }

    #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

    parent
    child

    Như được hiển thị, khi con trỏ di chuyển từ phần tử

    ...
    4 sang phần tử
    ...
    5, hai trình xử lý sẽ kích hoạt phần tử cha.
    Events will show up here! 3 và
    Events will show up here! 2

    body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

    0

    Nếu chúng ta không kiểm tra

    Events will show up here! 9 bên trong bộ xử lý, thì có vẻ như con trỏ chuột đã rời khỏi phần tử
    ...
    4 và sau đó ngay lập tức quay lại phần tử đó

    Nhưng đó không phải là trường hợp. Con trỏ vẫn ở trên phần tử cha, nó chỉ di chuyển sâu hơn vào phần tử con

    Nếu có một số hành động khi rời khỏi phần tử cha, e. g. một hoạt ảnh chạy trong

    #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

    8, chúng tôi thường không muốn nó khi con trỏ chỉ đi sâu hơn vào
    ...
    4

    Để tránh điều đó xảy ra, chúng ta có thể kiểm tra

    Events will show up here! 4 trong trình xử lý và nếu con chuột vẫn ở bên trong phần tử thì hãy bỏ qua sự kiện đó

    Ngoài ra, chúng ta có thể sử dụng các sự kiện khác.

    parent
    child
    1 và
    parent
    child
    2, mà chúng tôi sẽ đề cập ngay bây giờ, vì họ không gặp phải những vấn đề như vậy

    Sự kiện

    parent
    child
    3 giống như
    parent
    child
    4. Chúng kích hoạt khi con trỏ chuột vào/ra khỏi phần tử

    Nhưng có hai sự khác biệt quan trọng

    1. Các chuyển đổi bên trong phần tử, đến/từ con cháu, không được tính
    2. Sự kiện
       parent

       child
       3 không bong bóng

       Những sự kiện này cực kỳ đơn giản

       Khi con trỏ vào một phần tử –

       parent
       child
       1 kích hoạt. Vị trí chính xác của con trỏ bên trong phần tử hoặc con trỏ của nó không quan trọng

       Khi con trỏ rời khỏi phần tử –

       parent
       child
       2 kích hoạt

       Ví dụ này tương tự như ví dụ trên, nhưng bây giờ phần tử trên cùng có

       parent
       child
       3 thay vì
       parent
       child
       4

       Như bạn có thể thấy, các sự kiện được tạo duy nhất là những sự kiện liên quan đến việc di chuyển con trỏ vào và ra khỏi phần tử trên cùng. Không có gì xảy ra khi con trỏ đi tới đứa trẻ và quay lại. Chuyển tiếp giữa con cháu bị bỏ qua

       Kết quả

       script. js

       Phong cách. css

       mục lục. html

       function mouselog(event) { let d = new Date(); text.value += `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} | ${event.type} [target: ${event.target.id}]\n`.replace(/(:|^)(\d\D)/, '$10$2'); text.scrollTop = text.scrollHeight; }

       #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

       body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

       3

       Sự kiện

       body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

       00 rất đơn giản và dễ sử dụng. Nhưng họ không bong bóng. Vì vậy, chúng tôi không thể sử dụng ủy quyền sự kiện với họ

       Hãy tưởng tượng chúng ta muốn xử lý nhập/rời chuột cho các ô của bảng. Và có hàng trăm tế bào

       Giải pháp tự nhiên sẽ là – đặt trình xử lý trên

       body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

       01 và xử lý các sự kiện ở đó. Nhưng

       body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

       00 đừng nổi bong bóng. Vì vậy, nếu sự kiện như vậy xảy ra vào ngày

       body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

       03, thì chỉ người xử lý trên ngày

       body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

       03 đó mới có thể bắt được sự kiện đó

       Trình xử lý cho

       body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

       00 trên

       body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

       01 chỉ kích hoạt khi con trỏ vào/rời khỏi toàn bộ bảng. Không thể lấy bất kỳ thông tin nào về quá trình chuyển đổi bên trong nó

       Vì vậy, hãy sử dụng

       parent
       child
       4

       Hãy bắt đầu với các trình xử lý đơn giản làm nổi bật phần tử dưới chuột

       body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

       4

       Ở đây họ đang hành động. Khi chuột di chuyển qua các phần tử của bảng này, phần hiện tại được tô sáng

       Kết quả

       script. js

       Phong cách. css

       mục lục. html

       body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

       5

       body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

       6

       body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

       7

       Trong trường hợp của chúng tôi, chúng tôi muốn xử lý các chuyển đổi giữa các ô của bảng

       body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

       03. vào một ô và rời khỏi nó. Các chuyển đổi khác, chẳng hạn như bên trong ô hoặc bên ngoài bất kỳ ô nào, chúng tôi không quan tâm. Hãy lọc chúng ra

       Đây là những gì chúng ta có thể làm

       • Hãy nhớ

         body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

         03 hiện đang được đánh dấu trong một biến, hãy gọi nó là

         body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

         10
       • Vào ngày
         Events will show up here! 2 – bỏ qua sự kiện nếu chúng ta vẫn đang ở trong

         body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

         03 hiện tại
         • Vào ngày
         Events will show up here! 3 – bỏ qua nếu chúng ta không rời khỏi

         body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

         03 hiện tại

         Đây là một ví dụ về mã giải thích cho tất cả các tình huống có thể xảy ra

         body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

         8

         Một lần nữa, các tính năng quan trọng là

         1. Nó sử dụng ủy quyền sự kiện để xử lý việc vào/ra của bất kỳ

            body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

            03 nào trong bảng. Vì vậy, nó dựa vào

            function mouselog(event) { let d = new Date(); text.value += `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} | ${event.type} [target: ${event.target.id}]\n`.replace(/(:|^)(\d\D)/, '$10$2'); text.scrollTop = text.scrollHeight; }

            5 thay vì

            body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

            00 không bong bóng và do đó không cho phép ủy quyền
         2. Các sự kiện bổ sung, chẳng hạn như di chuyển giữa các con cháu của

            body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

            03 được lọc ra, để

            body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

            19 chỉ chạy nếu con trỏ rời khỏi hoặc đi vào toàn bộ

            body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

            03

         Đây là ví dụ đầy đủ với tất cả các chi tiết

         Kết quả

         script. js

         Phong cách. css

         mục lục. html

         body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

         8

         body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

         6

         body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

         7

         Cố gắng di chuyển con trỏ vào và ra khỏi các ô của bảng và bên trong chúng. Nhanh hay chậm - không quan trọng. Chỉ toàn bộ

         body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

         03 được tô sáng, không giống như ví dụ trước

         Chúng tôi đưa tin về các sự kiện

         Events will show up here! 2,
         Events will show up here! 3,

         #parent { background: #99C0C3; width: 160px; height: 120px; position: relative; } #child { background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 140px; width: 300px; display: block; }

         6,
         parent
         child
         1 và
         parent
         child
         2

         Những điều này là tốt để lưu ý

         • Di chuyển chuột nhanh có thể bỏ qua các yếu tố trung gian
         • Sự kiện

           function mouselog(event) { let d = new Date(); text.value += `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} | ${event.type} [target: ${event.target.id}]\n`.replace(/(:|^)(\d\D)/, '$10$2'); text.scrollTop = text.scrollHeight; }

           5 và

           body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

           00 có một thuộc tính bổ sung.
           Events will show up here! 4. Đó là yếu tố mà chúng ta đến từ/đến, bổ sung cho
           Events will show up here! 5

           Sự kiện

           function mouselog(event) { let d = new Date(); text.value += `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} | ${event.type} [target: ${event.target.id}]\n`.replace(/(:|^)(\d\D)/, '$10$2'); text.scrollTop = text.scrollHeight; }

           5 kích hoạt ngay cả khi chúng ta chuyển từ phần tử cha sang phần tử con. Trình duyệt giả định rằng chuột chỉ có thể ở trên một phần tử tại một thời điểm - phần tử sâu nhất

           Sự kiện

           body, html { margin: 0; padding: 0; } #container { border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; } #log { height: 120px; width: 350px; display: block; box-sizing: border-box; } [class^="smiley-"] { display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; } .smiley-green { background: #a9db7a; border: 5px solid #92c563; position: relative; } .smiley-green .left-eye { width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-green .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; } .smiley-green .smile { position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-green .smile:after, .smiley-green .smile:before { content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; } .smiley-green .smile:after { background: #84b458; height: 80%; top: -40%; left: 0%; } .smiley-yellow { background: #eed16a; border: 5px solid #dbae51; position: relative; } .smiley-yellow .left-eye { width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-yellow .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; } .smiley-yellow .smile { position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; } .smiley-red { background: #ee9295; border: 5px solid #e27378; position: relative; } .smiley-red .left-eye { width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; } .smiley-red .right-eye { width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; } .smiley-red .smile { position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; } .smiley-red .smile:after, .smiley-red .smile:before { content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; } .smiley-red .smile:after { background: #d96065; height: 80%; top: 60%; left: 0%; }

           00 khác ở khía cạnh đó. chúng chỉ kích hoạt khi chuột ra vào toàn bộ phần tử. Ngoài ra họ không bong bóng

           Làm cách nào để di chuyển con trỏ chuột bằng JavaScript?

           Bạn không thể di chuyển con trỏ chuột bằng cách sử dụng javascript và do đó rõ ràng là vì lý do bảo mật. Cách tốt nhất để đạt được hiệu ứng này là thực sự đặt điều khiển dưới con trỏ chuột. Ý nghĩa bảo mật là xa rõ ràng.

           Làm cách nào để có được vị trí của con trỏ trong JavaScript?

           Sử dụng sự kiện. Thuộc tính clientX được sử dụng để tìm giá trị của vị trí nằm ngang hoặc tọa độ X của con trỏ nơi sự kiện được kích hoạt . Nó trả về một giá trị số xác định vị trí nằm ngang của con trỏ.

           Sự khác biệt giữa di chuột qua và MouseMove trong JavaScript là gì?

           Sự kiện di chuột qua kích hoạt khi con trỏ chuột đi vào phần tử div và các phần tử con của nó. Sự kiện mouseenter chỉ được kích hoạt khi con trỏ chuột đi vào phần tử div . Sự kiện onmousemove kích hoạt mỗi khi con trỏ chuột được di chuyển qua phần tử div.

           Onmousemove có nghĩa là gì trong JavaScript?

           onmousemove. Con trỏ đang di chuyển qua phần tử . onmouseout. Con trỏ chuột di chuyển ra khỏi phần tử.
           Đọc tiếp
           programming javascript
           Reply 5 0 Chia sẻ
           Bài Viết Liên Quan

           

           Hóa chất xử lý tiếng anh là gì năm 2024

           mẹo hay Hỏi Đáp Là gì Học Tốt Tiếng anh

           

           Chế độ thanh toán tiền nghỉ phép hàng năm năm 2024

           mẹo hay

           

           Bảy hằng đẳng thức đáng nhớ môn toán năm 2024

           mẹo hay

           

           Công thức toán của môn lý thuyết thống kê năm 2024

           mẹo hay Học Tốt Công thức

           

           Ăn táo đỏ lúc nào là tốt nhất năm 2024

           mẹo hay Top List Tốt nhất Review

           

           Cách conditonal fortmatting cho ô chứa lỗi thành màu trằng năm 2024

           mẹo hay Mẹo Hay Cách

           

           Hướng dẫn tính trung bình cộng trong excel năm 2024

           mẹo hay Mẹo Hay Hướng dẫn

           

           Bài giảng sự lai hóa các obitan phân tử năm 2024

           mẹo hay

           

           Khi chạy chương trình báo lỗi invalid missing system.setup năm 2024

           mẹo hay

           

           Hàm trung bình cộng trong thư viện math.h năm 2024

           mẹo hay

           

           Cách dạy con học toán lớp 1 hiệu quả năm 2024

           mẹo hay Mẹo Hay Cách Học Tốt Học

           

           Bán đất đường trần quang diệu thành phố thanh hóa năm 2024

           mẹo hay

           

           Làm thế nào để hết chuột rút bắp chân năm 2024

           mẹo hay Hỏi Đáp Thế nào Công Nghệ Chuột

           

           B.n.n bị tố đạo văn 80 năm 2024

           mẹo hay

           

           Công thức giải nhanh hóa vô cơ 12 năm 2024

           mẹo hay Học Tốt Công thức

           

           Ngành tâm lý học nên học trường nào năm 2024

           mẹo hay Học Tốt Học

           

           Lỗi sóng kéo dài 7-8 cm trên máy sợi con năm 2024

           mẹo hay Công Nghệ Máy

           

           Uống thuốc hoạt huyết dưỡng não vào lúc nào năm 2024

           mẹo hay Khỏe Đẹp Thuốc

           

           Khắc phục lỗi khi lưu file khi dùng dev c năm 2024

           mẹo hay Công Nghệ File

           

           Găng tay cao su phù hợp với hóa chất gì năm 2024

           mẹo hay

           Quảng Cáo

           Có thể bạn quan tâm

           Delegation trong registration form của khách sạn là gì năm 2024

           3 tháng trước . bởi High-ceilingedLitigation

           So sánh a7 2023 vs s7 năm 2024

           3 tháng trước . bởi ClassifiedBaker

           So sánh pectin lỏng và pectin khô năm 2024

           3 tháng trước . bởi VariousDumps

           Bộ đề ôn thi toán tuyển sinh lớp 10 năm 2024

           3 tháng trước . bởi MisshapenSaloon

           Dung lượng miễn phí của wordpress là bao nhiêu mb năm 2024

           3 tháng trước . bởi DecorativeTracing

           Bài tập trắc nghiêm bài 11 địa lí 11 năm 2024

           3 tháng trước . bởi SwitchingDishonesty

           Tinh chất vàng 24k goldzan review năm 2024

           3 tháng trước . bởi UnhealthyChina

           Thể thức kỹ thuật trình bày văn bản năm 2024

           3 tháng trước . bởi SkillfulAdvancement

           Sĩ quan chính trị lấy bao nhiêu điểm năm 2024

           3 tháng trước . bởi WaywardMaple

           Top 10 tiền đạo hay nhất thế giới 2023 năm 2024

           3 tháng trước . bởi OpticalIndecency

           Toplist được quan tâm

           #1

           Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023

           8 tháng trước

           #2

           Top 7 gdcd 6 bài 1 kết nối tri thức 2023

           8 tháng trước

           #3

           Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023

           8 tháng trước

           #4

           Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023

           8 tháng trước

           #5

           Top 3 tổng tài biến thái tôi yêu anh tập 27 2023

           8 tháng trước

           #6

           Top 6 kết thực phim mỹ nhân vô lệ 2023

           8 tháng trước

           #7

           Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023

           8 tháng trước

           #8

           Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023

           8 tháng trước

           #9

           Top 5 tiểu sử của thầy thích pháp hòa 2023

           8 tháng trước

           Quảng cáo

           Xem Nhiều

           Ăn táo đỏ lúc nào là tốt nhất năm 2024

           1 tuần trước

           Hóa chất xử lý tiếng anh là gì năm 2024

           2 ngày trước

           Công thức toán của môn lý thuyết thống kê năm 2024

           1 tuần trước

           Tuổi canh thân 1980 nên xây nhà năm nào năm 2024

           16 giờ trước

           Chế độ thanh toán tiền nghỉ phép hàng năm năm 2024

           3 ngày trước

           Bảy hằng đẳng thức đáng nhớ môn toán năm 2024

           5 ngày trước

           Quảng cáo

           Chúng tôi

           • Giới thiệu
           • Liên hệ
           • Tuyển dụng
           • Quảng cáo

           Điều khoản

           • Điều khoản hoạt động
           • Điều kiện tham gia
           • Quy định cookie

           Trợ giúp

           • Hướng dẫn
           • Loại bỏ câu hỏi
           • Liên hệ

           Mạng xã hội

           • Facebook
           • Twitter
           • LinkedIn
           • Instagram

           ---

           

           Bản quyền © 2021 Học Tốt Inc.