Sự kiện đổi màu javascript

, nhưng cũng chạy nếu bạn bấm vào bất kỳ thẻ lồng nhau nào như

FORM
  
DIV
    
P
  

0 hoặc

FORM
  
DIV
    
P
  

1

  If you click on EM, the handler on DIV runs.

Nó không phải là một chút kỳ lạ?

Nguyên tắc sủi bọt rất đơn giản

Khi một sự kiện xảy ra trên một phần tử, đầu tiên nó sẽ chạy các trình xử lý trên đó, sau đó trên phần tử cha của nó, sau đó tất cả các tổ tiên khác

Giả sử chúng ta có 3 phần tử lồng nhau

FORM
  
DIV
    
P
  

4 với một trình xử lý trên mỗi phần tử đó

FORM
  
DIV
    
P
  

Một cú nhấp chuột vào bên trong

FORM
  
DIV
    
P
  

5 chạy lần đầu tiên

FORM
  
DIV
    
P
  

6

1. Trên đó

   
   
   FORM
     
   DIV
       
   P
     
   

   5
2. Sau đó, ở bên ngoài
3. Sau đó, ở bên ngoài

   
   
   FORM
     
   DIV
       
   P
     
   

   9
4. Và cứ tiếp tục như vậy cho đến đối tượng

   form.onclick = function(event) {
     event.target.style.backgroundColor = 'yellow';
   
     // chrome needs some time to paint yellow
     setTimeout(() => {
       alert("target = " + event.target.tagName + ", this=" + this.tagName);
       event.target.style.backgroundColor = ''
     }, 0);
   };

   0

Vì vậy, nếu chúng tôi nhấp vào

FORM
  
DIV
    
P
  

5, thì chúng tôi sẽ thấy 3 cảnh báo.

form.onclick = function(event) {
  event.target.style.backgroundColor = 'yellow';

  // chrome needs some time to paint yellow
  setTimeout(() => {
    alert("target = " + event.target.tagName + ", this=" + this.tagName);
    event.target.style.backgroundColor = ''
  }, 0);
};

2 →

form.onclick = function(event) {
  event.target.style.backgroundColor = 'yellow';

  // chrome needs some time to paint yellow
  setTimeout(() => {
    alert("target = " + event.target.tagName + ", this=" + this.tagName);
    event.target.style.backgroundColor = ''
  }, 0);
};

3 →

form.onclick = function(event) {
  event.target.style.backgroundColor = 'yellow';

  // chrome needs some time to paint yellow
  setTimeout(() => {
    alert("target = " + event.target.tagName + ", this=" + this.tagName);
    event.target.style.backgroundColor = ''
  }, 0);
};

4

Quá trình này được gọi là "sủi bọt", bởi vì các sự kiện "bong bóng" từ yếu tố bên trong cho đến cha mẹ giống như bong bóng trong nước

Hầu như tất cả các sự kiện bong bóng

Từ khóa trong cụm từ này là “gần như”

Chẳng hạn, một sự kiện

form.onclick = function(event) {
  event.target.style.backgroundColor = 'yellow';

  // chrome needs some time to paint yellow
  setTimeout(() => {
    alert("target = " + event.target.tagName + ", this=" + this.tagName);
    event.target.style.backgroundColor = ''
  }, 0);
};

5 không bong bóng. Còn có những ví dụ khác nữa, chúng ta sẽ gặp chúng. Nhưng đó vẫn là một ngoại lệ, chứ không phải là một quy luật, hầu hết các sự kiện đều có bong bóng

Trình xử lý trên phần tử cha luôn có thể nhận thông tin chi tiết về nơi nó thực sự xảy ra

Phần tử được lồng sâu nhất gây ra sự kiện được gọi là phần tử đích, có thể truy cập dưới dạng

form.onclick = function(event) {
  event.target.style.backgroundColor = 'yellow';

  // chrome needs some time to paint yellow
  setTimeout(() => {
    alert("target = " + event.target.tagName + ", this=" + this.tagName);
    event.target.style.backgroundColor = ''
  }, 0);
};

6

Lưu ý sự khác biệt từ

form.onclick = function(event) {
  event.target.style.backgroundColor = 'yellow';

  // chrome needs some time to paint yellow
  setTimeout(() => {
    alert("target = " + event.target.tagName + ", this=" + this.tagName);
    event.target.style.backgroundColor = ''
  }, 0);
};

7 (=_______10_______8)

• form.onclick = function(event) {
    event.target.style.backgroundColor = 'yellow';
  
    // chrome needs some time to paint yellow
    setTimeout(() => {
      alert("target = " + event.target.tagName + ", this=" + this.tagName);
      event.target.style.backgroundColor = ''
    }, 0);
  };

  6 – là yếu tố “mục tiêu” bắt đầu sự kiện, nó không thay đổi trong suốt quá trình sủi bọt

• form.onclick = function(event) {
    event.target.style.backgroundColor = 'yellow';
  
    // chrome needs some time to paint yellow
    setTimeout(() => {
      alert("target = " + event.target.tagName + ", this=" + this.tagName);
      event.target.style.backgroundColor = ''
    }, 0);
  };

  7 – là phần tử “hiện tại”, phần tử có trình xử lý hiện đang chạy trên đó

Chẳng hạn, nếu chúng ta có một trình xử lý duy nhất

form {
  background-color: green;
  position: relative;
  width: 150px;
  height: 150px;
  text-align: center;
  cursor: pointer;
}

div {
  background-color: blue;
  position: absolute;
  top: 25px;
  left: 25px;
  width: 100px;
  height: 100px;
}

p {
  background-color: red;
  position: absolute;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0;
}

body {
  line-height: 25px;
  font-size: 16px;
}

1, thì nó có thể “bắt” tất cả các nhấp chuột bên trong biểu mẫu. Bất kể nhấp chuột xảy ra ở đâu, nó nổi lên đến

FORM
  
DIV
    
P
  

9 và chạy trình xử lý

Trong trình xử lý

form {
  background-color: green;
  position: relative;
  width: 150px;
  height: 150px;
  text-align: center;
  cursor: pointer;
}

div {
  background-color: blue;
  position: absolute;
  top: 25px;
  left: 25px;
  width: 100px;
  height: 100px;
}

p {
  background-color: red;
  position: absolute;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0;
}

body {
  line-height: 25px;
  font-size: 16px;
}

1

• form.onclick = function(event) {
    event.target.style.backgroundColor = 'yellow';
  
    // chrome needs some time to paint yellow
    setTimeout(() => {
      alert("target = " + event.target.tagName + ", this=" + this.tagName);
      event.target.style.backgroundColor = ''
    }, 0);
  };

  7 (=_______10_______8) là phần tử

  
  
  FORM
    
  DIV
      
  P
    
  

  9, bởi vì trình xử lý chạy trên nó

• form.onclick = function(event) {
    event.target.style.backgroundColor = 'yellow';
  
    // chrome needs some time to paint yellow
    setTimeout(() => {
      alert("target = " + event.target.tagName + ", this=" + this.tagName);
      event.target.style.backgroundColor = ''
    }, 0);
  };

  6 là phần tử thực sự bên trong biểu mẫu đã được nhấp vào

Kiểm tra nó ra

Kết quả

script. js

thí dụ. css

mục lục. html

form.onclick = function(event) {
  event.target.style.backgroundColor = 'yellow';

  // chrome needs some time to paint yellow
  setTimeout(() => {
    alert("target = " + event.target.tagName + ", this=" + this.tagName);
    event.target.style.backgroundColor = ''
  }, 0);
};

form {
  background-color: green;
  position: relative;
  width: 150px;
  height: 150px;
  text-align: center;
  cursor: pointer;
}

div {
  background-color: blue;
  position: absolute;
  top: 25px;
  left: 25px;
  width: 100px;
  height: 100px;
}

p {
  background-color: red;
  position: absolute;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0;
}

body {
  line-height: 25px;
  font-size: 16px;
}

  
  



  A click shows both event.target and this to compare:

  
FORM
    
DIV
      
P
    
  

  

Có thể là

form.onclick = function(event) {
  event.target.style.backgroundColor = 'yellow';

  // chrome needs some time to paint yellow
  setTimeout(() => {
    alert("target = " + event.target.tagName + ", this=" + this.tagName);
    event.target.style.backgroundColor = ''
  }, 0);
};

6 có thể bằng với

form.onclick = function(event) {
  event.target.style.backgroundColor = 'yellow';

  // chrome needs some time to paint yellow
  setTimeout(() => {
    alert("target = " + event.target.tagName + ", this=" + this.tagName);
    event.target.style.backgroundColor = ''
  }, 0);
};

7 – điều này xảy ra khi nhấp chuột được thực hiện trực tiếp trên phần tử

FORM
  
DIV
    
P
  

9

Một sự kiện sủi bọt đi thẳng từ phần tử đích lên. Thông thường, nó đi lên cho đến

  
  



  A click shows both event.target and this to compare:

  
FORM
    
DIV
      
P
    
  

  

1, sau đó đến đối tượng

form.onclick = function(event) {
  event.target.style.backgroundColor = 'yellow';

  // chrome needs some time to paint yellow
  setTimeout(() => {
    alert("target = " + event.target.tagName + ", this=" + this.tagName);
    event.target.style.backgroundColor = ''
  }, 0);
};

0 và một số sự kiện thậm chí đạt tới

  
  



  A click shows both event.target and this to compare:

  
FORM
    
DIV
      
P
    
  

  

3, gọi tất cả các trình xử lý trên đường dẫn

Nhưng bất kỳ trình xử lý nào cũng có thể quyết định rằng sự kiện đã được xử lý đầy đủ và ngừng tạo bọt

Phương pháp cho nó là

  
  



  A click shows both event.target and this to compare:

  
FORM
    
DIV
      
P
    
  

  

4

Chẳng hạn, ở đây

  
  



  A click shows both event.target and this to compare:

  
FORM
    
DIV
      
P
    
  

  

5 không hoạt động nếu bạn nhấp vào

  
  



  A click shows both event.target and this to compare:

  
FORM
    
DIV
      
P
    
  

  

6

  Click me

biến cố. stopImmediatePropagation()

Nếu một phần tử có nhiều trình xử lý sự kiện trong một sự kiện, thì ngay cả khi một trong số chúng ngừng sủi bọt, thì những phần tử khác vẫn thực thi

Nói cách khác,

  
  



  A click shows both event.target and this to compare:

  
FORM
    
DIV
      
P
    
  

  

4 dừng di chuyển lên trên, nhưng trên phần tử hiện tại, tất cả các trình xử lý khác sẽ chạy

Để dừng hiện tượng bong bóng và ngăn các trình xử lý trên phần tử hiện tại chạy, có một phương thức

  
  



  A click shows both event.target and this to compare:

  
FORM
    
DIV
      
P
    
  

  

8. Sau đó, không có trình xử lý nào khác thực thi

Đừng ngừng sủi bọt khi không có nhu cầu

Bong bóng là thuận tiện. Đừng dừng lại khi chưa có nhu cầu thực sự. rõ ràng và được nghĩ ra về mặt kiến ​​trúc

Đôi khi

  
  



  A click shows both event.target and this to compare:

  
FORM
    
DIV
      
P
    
  

  

4 tạo ra những cạm bẫy tiềm ẩn mà sau này có thể trở thành vấn đề

Ví dụ

1. Chúng tôi tạo một menu lồng nhau. Mỗi menu con xử lý các lần nhấp vào các thành phần của nó và gọi ____________0 để menu bên ngoài không kích hoạt
2. Sau đó, chúng tôi quyết định theo dõi các lần nhấp trên toàn bộ cửa sổ để theo dõi hành vi của người dùng (nơi mọi người nhấp). Một số hệ thống phân tích làm điều đó. Thông thường, mã sử dụng

   
     Click me
   

   1 để bắt tất cả các nhấp chuột
3. Phân tích của chúng tôi sẽ không hoạt động trên khu vực mà nhấp chuột bị dừng bởi

   
     Click me
   

   0. Đáng buồn thay, chúng tôi đã có một "vùng chết"

Thường không có nhu cầu thực sự để ngăn chặn bọt khí. Một nhiệm vụ dường như yêu cầu có thể được giải quyết bằng các phương tiện khác. Một trong số đó là sử dụng các sự kiện tùy chỉnh, chúng tôi sẽ đề cập đến chúng sau. Ngoài ra, chúng tôi có thể ghi dữ liệu của mình vào đối tượng

  Click me

3 trong một trình xử lý và đọc nó trong một trình xử lý khác, vì vậy chúng tôi có thể chuyển cho trình xử lý cha mẹ thông tin về quá trình xử lý bên dưới

Có một giai đoạn xử lý sự kiện khác được gọi là "chụp". Nó hiếm khi được sử dụng trong mã thực, nhưng đôi khi có thể hữu ích

Sự kiện DOM tiêu chuẩn mô tả 3 giai đoạn lan truyền sự kiện

1. Giai đoạn nắm bắt – sự kiện đi xuống phần tử
2. Giai đoạn mục tiêu – sự kiện đạt đến phần tử mục tiêu
3. Giai đoạn bong bóng – sự kiện bong bóng lên từ phần tử

Đây là hình ảnh, được lấy từ thông số kỹ thuật, của các giai đoạn chụp

  Click me

4, mục tiêu

  Click me

5 và tạo bọt khí

  Click me

6 cho một sự kiện nhấp chuột trên một

  Click me

7 bên trong một bảng

Đó là. đối với một lần nhấp vào

  Click me

7, trước tiên, sự kiện đi qua chuỗi tổ tiên xuống phần tử (giai đoạn chụp), sau đó đến mục tiêu và kích hoạt ở đó (giai đoạn mục tiêu), sau đó đi lên (giai đoạn bong bóng), gọi trình xử lý trên đường đi của nó

Từ trước đến giờ chúng ta chỉ nói về sủi bọt, vì giai đoạn bắt giữ ít được sử dụng

Trên thực tế, giai đoạn chụp là vô hình đối với chúng tôi, bởi vì các trình xử lý đã thêm bằng cách sử dụng thuộc tính

  Click me

9 hoặc sử dụng các thuộc tính HTML hoặc sử dụng hai đối số

elem.addEventListener(..., {capture: true})

// or, just "true" is an alias to {capture: true}
elem.addEventListener(..., true)

0 không biết gì về việc chụp, chúng chỉ chạy ở giai đoạn 2 và 3

Để nắm bắt một sự kiện trong giai đoạn nắm bắt, chúng ta cần đặt tùy chọn xử lý

elem.addEventListener(..., {capture: true})

// or, just "true" is an alias to {capture: true}
elem.addEventListener(..., true)

1 thành

elem.addEventListener(..., {capture: true})

// or, just "true" is an alias to {capture: true}
elem.addEventListener(..., true)

2

elem.addEventListener(..., {capture: true})

// or, just "true" is an alias to {capture: true}
elem.addEventListener(..., true)

Có hai giá trị có thể có của tùy chọn

elem.addEventListener(..., {capture: true})

// or, just "true" is an alias to {capture: true}
elem.addEventListener(..., true)

1

• Nếu là

  elem.addEventListener(..., {capture: true})
  
  // or, just "true" is an alias to {capture: true}
  elem.addEventListener(..., true)

  4 (mặc định), thì trình xử lý được đặt ở giai đoạn sủi bọt
• Nếu là

  elem.addEventListener(..., {capture: true})
  
  // or, just "true" is an alias to {capture: true}
  elem.addEventListener(..., true)

  2, thì trình xử lý được đặt ở giai đoạn chụp

Lưu ý rằng mặc dù chính thức có 3 giai đoạn, nhưng giai đoạn thứ 2 (“giai đoạn mục tiêu”. sự kiện đạt đến phần tử) không được xử lý riêng. trình xử lý trên cả hai giai đoạn chụp và bong bóng kích hoạt ở giai đoạn đó

Hãy xem hoạt động của cả chụp và tạo bọt

FORM
  
DIV
    
P
  

Mã đặt trình xử lý nhấp chuột trên mọi thành phần trong tài liệu để xem cái nào đang hoạt động

Nếu bạn bấm vào

FORM
  
DIV
    
P
  

5, thì trình tự là

1. elem.addEventListener(..., {capture: true})
   
   // or, just "true" is an alias to {capture: true}
   elem.addEventListener(..., true)

   7 →

   elem.addEventListener(..., {capture: true})
   
   // or, just "true" is an alias to {capture: true}
   elem.addEventListener(..., true)

   8 →

   elem.addEventListener(..., {capture: true})
   
   // or, just "true" is an alias to {capture: true}
   elem.addEventListener(..., true)

   9 →

   
   
   FORM
     
   DIV
       
   P
     
   
   
   

   0 (giai đoạn nắm bắt, người nghe đầu tiên)

2. 
   
   FORM
     
   DIV
       
   P
     
   
   
   

   1 →

   
   
   FORM
     
   DIV
       
   P
     
   
   
   

   2 →

   elem.addEventListener(..., {capture: true})
   
   // or, just "true" is an alias to {capture: true}
   elem.addEventListener(..., true)

   9 →

   elem.addEventListener(..., {capture: true})
   
   // or, just "true" is an alias to {capture: true}
   elem.addEventListener(..., true)

   8 →

   elem.addEventListener(..., {capture: true})
   
   // or, just "true" is an alias to {capture: true}
   elem.addEventListener(..., true)

   7 (giai đoạn sủi bọt, người nghe thứ hai)

Xin lưu ý,

FORM
  
DIV
    
P
  

1 xuất hiện hai lần, bởi vì chúng tôi đã đặt hai trình nghe. chụp và sủi bọt. Mục tiêu kích hoạt vào cuối giai đoạn thứ nhất và đầu giai đoạn thứ hai

Có một thuộc tính

FORM
  
DIV
    
P
  

7 cho chúng ta biết số giai đoạn mà sự kiện được bắt gặp. Nhưng nó ít được sử dụng, vì chúng ta thường biết nó trong handler

Để loại bỏ bộ xử lý,

FORM
  
DIV
    
P
  

8 cần cùng giai đoạn

Nếu chúng ta

FORM
  
DIV
    
P
  

9, thì chúng ta nên đề cập đến giai đoạn tương tự trong

elem.addEventListener("click", e => alert(1)); // guaranteed to trigger first
elem.addEventListener("click", e => alert(2));

0 để loại bỏ bộ xử lý một cách chính xác

Người nghe trên cùng một phần tử và cùng một giai đoạn chạy theo thứ tự đã đặt của chúng

Nếu chúng ta có nhiều trình xử lý sự kiện trong cùng một giai đoạn, được gán cho cùng một phần tử với

elem.addEventListener("click", e => alert(1)); // guaranteed to trigger first
elem.addEventListener("click", e => alert(2));

1, thì chúng sẽ chạy theo thứ tự như khi chúng được tạo

elem.addEventListener("click", e => alert(1)); // guaranteed to trigger first
elem.addEventListener("click", e => alert(2));

  
  



  A click shows both event.target and this to compare:

  
FORM
    
DIV
      
P
    
  

  

4 trong quá trình chụp cũng ngăn hiện tượng sủi bọt

Phương thức

  
  



  A click shows both event.target and this to compare:

  
FORM
    
DIV
      
P
    
  

  

4 và anh chị em của nó

  
  



  A click shows both event.target and this to compare:

  
FORM
    
DIV
      
P
    
  

  

8 cũng có thể được gọi trong giai đoạn chụp. Sau đó, không chỉ quá trình chụp tiếp theo bị dừng lại mà cả hiện tượng sủi bọt

Nói cách khác, thông thường, sự kiện sẽ đi xuống trước (“bắt giữ”) và sau đó đi lên (“sủi bọt”). Nhưng nếu

  
  



  A click shows both event.target and this to compare:

  
FORM
    
DIV
      
P
    
  

  

4 được gọi trong giai đoạn chụp, thì quá trình di chuyển sự kiện sẽ dừng lại, sẽ không có bong bóng nào xảy ra

Khi một sự kiện xảy ra – phần tử lồng nhau nhất nơi nó xảy ra sẽ được gắn nhãn là “phần tử mục tiêu” (

form.onclick = function(event) {
  event.target.style.backgroundColor = 'yellow';

  // chrome needs some time to paint yellow
  setTimeout(() => {
    alert("target = " + event.target.tagName + ", this=" + this.tagName);
    event.target.style.backgroundColor = ''
  }, 0);
};

6)

• Sau đó, sự kiện di chuyển xuống từ gốc tài liệu đến

  form.onclick = function(event) {
    event.target.style.backgroundColor = 'yellow';
  
    // chrome needs some time to paint yellow
    setTimeout(() => {
      alert("target = " + event.target.tagName + ", this=" + this.tagName);
      event.target.style.backgroundColor = ''
    }, 0);
  };

  6, gọi trình xử lý được chỉ định với ____61_______9 trên đường đi (

  elem.addEventListener(..., {capture: true})
  
  // or, just "true" is an alias to {capture: true}
  elem.addEventListener(..., true)

  2 là viết tắt của ____98_______0)
• Sau đó, các trình xử lý được gọi trên chính phần tử đích
• Sau đó, sự kiện nổi lên từ

  form.onclick = function(event) {
    event.target.style.backgroundColor = 'yellow';
  
    // chrome needs some time to paint yellow
    setTimeout(() => {
      alert("target = " + event.target.tagName + ", this=" + this.tagName);
      event.target.style.backgroundColor = ''
    }, 0);
  };

  6 đến thư mục gốc, gọi trình xử lý được chỉ định bằng cách sử dụng

  
    Click me
  

  9, thuộc tính HTML và

  elem.addEventListener("click", e => alert(1)); // guaranteed to trigger first
  elem.addEventListener("click", e => alert(2));

  1 mà không có đối số thứ 3 hoặc với đối số thứ 3
  4

Mỗi trình xử lý có thể truy cập

  Click me

3 thuộc tính đối tượng

• form.onclick = function(event) {
    event.target.style.backgroundColor = 'yellow';
  
    // chrome needs some time to paint yellow
    setTimeout(() => {
      alert("target = " + event.target.tagName + ", this=" + this.tagName);
      event.target.style.backgroundColor = ''
    }, 0);
  };

  6 – yếu tố sâu xa nhất khởi nguồn cho sự kiện

• form.onclick = function(event) {
    event.target.style.backgroundColor = 'yellow';
  
    // chrome needs some time to paint yellow
    setTimeout(() => {
      alert("target = " + event.target.tagName + ", this=" + this.tagName);
      event.target.style.backgroundColor = ''
    }, 0);
  };

  8 (=

  form.onclick = function(event) {
    event.target.style.backgroundColor = 'yellow';
  
    // chrome needs some time to paint yellow
    setTimeout(() => {
      alert("target = " + event.target.tagName + ", this=" + this.tagName);
      event.target.style.backgroundColor = ''
    }, 0);
  };

  7) – phần tử hiện tại xử lý sự kiện (phần tử có trình xử lý trên đó)

• 
  
  FORM
    
  DIV
      
  P
    
  
  
  

  7 – giai đoạn hiện tại (bắt giữ=1, mục tiêu=2, sủi bọt=3)

Bất kỳ trình xử lý sự kiện nào cũng có thể dừng sự kiện bằng cách gọi

  
  



  A click shows both event.target and this to compare:

  
FORM
    
DIV
      
P
    
  

  

4, nhưng điều đó không được khuyến nghị, bởi vì chúng tôi không thể thực sự chắc chắn rằng chúng tôi sẽ không cần nó ở trên, có thể cho những việc hoàn toàn khác

Giai đoạn bắt giữ rất hiếm khi được sử dụng, thông thường chúng tôi xử lý các sự kiện trên bong bóng. Và có một lời giải thích hợp lý cho điều đó

Trong thế giới thực, khi một tai nạn xảy ra, chính quyền địa phương phản ứng đầu tiên. Họ biết rõ nhất khu vực nơi nó xảy ra. Sau đó chính quyền cấp cao hơn nếu cần

Tương tự cho xử lý sự kiện. Mã đặt trình xử lý trên một phần tử cụ thể biết chi tiết tối đa về phần tử đó và chức năng của nó. Người xử lý trên một

  Click me

7 cụ thể có thể phù hợp với chính xác

  Click me

7 đó, nó biết mọi thứ về nó, vì vậy nó sẽ có cơ hội trước. Sau đó, cha mẹ trực tiếp của nó cũng biết về bối cảnh, nhưng ít hơn một chút, và cứ thế cho đến phần tử trên cùng xử lý các khái niệm chung và chạy phần tử cuối cùng

Tạo bong bóng và ghi lại đặt nền tảng cho “ủy quyền sự kiện” – một mô hình xử lý sự kiện cực kỳ hiệu quả mà chúng ta sẽ nghiên cứu trong chương tiếp theo