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?

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

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

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