sự kiện nhấp chuột js. Trình tự thực thi script. Sự kiện onclick trong JavaScript và ba cách xử lý sự kiện

Sau khi xác định được một số thuật ngữ, chúng ta có thể chuyển sang khám phá các vấn đề liên quan đến sự kiện và quá trình xử lý chúng.

Có hai cách chính để đăng ký trình xử lý sự kiện. Cách đầu tiên, xuất hiện sớm trong quá trình phát triển World Wide Web, là đặt thuộc tính của đối tượng hoặc thành phần tài liệu là mục tiêu của sự kiện. Phương thức thứ hai, mới hơn và phổ biến hơn, là truyền một hàm xử lý cho một phương thức của một đối tượng hoặc một phần tử.

Vấn đề trở nên phức tạp bởi thực tế là mỗi kỹ thuật đều có hai phiên bản. Bạn có thể đặt thuộc tính xử lý sự kiện trong mã JavaScript hoặc trong thành phần tài liệu bằng cách xác định trực tiếp thuộc tính tương ứng trong đánh dấu HTML. Việc đăng ký trình xử lý bằng lệnh gọi phương thức có thể được thực hiện bằng phương thức tiêu chuẩn có tên addEventListener(), được hỗ trợ bởi tất cả các trình duyệt ngoại trừ IE phiên bản 8 trở xuống và một phương thức khác gọi là AttachEvent(), được hỗ trợ bởi tất cả các phiên bản IE cho đến IE9.

Cách đơn giản nhất để đăng ký trình xử lý sự kiện là đặt thuộc tính của mục tiêu sự kiện thành hàm xử lý mong muốn. Theo quy ước, các thuộc tính của trình xử lý sự kiện có tên bao gồm từ "bật", theo sau là tên sự kiện: onclick, onchange, onload, onmouseover, v.v. Lưu ý rằng các tên thuộc tính này phân biệt chữ hoa chữ thường và chỉ sử dụng các ký tự chữ thường, ngay cả khi tên loại sự kiện có nhiều từ (ví dụ: "readystatechange"). Dưới đây là hai ví dụ về việc đăng ký xử lý sự kiện:

// Gán hàm cho thuộc tính onload của đối tượng Window. // Hàm này là một trình xử lý sự kiện: nó được gọi khi tài liệu được tải window.onload = function() ( // Tìm phần tử var elt = document.getElementById("shipping_address"); // Đăng ký một trình xử lý sự kiện sẽ được gọi // trực tiếp trước khi gửi biểu mẫu elt.onsubmit = function() ( return validation(this); ) )

Phương pháp đăng ký trình xử lý sự kiện này được hỗ trợ trong tất cả các trình duyệt cho tất cả các loại sự kiện thường được sử dụng. Nói chung, tất cả các giao diện ứng dụng được hỗ trợ rộng rãi xác định sự kiện của chúng đều cho phép đăng ký trình xử lý bằng cách đặt thuộc tính của trình xử lý sự kiện.

Nhược điểm của việc sử dụng các thuộc tính xử lý sự kiện là chúng được thiết kế với giả định rằng các mục tiêu sự kiện sẽ có nhiều nhất một trình xử lý cho mỗi loại sự kiện. Khi tạo một thư viện để sử dụng trong các tài liệu tùy ý, tốt hơn nên sử dụng một kỹ thuật (chẳng hạn như gọi phương thức addEventListener()) để đăng ký các trình xử lý không thay đổi hoặc ghi đè các trình xử lý đã đăng ký trước đó.

Các thuộc tính của trình xử lý sự kiện trên các thành phần tài liệu cũng có thể được thiết lập bằng cách xác định các giá trị thuộc tính trong các thẻ HTML tương ứng. Trong trường hợp này, giá trị thuộc tính phải là một chuỗi mã JavaScript. Mã chương trình này không phải là một khai báo đầy đủ về hàm xử lý sự kiện mà chỉ là phần thân của nó. Nghĩa là, việc triển khai trình xử lý sự kiện trong đánh dấu HTML không được đặt trong dấu ngoặc nhọn và trước từ khóa hàm. Ví dụ:

Nếu giá trị của thuộc tính HTML xử lý sự kiện bao gồm nhiều câu lệnh JavaScript thì chúng phải được phân tách bằng dấu chấm phẩy hoặc giá trị thuộc tính phải xuất hiện trên nhiều dòng.

Một số loại sự kiện dành cho toàn bộ trình duyệt, thay vì dành cho bất kỳ thành phần tài liệu cụ thể nào. Trình xử lý các sự kiện như vậy trong JavaScript được đăng ký trong đối tượng Window. Trong đánh dấu HTML, chúng phải được đặt trong một thẻ, nhưng trình duyệt sẽ đăng ký chúng trong đối tượng Window. Sau đây là danh sách đầy đủ các trình xử lý sự kiện như vậy được xác định theo đặc tả HTML5 dự thảo:

onafterprint ontập trung trực tuyến vàothay đổi kích thước trước khi in onhashchange trên trang ẩn lưu trữ trên trước khi dỡ tải trên trang hiển thị hoàn tác làm mờ tin nhắn trênpopstate onunload onlỗi onoffline onredo

Khi phát triển các tập lệnh phía máy khách, thông lệ là tách phần đánh dấu HTML khỏi mã JavaScript. Các lập trình viên tuân theo quy tắc này sẽ tránh (hoặc ít nhất là cố gắng tránh) sử dụng các thuộc tính xử lý sự kiện HTML để tránh trộn lẫn mã JavaScript với đánh dấu HTML.

Trong mô hình sự kiện tiêu chuẩn, được hỗ trợ bởi tất cả các trình duyệt ngoại trừ IE phiên bản 8 trở xuống, mục tiêu của một sự kiện có thể là bất kỳ đối tượng nào - bao gồm các đối tượng Window và Document và tất cả các đối tượng Elements của các thành phần tài liệu - xác định một phương thức có tên addEventListener() với sự kiện nào trình xử lý có thể được đăng ký cho mục đích này.

Phương thức addEventListener() nhận ba đối số. Đầu tiên là loại sự kiện mà trình xử lý được đăng ký. Loại sự kiện (hoặc tên) phải là một chuỗi và không được bao gồm tiền tố "bật" được sử dụng khi đặt thuộc tính của trình xử lý sự kiện. Đối số thứ hai của phương thức addEventListener() là một hàm sẽ được gọi khi xảy ra một sự kiện thuộc loại đã chỉ định. Đối số cuối cùng được truyền cho phương thức addEventListener() với giá trị boolean. Thông thường lập luận này là sai. Nếu bạn chuyển giá trị này thành đúng thì hàm sẽ được đăng ký làm trình xử lý chặn và sẽ được gọi trong một giai đoạn khác của quá trình lan truyền sự kiện.

Đặc tả cuối cùng có thể thay đổi để có thể chấp nhận việc bỏ qua đối số thứ ba thay vì chuyển nó thành sai một cách rõ ràng, nhưng theo văn bản này, việc bỏ qua đối số thứ ba sẽ dẫn đến lỗi trong một số trình duyệt hiện tại.

Đoạn mã sau đăng ký hai trình xử lý sự kiện "nhấp chuột" trên phần tử. Lưu ý sự khác biệt giữa hai kỹ thuật được sử dụng:

Nhấp vào đây! var b = document.getElementById("mybutton"); b.onclick = function() ( cảnh báo ("Cảm ơn bạn đã nhấp vào tôi!"); ); b.addEventListener("click", function() (alert("Xin cảm ơn lần nữa!")), false);

Việc gọi phương thức addEventListener() với chuỗi "click" làm đối số đầu tiên không ảnh hưởng đến giá trị của thuộc tính onclick. Trong đoạn mã trên, việc nhấp vào nút sẽ xuất hiện hai hộp thoại cảnh báo(). Nhưng quan trọng hơn, phương thức addEventListener() có thể được gọi nhiều lần và có thể được sử dụng để đăng ký nhiều hàm xử lý cho cùng một loại sự kiện trong cùng một đối tượng. Khi một sự kiện xảy ra trên một đối tượng, tất cả các trình xử lý đã đăng ký cho loại sự kiện đó sẽ được gọi theo thứ tự chúng đã được đăng ký.

Việc gọi phương thức addEventListener() nhiều lần trên cùng một đối tượng với cùng đối số sẽ không có tác dụng - hàm xử lý chỉ được đăng ký một lần và các lệnh gọi lặp lại không ảnh hưởng đến thứ tự mà các trình xử lý được gọi.

Kết hợp với phương thức addEventListener() là phương thức RemoveEventListener(), phương thức này nhận ba đối số giống nhau, nhưng thay vì thêm, nó loại bỏ một hàm xử lý khỏi đối tượng. Điều này thường hữu ích khi bạn cần đăng ký một trình xử lý sự kiện tạm thời và sau đó xóa nó vào một lúc nào đó.

Các phiên bản Internet Explorer cũ hơn IE9 không hỗ trợ các phương thức addEventListener() và RemoveEventListener(). IE5 trở lên xác định các phương thức tương tự, AttachEvent() và detectEvent() . Bởi vì mô hình sự kiện IE không hỗ trợ giai đoạn chặn nên các phương thức AttachEvent() và táchEvent() chỉ lấy hai đối số: loại sự kiện và hàm xử lý, với đối số đầu tiên chuyển tên thuộc tính trình xử lý có tiền tố “bật” vào các phương thức trong IE thay vì các loại sự kiện không có tiền tố này.

Khi bạn đăng ký một trình xử lý sự kiện, trình duyệt web sẽ tự động gọi nó khi một sự kiện thuộc loại đã chỉ định xảy ra trên đối tượng đã chỉ định. Phần này nêu chi tiết thứ tự mà các trình xử lý sự kiện được gọi, các đối số của các trình xử lý, bối cảnh của lệnh gọi (giá trị của this) và mục đích của giá trị trả về của trình xử lý. Thật không may, một số chi tiết này khác nhau giữa phiên bản IE 8 trở xuống và các trình duyệt khác.

Khi một trình xử lý sự kiện được gọi, nó thường (với một ngoại lệ, được thảo luận bên dưới) chuyển đối tượng sự kiện dưới dạng một đối số duy nhất. Các thuộc tính của đối tượng sự kiện chứa thông tin bổ sung về sự kiện. Ví dụ: thuộc tính loại xác định loại sự kiện đã xảy ra.

Trong IE phiên bản 8 trở xuống, trình xử lý sự kiện được đăng ký bằng cách đặt thuộc tính sẽ không được chuyển đối tượng sự kiện khi được gọi. Thay vào đó, đối tượng sự kiện được lưu trữ trong biến toàn cục window.event. Để có tính di động, các trình xử lý sự kiện có thể được tạo kiểu như sau để chúng sử dụng biến window.event khi được gọi mà không có đối số:

Đối tượng sự kiện được chuyển tới các trình xử lý sự kiện đã đăng ký bằng phương thức AttachEvent(), nhưng chúng cũng có thể sử dụng biến window.event.

Khi bạn đăng ký trình xử lý sự kiện bằng thuộc tính HTML, trình duyệt sẽ chuyển đổi một chuỗi mã JavaScript thành một hàm. Các trình duyệt khác ngoài IE tạo một hàm với một đối số duy nhất, sự kiện. IE tạo ra một hàm không có đối số. Nếu bạn sử dụng mã định danh sự kiện trong các hàm như vậy, nó sẽ tham chiếu đến window.event. Trong cả hai trường hợp, trình xử lý sự kiện được xác định trong đánh dấu HTML có thể tham chiếu đối tượng sự kiện bằng mã định danh sự kiện.

Khi một trình xử lý sự kiện được đăng ký bằng cách đặt một thuộc tính, nó trông giống như xác định một phương thức thành phần tài liệu mới:

E.onclick = function() ( /* triển khai trình xử lý */ );

Do đó, không có gì đáng ngạc nhiên khi các trình xử lý sự kiện được gọi (với một ngoại lệ liên quan đến IE, được mô tả bên dưới) như các phương thức của các đối tượng mà chúng được xác định trong đó. Nghĩa là, trong phần thân của trình xử lý sự kiện, từ khóa this đề cập đến mục tiêu của sự kiện.

Trong các trình xử lý, từ khóa this đề cập đến đối tượng đích, ngay cả khi chúng được đăng ký bằng phương thức addEventListener(). Tuy nhiên, thật không may, đây không phải là trường hợp của phương thức AttachEvent(): các trình xử lý được đăng ký với phương thức AttachEvent() được gọi là các hàm và trong đó từ khóa this đề cập đến đối tượng (Window) toàn cục. Vấn đề này có thể được giải quyết theo cách sau:

/* Đăng ký hàm đã chỉ định làm trình xử lý sự kiện của loại đã chỉ định trong đối tượng đã chỉ định. Đảm bảo rằng trình xử lý sẽ luôn được gọi như một phương thức trên đối tượng đích. */ function addEvent(target, type, handler) ( if (target.addEventListener) target.addEventListener(type, handler, false); else target.attachEvent("on" + type, function(event) ( // Gọi trình xử lý làm phương thức đích, // và truyền cho nó đối tượng sự kiện return handler.call(target, event ));

Lưu ý rằng các trình xử lý sự kiện được đăng ký theo cách này không thể bị xóa vì tham chiếu đến hàm bao bọc được truyền cho phương thức AttachEvent() không được lưu trữ ở bất kỳ đâu để nó có thể được chuyển sang phương thức tách raEvent().

Giá trị được trả về bởi trình xử lý sự kiện đã đăng ký bằng cách đặt thuộc tính đối tượng hoặc thuộc tính HTML phải được tính đến. Thông thường, việc trả về false sẽ cho trình duyệt biết rằng nó không nên thực hiện các hành động mặc định cho sự kiện này.

Ví dụ: trình xử lý onclick của nút gửi biểu mẫu có thể trả về sai để ngăn trình duyệt gửi biểu mẫu. (Điều này có thể hữu ích nếu dữ liệu nhập của người dùng không xác thực được phía máy khách.) Tương tự, trình xử lý sự kiện onkeypress của trường nhập có thể lọc dữ liệu nhập từ bàn phím bằng cách trả về sai khi nhập các ký tự không hợp lệ.

Điều quan trọng nữa là giá trị được trả về bởi trình xử lý onb Beforeunload của đối tượng Window. Sự kiện này được tạo khi trình duyệt điều hướng đến một trang khác. Nếu trình xử lý này trả về một chuỗi, nó sẽ được hiển thị trong hộp thoại phương thức nhắc người dùng xác nhận rằng họ muốn rời khỏi trang.

Điều quan trọng là phải hiểu rằng giá trị trả về của trình xử lý sự kiện chỉ được tính nếu trình xử lý được đăng ký bằng cách đặt thuộc tính. Thay vào đó, các trình xử lý đã đăng ký với addEventListener() hoặc AttachEvent() phải gọi phương thức PreventDefault() hoặc đặt thuộc tính returnValue của đối tượng sự kiện.

Giá trị được trả về bởi trình xử lý sự kiện đã đăng ký làm thuộc tính có thể được sử dụng để ghi đè các hành động mặc định của trình duyệt trong trường hợp xảy ra sự kiện đó. Trong các trình duyệt hỗ trợ phương thức addEventListener(), các hành động mặc định cũng có thể bị ghi đè bằng cách gọi phương thức PreventDefault() của đối tượng sự kiện. Tuy nhiên, trong IE phiên bản 8 trở xuống, hiệu ứng tương tự đạt được bằng cách đặt thuộc tính returnValue của đối tượng sự kiện thành false.

Đoạn mã sau minh họa trình xử lý sự kiện nhấp chuột siêu liên kết sử dụng cả ba phương pháp hủy sự kiện (chặn người dùng theo liên kết):

Window.onload = function() ( // Tìm tất cả các liên kết var a_href = document.getElementsByTagName("a"); // Thêm trình xử lý sự kiện click (không dành cho IE

Dự án mô-đun DOM Events 3 hiện tại xác định một thuộc tính trên đối tượng Sự kiện có tên là defaultPrevented. Nó chưa được tất cả các trình duyệt hỗ trợ, nhưng bản chất của nó là trong điều kiện bình thường, nó sai và chỉ trở thành đúng nếu phương thức PreventDefault() được gọi.

Việc hủy các hành động mặc định liên quan đến một sự kiện chỉ là một kiểu hủy sự kiện. Cũng có thể ngăn chặn sự kiện lan rộng. Trong các trình duyệt hỗ trợ phương thức addEventListener(), đối tượng sự kiện có phương thức stopPropagation(), phương thức này khi được gọi sẽ dừng việc truyền bá thêm sự kiện. Nếu các trình xử lý khác cho sự kiện này được đăng ký trên cùng một đối tượng đích thì các trình xử lý còn lại sẽ vẫn được gọi, nhưng không có trình xử lý sự kiện nào khác trên các đối tượng khác sẽ được gọi sau khi phương thức stopPropagation() được gọi.

Trong IE phiên bản 8 trở xuống, phương thức stopPropagation() không được hỗ trợ. Thay vào đó, đối tượng sự kiện trong IE có thuộc tính hủy bỏBong bóng. Việc đặt thuộc tính này thành true sẽ ngăn sự kiện lan truyền.

Bản nháp hiện tại của đặc tả Sự kiện DOM 3 xác định một phương thức khác trên đối tượng Sự kiện, một phương thức có tên là stopImmediatePropagation(). Giống như phương thức stopPropagation(), nó ngăn sự kiện lan truyền sang bất kỳ đối tượng nào khác. Nhưng ngoài ra, nó cũng ngăn không cho bất kỳ trình xử lý sự kiện nào khác được đăng ký trên cùng một đối tượng được gọi.

Một trong những tính năng quan trọng nhất của ngôn ngữ JavaScript, có lẽ là tính năng chính của ngôn ngữ này, là khả năng xử lý một số sự kiện. Tính năng này là một tính năng của JavaScript so với các ngôn ngữ lập trình web khác, vì chỉ có ngôn ngữ này mới làm được điều này.

Sự kiện là một hành động có thể được thực hiện bởi người dùng hoặc các đối tượng khác trên trang.

Ví dụ nổi bật nhất của một sự kiện là người dùng nhấp vào một đối tượng nào đó ( nhấp chuột), có thể là nút, liên kết hoặc bất kỳ phần tử nào khác. Một ví dụ khác về sự kiện là di chuột qua một đối tượng nào đó ( Di chuột lên trên), nói ở trên hình ảnh. Ngoài ra sự kiện này là việc tải trang hoàn chỉnh ( trọng tải). Nói chung, tất cả các hành động xảy ra trên trang web đều là sự kiện.

Vì vậy, chúng tôi có thể nắm bắt bất kỳ sự kiện nào xảy ra trên trang và xử lý nó bằng trình xử lý thích hợp. Ví dụ: khi bạn di chuột qua khối div, chúng tôi có thể hiển thị một thông báo nhất định, ví dụ: “Bạn đang ở vùng văn bản”. Hoặc khi bạn nhấp vào nút, hãy ẩn một khối khỏi trang. Nói chung, có rất nhiều việc có thể được thực hiện trước khi xử lý một sự kiện.

Và để xử lý một sự kiện, bạn cần sử dụng một trình xử lý đặc biệt cho sự kiện này. Mỗi sự kiện có trình xử lý riêng, ví dụ: sự kiện click( nhấp chuột) có một trình xử lý trong một cái nhấp chuột. Sự kiện di chuột qua một đối tượng ( Di chuột lên trên) có một trình xử lý di chuột qua. Và sự kiện tải đầy trang ( trọng tải) có một trình xử lý đang tải.

Tức là, như bạn hiểu, tên của trình xử lý được hình thành từ tiền tố “on” + tên của sự kiện.

Bạn có thể tìm thấy danh sách đầy đủ các sự kiện và trình xử lý trong sách tham khảo; trong bài viết này chúng tôi sẽ chỉ xem xét những sự kiện được sử dụng thường xuyên nhất.

Trình xử lý sự kiện được gọi như một thuộc tính trong chính thẻ phần tử HTML. Bạn có thể viết ngay mã JavaScript vào giá trị xử lý, nhưng tốt hơn là nên gọi một số hàm sẽ thực hiện các hành động cần thiết. Hàm phải được mô tả bên trong thẻ script, thẻ này có thể nằm bên trong khối head hoặc ở cuối thẻ body. Từ this, tức là đối tượng hiện tại, được truyền dưới dạng tham số cho hàm này.

Bây giờ hãy viết một ví dụ đơn giản. Khi bạn di chuột qua khối có văn bản, chúng tôi sẽ hiển thị thông báo bằng phương thức cảnh báo cho biết người dùng đang ở trong vùng văn bản.

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ. Lorem Ipsum đã trở thành văn bản giả tiêu chuẩn của ngành kể từ những năm 1500, khi một nhà in vô danh lấy một tập bản in và xáo trộn nó để tạo thành một cuốn sách mẫu.

Div( đệm-trái: 50px; chiều rộng: 200px; đường viền: 1px rắn #000; )

Mã JavaScript:

Chức năng blockOver(block)( cảnh báo("Bạn đang ở trong vùng văn bản "); )

Chúng tôi lưu tài liệu, mở nó trong trình duyệt, di con trỏ chuột lên văn bản và xem kết quả xử lý sự kiện này:

Sử dụng tham số hàm (this), bạn có thể lấy giá trị của một số thuộc tính của đối tượng hiện tại, ví dụ: tìm ra id của nó.

Ví dụ: hãy tạo một nút và đặt cho nó một id có giá trị "justButton". Khi nhấp vào nút này, chúng tôi sẽ hiển thị thông báo sau: “Bạn đã nhấp vào nút có giá trị nhận dạng_id.” Ở đây bạn cần phải sử dụng trình xử lý onclick.

Mã JavaScript:

Chức năng clickOnButton(button)( cảnh báo("Bạn đã nhấp vào nút có mã định danh: " + Button.id); )

Lưu tài liệu, mở nó trong trình duyệt và nhấp vào nút.

Theo cách tương tự, bạn có thể hiển thị tên của nút ( nút.name) hoặc giá trị của nó ( nút.value)

Bạn cũng có thể tìm hiểu các giá trị thuộc tính CSS của một phần tử, ví dụ: chiều rộng và chiều cao. Các thuộc tính clientWidth và offsetWidth được sử dụng để lấy chiều rộng và các thuộc tính clientHeight và offsetHeight được sử dụng để lấy chiều cao. Ví dụ: hãy hiển thị chiều rộng và chiều cao của nút được nhấp vào.

Bây giờ nội dung của hàm clickOnButton sẽ như thế này:

Chức năng clickOnButton(button)( //alert("Bạn đã nhấp vào nút có ID: " + Button.id); var width = nút.clientWidth || nút.offsetWidth; var Height = nút.clientHeight || nút.offsetHeight; cảnh báo ("Chiều rộng nút: " + chiều rộng + "\nChiều cao nút: " + chiều cao);

Kết quả của ví dụ này:

Hãy để tôi nhắc bạn rằng chiều rộng của phần tử được tính cùng với giá trị phần đệm, do đó, nó bằng 111px [ 99px(width) + 6px(padding-left) + 6px(padding-right) ].

Nếu không cần viết nhiều mã để xử lý một sự kiện, bạn có thể viết mã này trực tiếp vào giá trị xử lý. Nghĩa là, thay vì gọi một hàm, chúng ta viết ngay đoạn mã cần thiết.

Ví dụ: khi tải một trang, bạn có thể hiển thị thông báo "trang đang tải". Để làm điều này, bạn cần sử dụng sự kiện tải và trình xử lý onload của nó. Chúng tôi sẽ viết trình xử lý này trong thẻ body mở.

Phương pháp này chỉ có thể được sử dụng nếu chỉ cần một dòng mã ngắn để xử lý sự kiện. Mặt khác, nếu mã xử lý bao gồm một dòng dài hoặc nhiều dòng thì bạn cần sử dụng hàm.

Và ở cuối bài viết này, chúng ta sẽ xem xét một ví dụ đơn giản về xử lý biểu mẫu. Việc xử lý biểu mẫu bằng JavaScript, trước hết, giúp giảm tải cho máy chủ và thứ hai, mang lại lợi thế bổ sung cho khả năng sử dụng của trang web.

Biểu mẫu bao gồm một trường đăng nhập và nút gửi. Khi gửi biểu mẫu, chúng tôi sẽ kiểm tra thời lượng đăng nhập. Độ dài của nó phải nhiều hơn ba ký tự.

Hãy bắt đầu với cấu trúc HTML của biểu mẫu này.

Bây giờ, hãy thêm trình xử lý onsubmit cho sự kiện gửi dưới dạng thuộc tính cho thẻ biểu mẫu. Theo cách sau:

Sự kiện gửi xảy ra khi biểu mẫu được gửi. Chúng tôi đã viết câu lệnh trả về để ngăn việc gửi biểu mẫu nếu phát hiện thấy lỗi trong quá trình nhập dữ liệu. Nếu hàm trả về false thì giá trị của trình xử lý onsubmit sẽ là “return false”, nghĩa là biểu mẫu sẽ không được gửi đến máy chủ. Ngược lại, nếu biểu mẫu trả về true thì giá trị của trình xử lý sẽ là “return true” và biểu mẫu sẽ được gửi mà không gặp vấn đề gì.

Đôi khi cần phải tắt hoàn toàn việc gửi biểu mẫu, trong trường hợp đó, giá trị của trình xử lý onsubmit sẽ như sau:

Onsubmit = "checkForm(this); trả về sai;"

Như bạn có thể đã đoán, checkForm là tên của hàm sẽ được gọi khi sự kiện gửi xảy ra. Bạn có thể gọi nó là bất cứ điều gì bạn muốn, tuân theo các quy ước đặt tên hàm.

Và vì vậy, hãy quay lại ví dụ của chúng tôi. Bây giờ chúng ta cần mô tả hàm checkForm. Nó sẽ chứa điều kiện sau: nếu độ dài đăng nhập nhỏ hơn ba ký tự thì chúng tôi trả về sai và biểu mẫu sẽ không được gửi, nếu không, nếu dữ liệu được nhập chính xác thì chúng tôi sẽ gửi biểu mẫu đến máy chủ.

Hàm checkForm(form)( //Lấy giá trị của trường biểu mẫu có tên đăng nhập var login = form.login.value; //Kiểm tra xem độ dài đăng nhập có nhỏ hơn ba ký tự hay không, sau đó hiển thị thông báo lỗi và hủy gửi form. if(login .length > 3)( cảnh báo("Độ dài đăng nhập phải nhiều hơn ba ký tự"); return false; )else( return true; ) )

Chúng tôi lưu tài liệu, mở nó trong trình duyệt và kiểm tra nó.

Bằng cách này, bạn có thể kiểm tra biểu mẫu bằng JavaScript và hủy việc gửi biểu mẫu trong trường hợp có lỗi.

Thôi, chỉ vậy thôi quý độc giả thân mến. Hãy tóm tắt.
Các sự kiện được sử dụng rất thường xuyên, vì vậy bạn phải có khả năng làm việc với chúng 100%.

Trong bài viết này bạn đã tìm hiểu sự kiện và trình xử lý sự kiện là gì. Bạn đã học cách lấy các giá trị thuộc tính phần tử cũng như cách tìm chiều rộng và chiều cao của một phần tử. Bạn cũng đã học cách thực hiện xác thực biểu mẫu.

onClick là sự kiện số 1 trên màn hình của người dùng.
onСlick là một cú nhấp chuột (hoặc nhấp chuột) của người dùng vào một đối tượng.
Sau khi mỗi người dùng nhấp chuột như vậy, một hành động phản hồi sẽ xuất hiện trên màn hình. Điều này đạt được tính tương tác của giao diện và xác nhận nguyên tắc giao tiếp chính giữa máy tính và con người - nhấp chuột, trả lời, nhấp chuột, trả lời.
Theo thuật ngữ của người dùng, sự kiện onСclick có thể được gọi là bất kỳ tên nào bạn thích. Ngay khi người dùng thông thường không gọi điều này là onСclick kém - nhấp, kéo, nhấp, nhấp, đập, v.v. ... Nhưng bản chất của điều này không thay đổi trong nhiều năm - nếu người dùng đang hoạt động trên màn hình và nhấp vào một đối tượng, thì máy tính phải phản hồi đầy đủ cho anh ta (người dùng). Đây là trên Click.

Sự kiện onClick có tầm quan trọng tối cao trong bất kỳ ngôn ngữ nào. Và HTML cũng không ngoại lệ. Nó được biết đến. Thật vậy, nếu sau khi nhấp (onClick) vào một phần tử thì không có gì xảy ra trong trình duyệt, thì tại sao lại phải bận tâm đến việc lập trình bất cứ thứ gì trên trang web? Vì vậy, onСlick là vị khách được chào đón trên bất kỳ màn hình Internet nào (hoặc màn hình nhỏ).
Bây giờ, gần hơn với chủ đề. Cụ thể hơn, trang onClick trên trang web trong trình duyệt của chúng tôi là một sự kiện từ tập lệnh Java, trong đó HTML chỉ đóng vai trò làm khung để đặt mã cho các cấu trúc của nó. Và, từ quan điểm về tính hợp lệ của mã của chính HTML này, sẽ đúng khi viết onclick chứ không phải onСlick (như nhiều lập trình viên ứng dụng đã quen). Bởi vì trong HTML tất cả các thẻ và cấu trúc chỉ được viết bằng chữ thường.

Không có chữ hoa trong HTML. Không, đó là tất cả! Và đối với những “kẻ ác” viết bằng chữ hoa HTML, ngày xưa người ta có phong tục chặt tay đến tận đầu gối. Hơn thế nữa. Họ nói rằng dưới thời Cha Sa hoàng Ivan Bạo chúa, vì viết bằng HTML, một thứ như thế này có thể dễ dàng đưa bạn đến giá treo cổ, nếu không bị đóng cọc. Điều này hoàn toàn chính xác. Đương nhiên lúc này triều thần và người cai trị đã trở nên bình tĩnh hơn. Tuy nhiên, khi viết bất kỳ mã nào, bạn cần phải quan sát ít nhất vẻ bề ngoài lịch sự. Từ nơi này câu chuyện về onclick chính xác bắt đầu.

Vì vậy, nó đã được quyết định và chứng minh (đối với HTML).
Trước hết, chúng tôi viết onclick chứ không phải onСclick!!!