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) Show 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
sự kiện bàn phím
Sự kiện phần tử biểu mẫu
sự kiện tài liệu
sự kiện CSS
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à 0Chẳ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ạyXin 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ôngThuộ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. 3Chúng tôi có thể chỉ định trình xử lý bằng thuộc tính DOM 0Ví 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
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ệtVì 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ệnTrong 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 6Giá 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
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ý
Nhưng hãy cẩn thận. chức năng nên được chỉ định là 0, không phải 1
Nếu chúng ta thêm dấu ngoặc đơn, thì 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à 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 0Không sử dụng 5 cho người xử lýMột cuộc gọi như vậy sẽ không hoạt động 1Vấn đề trường hợp thuộc tính DOM Chỉ định một trình xử lý cho 3, không phải 7, vì các thuộc tính DOM phân biệt chữ hoa chữ thườngVấ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ó 2Cá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 8 và 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 0Tên sự kiện, e. g. 1. 2Hàm xử lý. 3Một đối tượng tùy chọn bổ sung có thuộc tính
Để xóa trình xử lý, hãy sử dụng 9 4Loạ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 5Trình xử lý sẽ không bị xóa vì 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 6Xin 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 8Nhiều cuộc gọi đến 8 cho phép nó thêm nhiều trình xử lý, như thế này 7Như 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à 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 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 8Chẳ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 9Vì vậy, 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 0Một số thuộc tính của đối tượng 0 3Loại sự kiện, đây là 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 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ínhChú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 8. Khi một sự kiện xảy ra, phương thức 05 của nó được gọi làVí dụ 2Như chúng ta có thể thấy, khi 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ệnChú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 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ácPhươ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 4Giờ đâ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
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, 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ệnBấ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?Thuộc tính onclick của đối tượng Đầu vào chỉ định hàm xử lý sự kiện được gọi khi người dùng nhấp vào phần tử đầu vào . Nó không được gọi khi phương thức click() được gọi cho phần tử. Chỉ các phần tử biểu mẫu là các nút mới gọi trình xử lý sự kiện onclick.
Làm cách nào để sử dụng insertAdjacentHTML trong js?Cách thức hoạt động. . Đầu tiên, chọn phần tử ul theo danh sách id của nó bằng phương thức querySelector() Tiếp theo, sử dụng phương thức insertAdjacentHTML() để chèn phần tử tiêu đề 2 trước phần tử ul. . Sau đó, sử dụng phương thức insertAdjacentHTML() để chèn một phần tử mục danh sách mới trước phần tử con đầu tiên của phần tử ul Làm cách nào để kích hoạt sự kiện nhấp vào nút trong JavaScript?Để kích hoạt các sự kiện nhấp chuột trong JavaScript, có thể áp dụng phương thức “click()” để tìm nạp nút và gọi hàm đã thêm tương ứng . Ngoài ra, các phương thức “addEventListener()” và “dispatchEvent()” có thể được sử dụng để bao gồm một sự kiện đã chỉ định và gửi nó đến một đối tượng mới được tạo.
insertAdjacentHTML hoạt động như thế nào?Phương thức insertAdjacentHTML() của giao diện Phần tử phân tích cú pháp văn bản đã chỉ định dưới dạng HTML hoặc XML và chèn các nút kết quả vào cây DOM tại một vị trí đã chỉ định. |