Hướng dẫn what is an event in javascript? - sự kiện trong javascript là gì?
Các sự kiện HTML là "những thứ" xảy ra với các yếu tố HTML."things" that happen to HTML elements. Show
Khi JavaScript được sử dụng trong các trang HTML, JavaScript có thể "phản ứng" trên các sự kiện này. "react" on these events. Sự kiện HTMLMột sự kiện HTML có thể là điều mà trình duyệt thực hiện hoặc một cái gì đó mà người dùng làm. Dưới đây là một số ví dụ về các sự kiện HTML:
Thông thường, khi các sự kiện xảy ra, bạn có thể muốn làm điều gì đó. JavaScript cho phép bạn thực thi mã khi phát hiện các sự kiện. HTML cho phép các thuộc tính xử lý sự kiện, với mã JavaScript, được thêm vào các phần tử HTML.with JavaScript code, to be added to HTML elements. Với các trích dẫn đơn: Với dấu ngoặc kép: Với dấu ngoặc kép: Trong ví dụ sau, thuộc tính const btn = document.querySelector('button'); function random(number) { return Math.floor(Math.random() * (number+1)); } function changeBackground() { const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`; document.body.style.backgroundColor = rndCol; } btn.addEventListener('click', changeBackground); 1 (có mã), được thêm vào phần tử const btn = document.querySelector('button'); function random(number) { return Math.floor(Math.random() * (number+1)); } function changeBackground() { const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`; document.body.style.backgroundColor = rndCol; } btn.addEventListener('click', changeBackground); 2:Thí dụ Thời gian là? Hãy tự mình thử » Trong ví dụ trên, mã JavaScript thay đổi nội dung của phần tử với id = "demo". Trong ví dụ sau, thuộc tính const btn = document.querySelector('button'); function random(number) { return Math.floor(Math.random() * (number+1)); } function changeBackground() { const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`; document.body.style.backgroundColor = rndCol; } btn.addEventListener('click', changeBackground); 1 (có mã), được thêm vào phần tử const btn = document.querySelector('button'); function random(number) { return Math.floor(Math.random() * (number+1)); } function changeBackground() { const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`; document.body.style.backgroundColor = rndCol; } btn.addEventListener('click', changeBackground); 2:Thí dụ Thời gian là? Hãy tự mình thử » Trong ví dụ trên, mã JavaScript thay đổi nội dung của phần tử với id = "demo".Trong ví dụ tiếp theo, mã thay đổi nội dung của phần tử của chính nó (sử dụng 3):
Người dùng nhấn phím bàn phím đang tảiTrình duyệt đã hoàn thành tải trang
Hành động nên được thực hiện khi người dùng nhấp vào nút
Hành động nên được thực hiện khi người dùng nhấp vào nút Nội dung cần được xác minh khi người dùng nhập dữ liệuExercise:Và nhiều hơn nữa ... Nhiều phương pháp khác nhau có thể được sử dụng để cho phép JavaScript hoạt động với các sự kiện: Trong mô -đun này Sự kiện trong định nghĩa JavaScript là gì? Các sự kiện là hành động hoặc sự xuất hiện xảy ra trong hệ thống bạn đang lập trình, mà hệ thống cho bạn biết về để mã của bạn có thể phản ứng với họ. Ví dụ: nếu người dùng nhấp vào nút trên trang web, bạn có thể muốn phản ứng với hành động đó bằng cách hiển thị hộp thông tin.Sự kiện được sử dụng trong JavaScript là gì?events are actions or occurrences that happen in the system you are programming — the system produces (or "fires") a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs. For example, in an airport, when the runway is clear for take off, a signal is communicated to the pilot. As a result, the plane can safely take off.
Các sự kiện HTML là "những thứ" xảy ra với các yếu tố HTML. Khi JavaScript được sử dụng trong các trang HTML, JavaScript có thể "phản ứng" trên các sự kiện này. ... Các sự kiện HTML phổ biến .. Sự kiện có phải là từ khóa trong JavaScript không?
Trong trường hợp của web, các sự kiện được bắn vào bên trong cửa sổ trình duyệt và có xu hướng được gắn vào một mục cụ thể nằm trong đó. Đây có thể là một phần tử duy nhất, một tập hợp các phần tử, tài liệu HTML được tải trong tab hiện tại hoặc toàn bộ cửa sổ trình duyệt. Có nhiều loại sự kiện khác nhau có thể xảy ra.a lot of events that can be fired. Ví dụ:event handler to it. This is a block of code (usually a JavaScript function that you as a programmer create) that runs when the event fires. When such a block of code is defined to run in response to an event, we say we are registering an event handler. Note: Event handlers are sometimes called event listeners — they are pretty much interchangeable for our purposes, although strictly speaking, they work together. The listener listens out for the event happening, and the handler is the code that is run in response to it happening. Người dùng chọn, nhấp vào hoặc lơ lửng con trỏ trên một phần tử nhất định. Web events are not part of the core JavaScript language — they are defined as part of the APIs built into the browser. Người dùng chọn một phím trên bàn phím.Người dùng thay đổi kích thước hoặc đóng cửa sổ trình duyệt.
Một trang web hoàn thành tải.
Một biểu mẫu được gửi. Một video được phát, tạm dừng hoặc kết thúc. Một lỗi xảy ra.
Lưu ý: Các sự kiện web không phải là một phần của ngôn ngữ JavaScript cốt lõi - chúng được định nghĩa là một phần của API được tích hợp trong trình duyệt. Nó không chỉ là các trang webCác sự kiện không phải là duy nhất đối với JavaScript - hầu hết các ngôn ngữ lập trình đều có một số loại mô hình sự kiện và cách thức hoạt động của mô hình thường khác với cách của JavaScript. Trên thực tế, mô hình sự kiện trong JavaScript cho các trang web khác với mô hình sự kiện cho JavaScript vì nó được sử dụng trong các môi trường khác. Ví dụ: Node.js là một thời gian chạy JavaScript rất phổ biến cho phép các nhà phát triển sử dụng JavaScript để xây dựng các ứng dụng phía máy chủ và mạng. Mô hình sự kiện Node.js dựa vào người nghe để lắng nghe các sự kiện và phát các sự kiện phát ra định kỳ - nó không có vẻ khác, nhưng mã hoàn toàn khác, sử dụng các chức năng như 6 để đăng ký trình nghe sự kiện và 7 để Đăng ký một trình nghe sự kiện không đăng ký sau khi nó chạy một lần. Tài liệu sự kiện HTTP Connect cung cấp một ví dụ tốt.Bạn cũng có thể sử dụng JavaScript để xây dựng các tiện ích bổ sung trình duyệt chéo-cải tiến chức năng trình duyệt-sử dụng công nghệ gọi là Webextensions. Mô hình sự kiện tương tự như mô hình sự kiện web, nhưng một chút khác nhau-các thuộc tính của người nghe sự kiện được đúc lạc đà (như 8 thay vì 9) và cần được kết hợp với hàm 0. Xem trang 1 để biết một ví dụ.Bạn không cần phải hiểu bất cứ điều gì về các môi trường khác như vậy ở giai đoạn này trong việc học của bạn; Chúng tôi chỉ muốn làm rõ rằng các sự kiện có thể khác nhau trong các môi trường lập trình khác nhau. Sử dụng addEventListener ()Cơ chế được đề xuất để thêm trình xử lý sự kiện trong các trang web là phương thức 1:
Bên trong hàm 1, chúng tôi chỉ định hai tham số: tên của sự kiện chúng tôi muốn đăng ký trình xử lý này và mã bao gồm chức năng xử lý mà chúng tôi muốn chạy để đáp ứng với nó.Bạn có thể biến hàm xử lý thành một hàm được đặt tên riêng biệt, như thế này:
Nghe các sự kiện khácCó nhiều sự kiện khác nhau có thể được bắn bởi một yếu tố nút. Hãy thử nghiệm. Đầu tiên, tạo một bản sao cục bộ của màu ngẫu nhiên-addeventlistener.html và mở nó trong trình duyệt của bạn. Nó chỉ là một bản sao của ví dụ màu ngẫu nhiên đơn giản mà chúng tôi đã chơi. Bây giờ, hãy thử thay đổi 4 sang các giá trị khác nhau sau đây và quan sát các kết quả trong ví dụ:
Một số sự kiện, chẳng hạn như 4, có sẵn trên hầu hết mọi yếu tố. Những người khác cụ thể hơn và chỉ hữu ích trong các tình huống nhất định: ví dụ, sự kiện 1 chỉ có sẵn trên một số yếu tố, chẳng hạn như 2.Loại bỏ người ngheNếu bạn đã thêm một trình xử lý sự kiện bằng cách sử dụng 1, bạn có thể xóa nó một lần nữa bằng phương thức 4. Ví dụ: điều này sẽ loại bỏ trình xử lý sự kiện 5:
Người xử lý sự kiện cũng có thể được xóa bằng cách chuyển một 6 đến 1 và sau đó gọi 8 trên bộ điều khiển sở hữu 6. Ví dụ: để thêm một trình xử lý sự kiện mà chúng ta có thể xóa bằng 6:
Sau đó, trình xử lý sự kiện được tạo bởi mã ở trên có thể được xóa như thế này:
Đối với các chương trình đơn giản, nhỏ, làm sạch các trình xử lý sự kiện cũ, không sử dụng không cần thiết, nhưng đối với các chương trình lớn hơn, phức tạp hơn, nó có thể cải thiện hiệu quả. Ngoài ra, khả năng xóa trình xử lý sự kiện cho phép bạn có cùng một nút thực hiện các hành động khác nhau trong các trường hợp khác nhau: tất cả những gì bạn phải làm là thêm hoặc xóa trình xử lý. Thêm nhiều người nghe cho một sự kiện duy nhấtBằng cách thực hiện nhiều hơn một cuộc gọi đến 1, cung cấp các trình xử lý khác nhau, bạn có thể có nhiều trình xử lý cho một sự kiện duy nhất:
Cả hai chức năng bây giờ sẽ chạy khi phần tử được nhấp. Tìm hiểu thêmCó các tính năng và tùy chọn mạnh mẽ khác có sẵn với 1.Đây là một chút phạm vi cho bài viết này, nhưng nếu bạn muốn đọc chúng, hãy truy cập các trang tham khảo 1 và 4.Các cơ chế nghe sự kiện khácChúng tôi khuyên bạn nên sử dụng 1 để đăng ký xử lý sự kiện. Đó là phương pháp mạnh mẽ nhất và quy mô tốt nhất với các chương trình phức tạp hơn. Tuy nhiên, có hai cách khác để đăng ký trình xử lý sự kiện mà bạn có thể thấy: các thuộc tính xử lý sự kiện và trình xử lý sự kiện nội tuyến.Thuộc tính xử lý sự kiệnCác đối tượng (như các nút) có thể bắn các sự kiện cũng thường có các thuộc tính có tên là 6 theo sau là tên của sự kiện. Ví dụ, các yếu tố có một thuộc tính 1. Đây được gọi là một tài sản xử lý sự kiện. Để lắng nghe sự kiện, bạn có thể gán chức năng xử lý cho tài sản.Ví dụ: chúng ta có thể viết lại ví dụ màu ngẫu nhiên như thế này:
Bạn cũng có thể đặt thuộc tính Handler thành một hàm được đặt tên: 0Với các thuộc tính xử lý sự kiện, bạn không thể thêm nhiều hơn một trình xử lý cho một sự kiện. Ví dụ: bạn có thể gọi 8 trên một phần tử nhiều lần, với các chức năng khác nhau được chỉ định trong đối số thứ hai: 1Điều này là không thể với các thuộc tính xử lý sự kiện vì bất kỳ nỗ lực tiếp theo nào để đặt tài sản sẽ ghi đè lên các thuộc tính trước đó: 2Trình xử lý sự kiện nội tuyến - không sử dụng những điều này
Bạn cũng có thể thấy một mẫu như thế này trong mã của bạn: 3 4Phương pháp sớm nhất để đăng ký Trình xử lý sự kiện được tìm thấy trên web liên quan đến các thuộc tính HTML xử lý sự kiện (hoặc trình xử lý sự kiện nội tuyến) như được hiển thị ở trên - giá trị thuộc tính theo nghĩa đen là mã JavaScript bạn muốn chạy khi sự kiện xảy ra. Ví dụ: ví dụ: gọi một hàm được xác định bên trong phần tử 9 trên cùng một trang, nhưng bạn cũng có thể chèn JavaScript trực tiếp bên trong thuộc tính, ví dụ:: 5Bạn có thể tìm thấy các thuộc tính HTML tương đương cho nhiều thuộc tính xử lý sự kiện; Tuy nhiên, bạn không nên sử dụng những thứ này - chúng được coi là thực hành xấu. Có vẻ dễ dàng sử dụng thuộc tính xử lý sự kiện nếu bạn đang làm điều gì đó thực sự nhanh chóng, nhưng chúng nhanh chóng trở nên không thể quản lý và không hiệu quả. Để bắt đầu, không phải là một ý tưởng tốt để trộn HTML và JavaScript của bạn, vì nó trở nên khó đọc. Giữ JavaScript của bạn riêng biệt là một thực tiễn tốt và nếu nó nằm trong một tệp riêng, bạn có thể áp dụng nó cho nhiều tài liệu HTML. Ngay cả trong một tệp duy nhất, trình xử lý sự kiện nội tuyến không phải là một ý tưởng tốt. Một nút là OK, nhưng nếu bạn có 100 nút thì sao? Bạn phải thêm 100 thuộc tính vào tệp; Nó sẽ nhanh chóng biến thành một cơn ác mộng bảo trì. Với JavaScript, bạn có thể dễ dàng thêm chức năng xử lý sự kiện vào tất cả các nút trên trang cho dù có bao nhiêu, sử dụng một cái gì đó như thế này: 6Cuối cùng, nhiều cấu hình máy chủ phổ biến sẽ không cho phép JavaScript nội tuyến, như một biện pháp bảo mật. Bạn không bao giờ nên sử dụng các thuộc tính xử lý sự kiện HTML - những thuộc tính đã lỗi thời và sử dụng chúng là thực tế xấu. — those are outdated, and using them is bad practice. Đối tượng sự kiệnĐôi khi, bên trong hàm xử lý sự kiện, bạn sẽ thấy một tham số được chỉ định với một tên như 0, 1 hoặc 2. Đây được gọi là đối tượng sự kiện và nó được tự động chuyển cho người xử lý sự kiện để cung cấp các tính năng và thông tin bổ sung. Ví dụ: hãy viết lại ví dụ màu ngẫu nhiên của chúng tôi một chút:event object, and it is automatically passed to event handlers to provide extra features
and information. For example, let's rewrite our random color example again slightly: 7Ở đây bạn có thể thấy chúng ta bao gồm một đối tượng sự kiện, E, trong hàm và trong hàm đặt kiểu màu nền trên 3 - đó là nút. Thuộc tính 4 của đối tượng sự kiện luôn là một tham chiếu đến phần tử mà sự kiện xảy ra. Vì vậy, trong ví dụ này, chúng tôi đang đặt một màu nền ngẫu nhiên trên nút chứ không phải trang.e, in the function, and in the function setting a background color style on 3 — which is the button itself. The 4 property of the event object is always a reference to the element the event occurred upon. So, in this example, we are setting a random background color on the button, not the page. Lưu ý: Xem phần Phái đoàn sự kiện bên dưới để biết ví dụ mà chúng tôi sử dụng 5.Lưu ý: Bạn có thể sử dụng bất kỳ tên nào bạn thích cho đối tượng sự kiện - bạn chỉ cần chọn một tên mà sau đó bạn có thể sử dụng để tham khảo nó bên trong chức năng xử lý sự kiện. ________ 92/________ 91/________ 90 được các nhà phát triển sử dụng phổ biến nhất vì chúng ngắn và dễ nhớ. Luôn luôn tốt để nhất quán - với chính bạn và với người khác nếu có thể. You can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function. 2/ 1/ 0 is most commonly used by developers because they are short and easy to remember.
It's always good to be consistent — with yourself, and with others if possible. Hầu hết các đối tượng sự kiện có một bộ thuộc tính và phương thức tiêu chuẩn có sẵn trên đối tượng sự kiện; Xem tham chiếu đối tượng 9 để biết danh sách đầy đủ.Một số đối tượng sự kiện thêm các thuộc tính bổ sung có liên quan đến loại sự kiện cụ thể đó. Ví dụ: sự kiện 00 bắn khi người dùng nhấn phím. Đối tượng sự kiện của nó là 01, là đối tượng 9 chuyên dụng với thuộc tính 03 cho bạn biết khóa nào đã được nhấn: 8 9 0Thử gõ vào hộp văn bản và xem đầu ra: Ngăn chặn hành vi mặc địnhĐôi khi, bạn sẽ gặp phải một tình huống mà bạn muốn ngăn chặn một sự kiện làm những gì nó làm theo mặc định. Ví dụ, ví dụ như mẫu web của một biểu mẫu web. Khi bạn điền vào chi tiết và nhấp vào nút Gửi, hành vi tự nhiên là để dữ liệu được gửi đến một trang được chỉ định trên máy chủ để xử lý và trình duyệt sẽ được chuyển hướng đến một trang "thông báo thành công" của một số loại (hoặc một số loại (hoặc Cùng một trang, nếu một trang khác không được chỉ định). Rắc rối xảy ra khi người dùng chưa gửi chính xác dữ liệu - với tư cách là nhà phát triển, bạn muốn ngăn việc gửi lên máy chủ và đưa ra thông báo lỗi cho biết những gì sai và những gì cần phải làm để đặt mọi thứ đúng. Một số trình duyệt hỗ trợ các tính năng xác thực dữ liệu biểu mẫu tự động, nhưng vì nhiều người không nên, bạn nên không dựa vào chúng và thực hiện kiểm tra xác thực của riêng bạn. Hãy xem xét một ví dụ đơn giản. Đầu tiên, một biểu mẫu HTML đơn giản yêu cầu bạn nhập họ và họ đầu tiên: 1 2Bây giờ một số JavaScript - ở đây chúng tôi thực hiện kiểm tra rất đơn giản bên trong một trình xử lý cho sự kiện ____104 (sự kiện gửi được bắn trên một biểu mẫu khi nó được gửi) kiểm tra xem các trường văn bản có trống không. Nếu có, chúng tôi gọi hàm 05 trên đối tượng sự kiện - sẽ dừng việc gửi biểu mẫu - và sau đó hiển thị thông báo lỗi trong đoạn văn bên dưới biểu mẫu của chúng tôi để cho người dùng biết sai về: 3Rõ ràng, đây là xác thực hình thức khá yếu - nó sẽ không ngăn người dùng xác thực biểu mẫu với khoảng trống hoặc số được nhập vào các trường, ví dụ - nhưng nó ổn, ví dụ như mục đích. Đầu ra như sau: Sự kiện sủi bọt và bắt giữSự kiện sủi bọt và chụp là các thuật ngữ mô tả các giai đoạn trong cách trình duyệt xử lý các sự kiện nhắm vào các yếu tố lồng nhau. Đặt trình nghe trên phần tử cha mẹHãy xem xét một trang web như thế này: 4Ở đây, nút nằm trong một phần tử khác, một phần tử 06. Chúng tôi nói rằng phần tử 06 ở đây là cha mẹ của phần tử mà nó chứa. Điều gì xảy ra nếu chúng ta thêm một trình xử lý sự kiện nhấp vào cha mẹ, sau đó nhấp vào nút?parent of the element it contains. What happens if we add a click event handler to the parent, then click the button? 5Bạn sẽ thấy rằng cha mẹ bắn một sự kiện nhấp chuột khi người dùng nhấp vào nút: 6Điều này có ý nghĩa: nút nằm bên trong 06, vì vậy khi bạn nhấp vào nút, bạn cũng sẽ nhấp một cách ngầm vào phần tử bên trong.Ví dụ sủi bọtĐiều gì xảy ra nếu chúng ta thêm người nghe sự kiện vào nút và cha mẹ? 7Hãy thử thêm trình xử lý sự kiện nhấp vào nút, cha mẹ của nó ( 06) và phần tử 4 có chứa cả hai: 8Bạn sẽ thấy rằng cả ba yếu tố sẽ kích hoạt sự kiện nhấp chuột khi người dùng nhấp vào nút: 9Trong trường hợp này:
Chúng tôi mô tả điều này bằng cách nói rằng sự kiện này bong bóng từ phần tử trong cùng được nhấp.bubbles up from the innermost element that was clicked. Hành vi này có thể hữu ích và cũng có thể gây ra những vấn đề bất ngờ. Trong phần tiếp theo, chúng ta sẽ thấy một vấn đề mà nó gây ra và tìm giải pháp. Ví dụ trình phát videoMở ra ví dụ Show-Video-Box.html trong một tab mới (và mã nguồn trong một tab khác.) Nó cũng có sẵn trực tiếp bên dưới: Ví dụ này cho thấy và ẩn một 06 với phần tử 2 bên trong nó: 0Khi nhấp vào 2, video được hiển thị, bằng cách thay đổi thuộc tính lớp trên 06 từ 18 thành 19 (CSS của ví dụ chứa hai lớp này, định vị hộp ra khỏi màn hình và trên màn hình): 1 2Sau đó, chúng tôi thêm một vài trình xử lý sự kiện 4 - lần đầu tiên vào 06 và lần thứ hai cho 2: 3Bây giờ, khi khu vực của 06 bên ngoài video được nhấp, hộp sẽ được ẩn trở lại và khi chính video được nhấp, video sẽ bắt đầu phát.Nhưng có một vấn đề - hiện tại, khi bạn nhấp vào video, nó bắt đầu phát, nhưng nó khiến 06 bị ẩn cùng một lúc. Điều này là do video nằm trong 06 - nó là một phần của nó - vì vậy việc nhấp vào video thực sự chạy cả hai trình xử lý sự kiện trên.Sủi bọt và bắt giữ giải thíchKhi một sự kiện được bắn vào một yếu tố có các yếu tố cha mẹ (trong trường hợp này, 2 có 06 với tư cách là cha mẹ), các trình duyệt hiện đại đã chạy ba pha khác nhau - giai đoạn thu, pha đích và pha sủi bọt.capturing phase, the target phase, and the bubbling phase.Trong giai đoạn bắt giữ:capturing phase:
Trong giai đoạn mục tiêu:target phase:
Trong giai đoạn sủi bọt, điều ngược lại hoàn toàn với giai đoạn bắt giữ xảy ra:bubbling phase, the exact opposite of the capturing phase occurs:
Trong các trình duyệt hiện đại, theo mặc định, tất cả các trình xử lý sự kiện được đăng ký cho giai đoạn sủi bọt. Vì vậy, trong ví dụ hiện tại của chúng tôi, khi bạn nhấp vào video, sự kiện bong bóng từ phần tử 2 ra ngoài thành phần 28. Dọc đường:
Lưu ý: Tất cả các sự kiện JavaScript đều trải qua các giai đoạn chụp và mục tiêu. Liệu một sự kiện có đi vào giai đoạn sủi bọt có thể được kiểm tra bởi thuộc tính 33 property. Lưu ý: Người nghe sự kiện đã đăng ký cho phần tử 28 element aren't at the top of the hierarchy. For example, event listeners registered for the
48 and 49 objects are higher in the hierarchy. Ví dụ sau đây cho thấy hành vi được mô tả ở trên. Di chuột qua các số và nhấp vào chúng để kích hoạt các sự kiện, sau đó quan sát đầu ra được ghi lại. Mã ví dụ: Các giai đoạn sự kiện 4 5 6Khắc phục sự cố với StopPropagation ()Như chúng ta đã thấy trong ví dụ video, đây có thể là một hành vi rất khó chịu, nhưng có một cách để ngăn chặn nó! Đối tượng 9 tiêu chuẩn có sẵn trên nó được gọi là 51, khi được gọi trên đối tượng sự kiện của người xử lý, làm cho nó được chạy bộ nhưng sự kiện không có nữa chạy.Vì vậy, chúng tôi có thể khắc phục sự cố hiện tại của mình bằng cách thay đổi chức năng xử lý thứ hai trong khối mã trước đó thành điều này: 7Bạn có thể thử tạo một bản sao cục bộ của mã nguồn show-video-box.html và tự sửa nó hoặc xem kết quả cố định trong show-video-box-fixed.html (cũng xem mã nguồn ở đây). Lưu ý: Tại sao phải bận tâm với cả việc bắt giữ và sủi bọt? Chà, trong những ngày xưa tồi tệ khi các trình duyệt ít tương thích với nhau hơn so với hiện tại, Netscape chỉ sử dụng sự kiện chụp và Internet Explorer chỉ sử dụng sủi bọt sự kiện. Khi W3C quyết định cố gắng chuẩn hóa hành vi và đạt được sự đồng thuận, họ đã kết thúc với hệ thống này bao gồm cả hai, đó là một trình duyệt hiện đại được thực hiện. Why bother with both capturing and bubbling? Well, in the bad old days when browsers were much less cross-compatible than they are now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented. Lưu ý: Như đã đề cập ở trên, theo mặc định, hầu hết tất cả các trình xử lý sự kiện đều được đăng ký trong giai đoạn sủi bọt và điều này có ý nghĩa hơn trong hầu hết thời gian. Nếu bạn thực sự muốn đăng ký một sự kiện trong giai đoạn bắt giữ, bạn có thể làm như vậy bằng cách đăng ký trình xử lý của mình bằng 1, and setting the optional third property to 34. Phái đoàn sự kiệnMặc dù vậy, sự kiện không chỉ gây phiền nhiễu: nó có thể rất hữu ích. Cụ thể, nó cho phép một thực hành gọi là Phái đoàn sự kiện. Trong thực tế này, khi chúng tôi muốn một số mã chạy khi người dùng tương tác với bất kỳ một trong số lượng lớn các yếu tố con Đặt người nghe sự kiện trên mỗi đứa trẻ.event delegation. In this practice, when we want some code to run when the user interacts with any one of a large number of child elements, we set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually. Hãy quay lại ví dụ đầu tiên của chúng tôi, nơi chúng tôi đặt màu nền của toàn bộ trang khi người dùng nhấp vào nút. Thay vào đó, giả sử rằng trang được chia thành 16 gạch và chúng tôi muốn đặt từng ô thành một màu ngẫu nhiên khi người dùng nhấp vào gạch đó. Đây là HTML: 8Chúng tôi có một chút CSS, để đặt kích thước và vị trí của gạch: 9Bây giờ trong JavaScript, chúng tôi có thể thêm một trình xử lý sự kiện nhấp chuột cho mỗi ô. Nhưng một tùy chọn đơn giản và hiệu quả hơn nhiều là đặt trình xử lý sự kiện nhấp vào cha mẹ và dựa vào sự kiện sự kiện để đảm bảo rằng trình xử lý được thực thi khi người dùng nhấp vào gạch: 0Đầu ra như sau (thử nhấp vào trên đó): Lưu ý: Trong ví dụ này, chúng tôi đang sử dụng 5 to get the element that was the target of the event (that
is, the innermost element). If we wanted to access the element that handled this event (in this case the container) we could use 55.Kiểm tra kỹ năng của bạn!Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Để xác minh bạn đã giữ lại thông tin này trước khi bạn tiếp tục - xem Kiểm tra các kỹ năng của bạn: Sự kiện. Sự kết luậnBây giờ bạn nên biết tất cả những gì bạn cần biết về các sự kiện web ở giai đoạn đầu này. Như đã đề cập, các sự kiện không thực sự là một phần của JavaScript cốt lõi - chúng được xác định trong các API Web của Trình duyệt. Ngoài ra, điều quan trọng là phải hiểu rằng các bối cảnh khác nhau trong đó JavaScript được sử dụng có các mô hình sự kiện khác nhau-từ API Web đến các lĩnh vực khác như trình duyệt Webextensions và Node.js (JavaScript phía máy chủ). Chúng tôi không mong đợi bạn hiểu tất cả các lĩnh vực này bây giờ, nhưng nó chắc chắn giúp hiểu được những điều cơ bản của các sự kiện khi bạn tiến lên phía trước với việc học phát triển web. Nếu có bất cứ điều gì bạn không hiểu, vui lòng đọc lại bài viết hoặc liên hệ với chúng tôi để yêu cầu giúp đỡ. Xem thêm
Trong mô -đun nàySự kiện trong định nghĩa JavaScript là gì?Các sự kiện là hành động hoặc sự xuất hiện xảy ra trong hệ thống bạn đang lập trình, mà hệ thống cho bạn biết về để mã của bạn có thể phản ứng với họ. Ví dụ: nếu người dùng nhấp vào nút trên trang web, bạn có thể muốn phản ứng với hành động đó bằng cách hiển thị hộp thông tin.actions or occurrences that happen in the system you are programming, which the system tells you about so your code can react to them. For example, if the user clicks a button on a webpage, you might want to react to that action by displaying an information box.
Sự kiện được sử dụng trong JavaScript là gì?Các sự kiện HTML là "những thứ" xảy ra với các yếu tố HTML.Khi JavaScript được sử dụng trong các trang HTML, JavaScript có thể "phản ứng" trên các sự kiện này.... Các sự kiện HTML phổ biến .. Sự kiện có phải là từ khóa trong JavaScript không?Sau đó, nó hoạt động tốt.Kết luận của tôi là 'sự kiện' là một từ dành riêng cho đối số sự kiện trong kịch bản java.'event'is a reserved word which stands for event argument in Java Script.
Sự kiện trong ngôn ngữ kịch bản là gì?Các sự kiện là những hành động xảy ra, thường là kết quả của điều mà người dùng làm.Ví dụ: nhấp vào nút là một sự kiện, như đang tập trung vào một yếu tố biểu mẫu.Có một tập hợp các sự kiện cụ thể mà Navigator nhận ra.Bạn có thể xác định trình xử lý sự kiện, tập lệnh được tự động thực hiện khi xảy ra sự kiện.actions that occur, usually as a result of something the user does. For example, a button click is an event, as is giving focus to a form element. There is a specific set of events that Navigator recognizes. You can define Event handlers, scripts that are automatically executed when an event occurs. |