Hướng dẫn bắt sự kiện trong java javascript năm 2024

CodeLearn is an online platform that helps users to learn, practice coding skills and join the online coding contests.

Links

Learning

Training

Fights

Information

About Us

Terms of Use

Help

Help

Discussion

Powered by CodeLearn © 2024. All Rights Reserved. rev 2/5/2024 5:31:56 PM

Trình xử lý sự kiện lồng nhau là trình xử lý sự kiện được thêm vào các phần tử HTML tại các lớp phân cấp khác nhau.

Trong ví dụ HTML sau đây, tài liệu sở hữu phần tử cha cơ bản, trong khi phần tử cha sở hữu phần tử con.

Các ứng dụng web phức tạp có thể có nhiều lớp cha-con với các hàm của trình xử lý sự kiện tương ứng. Khi một sự kiện cụ thể xảy ra sẽ làm kích hoạt trình xử lý sự kiện tại các lớp khác nhau theo trình tự cụ thể. Ví dụ, khi nhấp vào nút con sẽ truyền sự kiện đến tất cả các trình xử lý mà nắm bắt cú nhấp chuột.

Các sự kiện có thể lan truyền theo hai cơ chế—sủi bọt và nắm bắt.

Sủi bọt sự kiện

Sủi bọt là cơ chế mặc định của xử lý sự kiện JavaScript. Cơ chế này lan truyền sự kiện từ lớp trong cùng đến lớp ngoài cùng.

Ví dụ, một người dùng có thể di chuột qua một ô văn bản trong phần con. Sau đó, ứng dụng có thể truyền sự kiện theo thứ tự sau:

1. Trình xử lý sự kiện trong phần tử con sẽ xử lý sự kiện di chuột.
2. Sau đó, trình xử lý sự kiện trong phần tử cha sẽ xử lý sự kiện và chuyển quyền kiểm soát cho trình xử lý sự kiện của tài liệu.

Để thiết lập cơ chế sủi bọt sự kiện, hãy sử dụng cú pháp sau đây:

• element.addEventListener(event, listener, [false]);
• element.addEventListener(event, listener);

Nắm bắt sự kiện

Nắm bắt sự kiện là cơ chế xử lý sự kiện đặc biệt trong JavaScript nơi sự kiện lan truyền vào trong từ lớp ngoài cùng. Khi sự kiện đạt đến phần tử đích ở lớp bên trong, cơ chế xử lý sự kiện sẽ thay đổi thành sủi bọt. Sau đó, cơ chế sủi bọt lan truyền sự kiện ra ngoài đến lớp trên cùng.

Ví dụ, người dùng có thể nhấp vào nút con và bắt đầu trình tự sau:

1. Trình xử lý sự kiện của tài liệu xử lý sự kiện nhấp chuột, tiếp theo là trình xử lý sự kiện của phần tử cha.
2. Sự kiện này đạt đến phần tử đích, đó là nút. Trình xử lý sự kiện của nút sẽ xử lý sự kiện.
3. Quá trình xử lý sự kiện chuyển từ cơ chế nắm bắt sang cơ chế sủi bọt.
4. Sự kiện nhấp chuột tương tự kích hoạt trình xử lý sự kiện tại phần tử cha trước khi kết thúc tại tài liệu.

Cách chọn giữa cơ chế sủi bọt và cơ chế nắm bắt

Cơ chế sủi bọt và nắm bắt cho phép bạn xử lý các sự kiện khác nhau. Cơ chế sủi bọt hiếm khi được sử dụng vì cơ chế nắm bắt đủ để xử lý hầu hết các sự kiện trong các ứng dụng.

Khi bạn quyết định chọn giữa cơ chế sủi bọt và nắm bắt, bạn nên xem xét dòng làn truyền sự kiện và mức độ phù hợp với logic lập trình trong ứng dụng của bạn.

Ví dụ, hãy xem xét một biểu mẫu cha bao gồm hai phần tử con. Phần tử đầu tiên yêu cầu cập nhật ngay lập tức khi một sự kiện xảy ra tại phần tử thứ hai. Trong trường hợp này, bạn nên sử dụng cơ chế nắm bắt. Cơ chế này đảm bảo rằng trình xử lý sự kiện tại phần tử cha xử lý sự kiện và cập nhật phần tử đầu tiên. Sau đó, cơ chế chuyển quyền kiểm soát cho trình xử lý sự kiện tại phần tử con thứ hai.

Sự tương tác của JavaScript với HMTL được xử lý thông qua các sự kiện xảy ra khi người sử dụng hoặc trình duyệt thao tác một trang.

Khi một trang tải, nó được gọi là một sự kiện (Event). Khi người sử dụng click vào một nút, thì click đó cũng là một sự kiện. Các ví dụ về sự kiện khác như nhấn một phím, đóng một cửa sổ, tăng giảm cửa sổ, …

Nhà lập trình có thể sử dụng những sự kiện này để thực thi các phản hồi được mã hóa bởi JavaScript, như các nút để đóng cửa sổ, các thông báo được hiển thị tới người dùng, …

Các sự kiện là một phần của Document Object Model (DOM) Level 3 và mỗi phần tử HTML chứa một tập hợp các sự kiện mà có thể kích hoạt JavaScript Code.

Hy vọng bạn truy cập vào bài hướng dẫn nhỏ của chúng tôi để hiểu sau hơn về Tổng hợp sự kiện (Event) trong HTML. Tại đây, chúng ta sẽ thấy một số ví dụ để hiểu mối quan hệ giữa Sự kiện và JavaScript.

Kiểu sự kiện onclick

Đây là kiểu sự kiện được sử dụng thường xuyên nhất khi một người dùng click chuột trái. Bạn có thể đặt sự xác nhận, cảnh báo, … của bạn đối với kiểu sự kiện này.

Ví dụ

Quảng cáo

Bạn thử ví dụ sau:

  
Click the following button and see result
  

     
  

Kết quả

Kiểu sự kiện onsubmit

onsubmit là một kiểu sự kiện xảy ra khi bạn cố gắng đệ trình một form. Bạn có thể đặt việc xác nhận form đối với kiểu sự kiện này.

Ví dụ

Ví dụ sau chỉ cách sử dụng onsubmit. Tại đây, chúng ta gọi một hàm validate() trước khi đệ trình một dữ liệu form tới Webserver. Nếu hàm validate() trả về true, form sẽ được đệ trình, nếu không thì nó sẽ không đệ trình dữ liệu.

Bạn thử ví dụ sau:

  

     .......
     
  

Kiểu sự kiện onmouseover và onmouseout

Hai kiểu sự kiện này sẽ giúp bạn tạo các hiệu quả đẹp với hình ảnh hoặc ngay cả với văn bản. Sự kiện onmouseover kích hoạt khi bạn di chuyển chuột qua bất kỳ phần tử nào và onmouseout kích hoạt khi bạn di chuyển chuột ra khỏi phần tử đó. Bạn thử ví dụ sau:

  
Bring your mouse inside the division to see the result:
  

     
 This is inside the division 
  

Kết quả

Sự kiện HTML5 chuẩn

Các sự kiện HTML5 chuẩn được liệt kê dưới đây. Tại đây, script chỉ dẫn một hàm JavaScript để được thực thi đối với sự kiện đó.

Thuộc tính Giá trị Miêu tả Offline script Kích hoạt khi tài liệu ở ngoại tuyến Onabort script Kích hoạt trên một sự kiện bỏ dở onafterprint script Kích hoạt sau khi tài liệu được in onbeforeonload script Kích hoạt trước khi tài liệu tải onbeforeprint script Kích hoạt trước khi tài liệu được in onblur script Kích hoạt khi cửa sổ mất trọng tâm oncanplay script Kích hoạt khi media có thể bắt đầu chơi, nhưng phải dừng để đệm oncanplaythrough script Kích hoạt khi media có thể chơi tới cuối, mà không dừng để đệm onchange script Kích hoạt khi một phần tử thay đổi onclick script Kích hoạt trên một cú click chuột oncontextmenu script Kích hoạt khi menu ngữ cảnh bị kích hoạt ondblclick script Kích hoạt khi nhấp đúp chuột ondrag script Kích hoạt khi một phần tử bị kéo ondragend script Kích hoạt tại phần cuối của hoạt động kéo ondragenter script Kích hoạt khi một phần tử đã được kéo tới một mục tiêu thả hợp lệ ondragleave script Kích hoạt khi một phần tử đang được kéo qua một mục tiêu thả hợp lệ ondragover script Kích hoạt tại phần đầu của hoạt động kéo ondragstart script Kích hoạt tại phần đầu của hoạt động kéo ondrop script Kích hoạt khi phần tử được kéo đang được thả ondurationchange script Kích hoạt khi độ dài của media được thay đổi onemptied script Kích hoạt khi phần tử nguồn media đột nhiên trở nên trống onended script Kích hoạt khi media tiến tới cuối cùng onerror script Kích hoạt khi một lỗi xảy ra onfocus script Kích hoạt khi cửa sổ nhận trọng tâm onformchange script Kích hoạt khi một form thay đổi onforminput script Kích hoạt khi một form nhận input từ người dùng onhaschange script Kích hoạt khi tài liệu có thay đổi oninput script Kích hoạt khi một phần tử nhận đầu vào từ người dùng oninvalid script Kích hoạt khi một phần tử không hợp lệ onkeydown script Kích hoạt khi một phím bị nhấn onkeypress script Kích hoạt khi một phím bị nhấn và được thả ra onkeyup script Kích hoạt khi một phím được thả ra onload script Kích hoạt khi tài liệu tải onloadeddata script Kích hoạt khi dữ liệu media được tải onloadedmetadata script Kích hoạt khi thời gian và dữ liệu khác của một phần tử media được tải onloadstart script Kích hoạt khi trình duyệt bắt đầu tải dữ liệu media onmessage script Kích hoạt khi thông báo được kích hoạt onmousedown script Kích hoạt khi một nút chuột được nhả ra onmousemove script Kích hoạt khi con trỏ chuột di chuyển onmouseout script Kích hoạt khi con trỏ chuột di chuyển ra khỏi một phần tử onmouseover script Kích hoạt khi con trỏ chuột di chuyển qua một phần tử onmouseup script Kích hoạt khi một nút chuột được nhả ra onmousewheel script Kích hoạt khi bánh xe chuột được quay onoffline script Kích hoạt khi tài liệu ở ngoại tuyến onoine script Kích hoạt khi tài liệu ở trực tuyến ononline script Kích hoạt khi tài liệu ở trực tuyến onpagehide script Kích hoạt khi cửa sổ bị ẩn onpageshow script Kích hoạt khi cửa sổ trở nên nhìn thấy onpause script Kích hoạt khi dữ liệu media bị dừng onplay script Kích hoạt khi dữ liệu media chuẩn bị bắt đầu chơi onplaying script Kích hoạt khi dữ liệu media đang bắt đầu chơi onpopstate script Kích hoạt khi lịch sử cửa sổ thay đổi onprogress script Kích hoạt khi trình duyệt đang nhận dữ liệu media onratechange script Kích hoạt khi tốc độ chơi của media đã thay đổi onreadystatechange script Kích hoạt khi trạng thái sẵn sàng thay đổi onredo script Kích hoạt khi tài liệu thực hiện một redo onresize script Kích hoạt khi cửa sổ bị thay đổi kích cỡ onscroll script Kích hoạt khi thanh cuốn của phần tử đang được cuốn onseeked script Kích hoạt khi thuộc tính seeking của một phần tử media không còn true, và seeking đã kết thúc onseeking script Kích hoạt khi thuộc tính seeking của một phần tử media là true, và seeking đã bắt đầu onselect script Kích hoạt khi một phần tử được chọn onstalled script Kích hoạt khi có một lỗi trong quá trình thu nhận dữ liệu media onstorage script Kích hoạt khi một tài liệu tải onsubmit script Kích hoạt khi một form được đệ trình onsuspend script Kích hoạt khi trình duyệt đã đang thu nhận dữ liệu media, nhưng đã dừng lại trước khi toàn bộ media file được thu nhận ontimeupdate script Kích hoạt khi media thay đổi vị trí chơi của nó onundo script Kích hoạt khi một tài liệu thực hiện một undo onunload script Kích hoạt khi người sử dụng rời khỏi tài liệu onvolumechange script Kích hoạt khi media thay đổi âm lượng, kể cả khi media được thiết lập là mute onwaiting script Kích hoạt khi media đã dừng chơi nhưng được mong chờ phục hồi.

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Các bạn có thể mua thêm khóa học JAVA CORE ONLINE VÀ ỨNG DỤNG cực hay, giúp các bạn vượt qua các dự án trên trường và đi thực tập Java. Khóa học có giá chỉ 300K, nhằm ưu đãi, tạo điều kiện cho sinh viên cho thể mua khóa học.

Nội dung khóa học gồm 16 chuơng và 100 video cực hay, học trực tiếp tại https://www.udemy.com/tu-tin-di-lam-voi-kien-thuc-ve-java-core-toan-tap/ Bạn nào có nhu cầu mua, inbox trực tiếp a Tuyền, cựu sinh viên Bách Khoa K53, fb: https://www.facebook.com/tuyen.vietjack

Follow facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.