Tạo bong bóng sự kiện và ghi lại sự kiện trong JavaScript: Tất cả những gì bạn cần biết

Tạo bong bóng sự kiện và Ghi lại sự kiện là những thuật ngữ được sử dụng nhiều nhất trong JavaScript tại thời điểm diễn ra sự kiện. Đây là hai cách truyền sự kiện trong HTML DOM API. Bài viết này về Tạo bong bóng sự kiện và Ghi lại sự kiện trong JavaScript sẽ mô tả chi tiết lý do tại sao chúng tôi yêu cầu những điều này trong theo trình tự sau:

• • • Sự kiện bong bóng trong JavaScript là gì?
    • Truyền bá sự kiện là gì?
    • Chụp sự kiện là gì?
    • Sử dụng tạo bong bóng sự kiện và ghi lại sự kiện trong JavaScript
    • Quy trình làm việc

Sự kiện bong bóng trong JavaScript là gì?

Bong bóng sự kiện là thuật ngữ mà mọi người phải bắt gặp khi phát triển ứng dụng web hoặc trang web bằng cách sử dụng . Về cơ bản, Event Bubbling là một kỹ thuật trong đó các trình xử lý sự kiện được gọi khi một mục được lồng vào một mục khác và phải cùng một sự kiện. Nó tương tự như Encapsulation.

Bong bóng sự kiện chỉ là một phần nhỏ của việc xử lý sự kiện trong JavaScript. Để hiểu rõ hơn, chúng ta phải biết về Truyền bá sự kiện và cách nó hỗ trợ Tạo bong bóng sự kiện.

Truyền bá sự kiện là gì?

Sự kiện Truyền bá có thể được so sánh như là thuật ngữ mẹ với sự kiện sôi sục và bắt giữ như là con của nó.Nó được biểu diễn như sau:

Nếu bạn nhấp vào bất kỳ hình ảnh nào thì nó sẽ không chỉ tạo ra một sự kiện nhấp chuột mà còn chuyển sang cha mẹ “a” và ông nội “li”. Bằng cách này, sự lan truyền của chức năng diễn ra. Ở đây hình ảnh được coi là phần tử con và nó là mục tiêu sự kiện nơi tạo ra nhấp chuột. Hình ảnh cùng với tổ tiên của nó cùng nhau tạo thành nhánh trong thuật ngữ cây. Chi nhánh rất quan trọng khi chúng ta biết được con đường mà sự kiện lan truyền.

Mỗi người nghe được gọi với một đối tượng sự kiện tương ứng để thu thập thông tin về sự kiện. Việc tuyên truyền này rất quan trọng vì chúng ta biết quá trình kêu gọi tất cả người nghe cho sự kiện nhất định. Từ hình trên, chúng ta có thể nhận thấy rằng việc xác định nhánh là tĩnh. Mọi sửa đổi cây xảy ra trong sự kiện đều bị bỏ qua. Ở đây, sự lan truyền là hai chiều, tức là nó đi từ cửa sổ đến mục tiêu sự kiện và quay trở lại. Ở đây, sự lan truyền rộng rãi được phân loại thành ba loại chính. Những người đang có:

1. Giai đoạn Chụp: Đi từ cửa sổ đến giai đoạn mục tiêu sự kiện.
2. Giai đoạn Mục tiêu: Đó là giai đoạn mục tiêu.
3. Giai đoạn bong bóng: Từ cha mẹ mục tiêu sự kiện trở lại cửa sổ.

Chụp sự kiện là gì?

Trong giai đoạn này, các trình nghe trình thu thập được gọi có giá trị đã được đăng ký là 'true'. Nó được viết là:

el.addEventListener ('click', nghe, true)

Ở đây giá trị của người nghe đã được đăng ký là “true” nên sự kiện này đang được ghi lại. Nếu không có giá trị thì giá trị theo mặc định là false và sự kiện sẽ không được ghi lại. Vì vậy, trong giai đoạn này, sự kiện có giá trị true chỉ xuất hiện từ cửa sổ và được gọi và nắm bắt.

Sau đó, trong giai đoạn mục tiêu sự kiện, tất cả các trình nghe đã đăng ký được gọi bất kể trạng thái cờ của chúng là đúng hay sai.

Sử dụng tạo bong bóng sự kiện và ghi lại sự kiện trong JavaScript

Trong giai đoạn tạo bọt, chỉ có trình thu thập không được gọi, đó là các sự kiện có giá trị cờ là 'sai'. Sự kiện sôi nổi và Chụp sự kiện rất hữu ích và quan trọng trong thuật ngữ DOM (Document Object Model).

el.addEventListener ('nhấp chuột', người nghe, false) // trình nghe không nắm bắt được el.addEventListener ('nhấp chuột', trình nghe) // trình nghe không nắm bắt

Đoạn mã trên cho thấy hoạt động của giai đoạn sủi bọt và bắt giữ. Không phải tất cả các sự kiện đều đi đến mục tiêu sự kiện. Một số trong số chúng không nổi lên. Hành trình của họ dừng lại sau pha mục tiêu. Luồng ba pha sự kiện được minh họa trong sơ đồ sau:

Sự kiện sôi sục không hoạt động trong tất cả các loại sự kiện, tuy nhiên, người nghe phải có “.Bubble ”Thuộc tính boolean của đối tượng sự kiện. Một số thuộc tính khác bao gồm:

1. e.target: tham chiếu đến mục tiêu sự kiện.
2. e.currentTarget: nó là chế độ mà người nghe hiện tại được đăng ký. Ở đây giá trị được tham chiếu bằng cách sử dụng điều này từ khóa.
3. e.eventPhase: Nó là một số nguyên đề cập đến ba từ khóa khác, chẳng hạn như Capturing_phase, Bubbling_phase, AT_Target giai đoạn.

Quy trình làm việc

Chúng ta hãy xem xét kỹ hơn trong hình minh họa trên. Chúng ta hãy nhấp vào phần tử “buttonOne” và sau đó ngay lập tức một sự kiện sẽ được kích hoạt. Thông thường một sự kiện bắt đầu hành trình của nó từ gốc là phần tử trên cùng của cây. Sau đó, nó đi theo cây sự kiện mục tiêu là “buttonOne”. Đây là cách nó di chuyển:

Như thể hiện trong hình, sự kiện sẽ đi qua các thuật ngữ DOM để đến sự kiện mục tiêu cuối cùng. Bây giờ một khi sự kiện đạt được mục tiêu của nó, nó không kết thúc. Nó diễn ra liên tục trong các thuật ngữ DOM như được minh họa trong hình bên dưới.

Cũng giống như trước đây, mọi yếu tố dọc theo đường dẫn của sự kiện khi nó đang tiến lên đều được thông báo về sự tồn tại của nó. Khi nó tiếp tục như vậy, bạn phải suy nghĩ liệu chúng ta có thể dừng quá trình này hay không. Vâng, câu trả lời cho câu hỏi là Có, chúng tôi có thể ngừng việc truyền bá sự kiện. Điều này được thực hiện bằng cách gọi 'StopPropagation' phương thức của đối tượng sự kiện.

máy quét java nhận ký tự tiếp theo

window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listening ('c1'), true) window.addEventListener ('click', nghe ('c2 '), true) window.addEventListener (' nhấp chuột ', người nghe (' b1 ')) window.addEventListener (' nhấp chuột ', trình nghe (' b2 '))

Bằng cách áp dụng từ khóa, chúng tôi có thể dừng việc truyền bá. Nó hoạt động như thế này, khi chúng tôi áp dụng từ khóa “ stopPropagation ” thì tất cả các sự kiện trong các sự kiện chính sẽ không được gọi và do đó chúng sẽ không được gọi như nó được đề cập trong đoạn mã ở trên. Có một từ khóa khác được gọi là “ stopIm InstantPropagation ”. Như tên cho thấy nó ngay lập tức dừng quá trình tố tụng của anh chị em.

Với điều này, chúng ta đã đi đến phần cuối của bài viết của chúng tôi. Tôi hy vọng bạn đã hiểu tạo bong bóng sự kiện và ghi lại sự kiện trong JavaScript là gì.

Bây giờ bạn đã biết về Tạo bong bóng sự kiện và Ghi lại sự kiện trong JavaScript, hãy xem của Edureka. Đào tạo Chứng chỉ Phát triển Web sẽ giúp bạn Tìm hiểu cách tạo các trang web ấn tượng bằng cách sử dụng HTML5, CSS3, Twitter Bootstrap 3, jQuery và Google API và triển khai nó lên Amazon Simple Storage Service (S3).

Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến vấn đề này trong phần nhận xét của “Tạo bong bóng sự kiện và ghi lại sự kiện trong JavaScript” và chúng tôi sẽ liên hệ lại với bạn.