Chèn liền kề html với onclick

Một sự kiện là một tín hiệu rằng một cái gì đó đã xảy ra. Tất cả các nút DOM đều tạo ra các tín hiệu như vậy (nhưng các sự kiện không giới hạn ở DOM)

Dưới đây là danh sách các sự kiện DOM hữu ích nhất, chỉ cần xem qua

sự kiện chuột

• 5 – khi nhấp chuột vào một phần tử (thiết bị màn hình cảm ứng tạo ra phần tử đó khi nhấn)

• 6 – khi nhấp chuột phải vào một phần tử

• 7 /
  8 – khi con trỏ chuột đi qua/rời khỏi một phần tử

• 9 /
  0 – khi nút chuột được nhấn/nhả trên một phần tử

• 1 – khi con chuột được di chuyển

sự kiện bàn phím

• 2 và
  3 – khi nhấn và thả một phím trên bàn phím

Sự kiện phần tử biểu mẫu

• 4 – khi khách truy cập gửi
  5

• 6 – khi khách truy cập tập trung vào một yếu tố, e. g. trên một
  7

sự kiện tài liệu

• 8 – khi HTML được tải và xử lý, DOM được xây dựng hoàn chỉnh

sự kiện CSS

• 9 – khi CSS-animation kết thúc

Còn nhiều sự kiện khác. Chúng ta sẽ biết thêm chi tiết về các sự kiện cụ thể trong các chương sắp tới

Để phản ứng với các sự kiện, chúng ta có thể chỉ định một trình xử lý - một chức năng chạy trong trường hợp có sự kiện

Trình xử lý là một cách để chạy mã JavaScript trong trường hợp có hành động của người dùng

Có một số cách để chỉ định một trình xử lý. Hãy xem chúng, bắt đầu từ cái đơn giản nhất

Trình xử lý có thể được đặt trong HTML với thuộc tính có tên là

0

Chẳng hạn, để chỉ định một trình xử lý

5 cho một

2, chúng ta có thể sử dụng

3, như ở đây

Khi nhấp chuột, mã bên trong

3 chạy

Xin lưu ý rằng bên trong

3, chúng tôi sử dụng dấu ngoặc đơn, vì bản thân thuộc tính nằm trong dấu ngoặc kép. Nếu chúng ta quên rằng mã nằm bên trong thuộc tính và sử dụng dấu ngoặc kép bên trong, như thế này.

6, thì nó sẽ không hoạt động đúng không

Thuộc tính HTML không phải là nơi thuận tiện để viết nhiều mã, vì vậy chúng ta nên tạo một hàm JavaScript và gọi nó ở đó

Ở đây, một cú nhấp chuột sẽ chạy chức năng

7

Như chúng ta đã biết, tên thuộc tính HTML không phân biệt chữ hoa chữ thường, vì vậy

8 hoạt động tốt như

9 và

0… Nhưng thông thường các thuộc tính được viết thường.

3

Chúng tôi có thể chỉ định trình xử lý bằng thuộc tính DOM

0

Ví dụ,

3

Nếu trình xử lý được gán bằng thuộc tính HTML thì trình duyệt sẽ đọc nó, tạo một hàm mới từ nội dung thuộc tính và ghi nó vào thuộc tính DOM

Vì vậy, cách này thực sự giống như cách trước

Hai đoạn mã này hoạt động giống nhau

1. Chỉ HTML

2. HTML + JS

Trong ví dụ đầu tiên, thuộc tính HTML được sử dụng để khởi tạo

4, trong khi ở ví dụ thứ hai – tập lệnh, đó là tất cả sự khác biệt

Vì chỉ có một thuộc tính

3 nên chúng tôi không thể chỉ định nhiều hơn một trình xử lý sự kiện

Trong ví dụ bên dưới, việc thêm trình xử lý bằng JavaScript sẽ ghi đè trình xử lý hiện có

Để xóa trình xử lý – chỉ định

6

Giá trị của

7 bên trong trình xử lý là phần tử. Cái có bộ xử lý trên đó

Trong đoạn mã dưới đây,

8 hiển thị nội dung của nó bằng cách sử dụng

9

Click me

Nếu bạn đang bắt đầu làm việc với các sự kiện – vui lòng lưu ý một số điểm tinh tế

Chúng ta có thể đặt một chức năng hiện có làm trình xử lý

function sayThanks() {
  alert('Thanks!');
}

elem.onclick = sayThanks;

Nhưng hãy cẩn thận. chức năng nên được chỉ định là

Click me

0, không phải

Click me

1

// right
button.onclick = sayThanks;

// wrong
button.onclick = sayThanks();

Nếu chúng ta thêm dấu ngoặc đơn, thì

Click me

1 sẽ trở thành lệnh gọi hàm. Vì vậy, dòng cuối cùng thực sự lấy kết quả của việc thực thi hàm, đó là

Click me

3 (vì hàm không trả về gì cả) và gán nó cho

3. Điều đó không hiệu quả

…Mặt khác, trong phần đánh dấu, chúng tôi cần dấu ngoặc đơn

Sự khác biệt rất dễ giải thích. Khi trình duyệt đọc thuộc tính, nó sẽ tạo một hàm xử lý với phần thân từ nội dung thuộc tính

Vì vậy, đánh dấu tạo ra thuộc tính này

0

Không sử dụng

Click me

5 cho người xử lý

Một cuộc gọi như vậy sẽ không hoạt động

1

Vấn đề trường hợp thuộc tính DOM

Chỉ định một trình xử lý cho

3, không phải

Click me

7, vì các thuộc tính DOM phân biệt chữ hoa chữ thường

Vấn đề cơ bản của các cách chỉ định trình xử lý đã nói ở trên là chúng ta không thể chỉ định nhiều trình xử lý cho một sự kiện

Giả sử, một phần mã của chúng tôi muốn làm nổi bật một nút khi nhấp và một phần khác muốn hiển thị thông báo trên cùng một lần nhấp

Chúng tôi muốn chỉ định hai trình xử lý sự kiện cho điều đó. Nhưng thuộc tính DOM mới sẽ ghi đè lên thuộc tính hiện có

2

Các nhà phát triển tiêu chuẩn web đã hiểu điều đó từ lâu và đề xuất một cách khác để quản lý trình xử lý bằng cách sử dụng các phương pháp đặc biệt

Click me

8 và

Click me

9 không bị ràng buộc bởi ràng buộc đó

Cú pháp để thêm một trình xử lý

3

function sayThanks() {
  alert('Thanks!');
}

elem.onclick = sayThanks;

0Tên sự kiện, e. g.

function sayThanks() {
  alert('Thanks!');
}

elem.onclick = sayThanks;

1.

function sayThanks() {
  alert('Thanks!');
}

elem.onclick = sayThanks;

2Hàm xử lý.

function sayThanks() {
  alert('Thanks!');
}

elem.onclick = sayThanks;

3Một đối tượng tùy chọn bổ sung có thuộc tính

• function sayThanks() {
    alert('Thanks!');
  }
  
  elem.onclick = sayThanks;

  4. nếu

  function sayThanks() {
    alert('Thanks!');
  }
  
  elem.onclick = sayThanks;

  5, thì trình nghe sẽ tự động bị xóa sau khi nó kích hoạt

• function sayThanks() {
    alert('Thanks!');
  }
  
  elem.onclick = sayThanks;

  6. giai đoạn xử lý sự kiện, sẽ được đề cập sau trong chương Tạo bọt và chụp. Vì lý do lịch sử,

  function sayThanks() {
    alert('Thanks!');
  }
  
  elem.onclick = sayThanks;

  3 cũng có thể là

  function sayThanks() {
    alert('Thanks!');
  }
  
  elem.onclick = sayThanks;

  8, điều đó cũng giống như

  function sayThanks() {
    alert('Thanks!');
  }
  
  elem.onclick = sayThanks;

  9

• // right
  button.onclick = sayThanks;
  
  // wrong
  button.onclick = sayThanks();

  0. nếu

  function sayThanks() {
    alert('Thanks!');
  }
  
  elem.onclick = sayThanks;

  5, thì trình xử lý sẽ không gọi

  // right
  button.onclick = sayThanks;
  
  // wrong
  button.onclick = sayThanks();

  2, chúng tôi sẽ giải thích điều đó sau trong các hành động mặc định của Trình duyệt

Để xóa trình xử lý, hãy sử dụng

Click me

9

4

Loại bỏ yêu cầu chức năng tương tự

Để xóa một trình xử lý, chúng ta nên chuyển chính xác chức năng đã được gán

Điều này không hoạt động

5

Trình xử lý sẽ không bị xóa vì

Click me

9 có một chức năng khác – với cùng một mã, nhưng điều đó không thành vấn đề, vì đó là một đối tượng chức năng khác

Đây là cách đúng đắn

6

Xin lưu ý - nếu chúng tôi không lưu trữ chức năng trong một biến, thì chúng tôi không thể xóa nó. Không có cách nào để "đọc lại" trình xử lý được chỉ định bởi

Click me

8

Nhiều cuộc gọi đến

Click me

8 cho phép nó thêm nhiều trình xử lý, như thế này

7

Như chúng ta có thể thấy trong ví dụ trên, chúng ta có thể thiết lập các trình xử lý bằng cách sử dụng thuộc tính DOM và

Click me

8. Nhưng nói chung chúng tôi chỉ sử dụng một trong những cách này

Đối với một số sự kiện, trình xử lý chỉ hoạt động với

Click me

8

Có tồn tại các sự kiện không thể được chỉ định thông qua thuộc tính DOM. Chỉ với

Click me

8

Chẳng hạn, sự kiện

8, kích hoạt khi tài liệu được tải và DOM đã được tạo

8

9

Vì vậy,

Click me

8 phổ quát hơn. Mặc dù, những sự kiện như vậy là một ngoại lệ chứ không phải là quy tắc

Để xử lý đúng một sự kiện, chúng tôi muốn biết thêm về những gì đã xảy ra. Không chỉ là “nhấp chuột” hay “nhấn phím”, mà tọa độ con trỏ là gì?

Khi một sự kiện xảy ra, trình duyệt sẽ tạo một đối tượng sự kiện, đặt thông tin chi tiết vào đó và chuyển nó làm đối số cho trình xử lý

Đây là một ví dụ về việc lấy tọa độ con trỏ từ đối tượng sự kiện

0

Một số thuộc tính của đối tượng

function sayThanks() {
  alert('Thanks!');
}

elem.onclick = sayThanks;

0

3Loại sự kiện, đây là

function sayThanks() {
  alert('Thanks!');
}

elem.onclick = sayThanks;

1.

5Phần tử xử lý sự kiện. Điều đó hoàn toàn giống với

7, trừ khi trình xử lý là một hàm mũi tên hoặc

7 của nó được liên kết với một thứ khác, thì chúng ta có thể lấy phần tử từ

5.

9 /

00Tọa độ cửa sổ tương đối của con trỏ, đối với các sự kiện con trỏ

Có nhiều tài sản hơn. Nhiều người trong số họ phụ thuộc vào loại sự kiện. sự kiện bàn phím có một bộ thuộc tính, sự kiện con trỏ - một thuộc tính khác, chúng ta sẽ nghiên cứu chúng sau khi chúng ta chuyển sang chi tiết của các sự kiện khác nhau

Đối tượng sự kiện cũng có sẵn trong trình xử lý HTML

Nếu chúng ta chỉ định một trình xử lý trong HTML, chúng ta cũng có thể sử dụng đối tượng

function sayThanks() {
  alert('Thanks!');
}

elem.onclick = sayThanks;

0, như thế này

1

Điều đó là có thể bởi vì khi trình duyệt đọc thuộc tính, nó sẽ tạo một trình xử lý như thế này.

02. Đó là. đối số đầu tiên của nó được gọi là

03 và phần thân được lấy từ thuộc tính

Chúng ta có thể chỉ định không chỉ một hàm mà còn cả một đối tượng làm trình xử lý sự kiện bằng cách sử dụng

Click me

8. Khi một sự kiện xảy ra, phương thức

05 của nó được gọi là

Ví dụ

2

Như chúng ta có thể thấy, khi

Click me

8 nhận một đối tượng làm trình xử lý, nó sẽ gọi

07 trong trường hợp có sự kiện

Chúng ta cũng có thể sử dụng các đối tượng của một lớp tùy chỉnh, như thế này

3

Ở đây cùng một đối tượng xử lý cả hai sự kiện. Xin lưu ý rằng chúng tôi cần thiết lập rõ ràng các sự kiện để lắng nghe bằng cách sử dụng

Click me

8. Đối tượng

09 chỉ nhận được ở đây

9 và

0, không phải bất kỳ loại sự kiện nào khác

Phương pháp

05 không phải tự mình thực hiện tất cả công việc. Thay vào đó, nó có thể gọi các phương thức dành riêng cho sự kiện khác, như thế này

4

Giờ đây, các trình xử lý sự kiện được tách biệt rõ ràng, điều đó có thể dễ dàng hỗ trợ hơn

Có 3 cách để chỉ định xử lý sự kiện

1. thuộc tính HTML.
   13
2. Thuộc tính DOM.
   14
3. phương pháp.
   15 để thêm,

   Click me

   9 để xóa

Các thuộc tính HTML được sử dụng một cách tiết kiệm, vì JavaScript ở giữa thẻ HTML trông hơi kỳ quặc và xa lạ. Cũng không thể viết nhiều mã trong đó

Bạn có thể sử dụng các thuộc tính DOM nhưng chúng tôi không thể chỉ định nhiều hơn một trình xử lý sự kiện cụ thể. Trong nhiều trường hợp, giới hạn đó không gây áp lực

Cách cuối cùng là linh hoạt nhất nhưng cũng dài nhất để viết. Có một vài sự kiện chỉ hoạt động với nó, ví dụ như

9 và

8 (sẽ được đề cập). Ngoài ra,

Click me

8 hỗ trợ các đối tượng làm trình xử lý sự kiện. Trong trường hợp đó, phương thức

05 được gọi trong trường hợp xảy ra sự kiện

Bất kể bạn chỉ định trình xử lý như thế nào - nó sẽ lấy một đối tượng sự kiện làm đối số đầu tiên. Đối tượng đó chứa thông tin chi tiết về những gì đã xảy ra

Chúng tôi có thể sử dụng onclick trong thẻ đầu vào không?

Làm cách nào để sử dụng insertAdjacentHTML trong js?

Làm cách nào để kích hoạt sự kiện nhấp vào nút trong JavaScript?

insertAdjacentHTML hoạt động như thế nào?