Cách tách HTML, CSS và JavaScript

Sau đó, chúng tôi có thể mã hóa JavaScript trong một tệp JavaScript riêng biệt được liên kết vào cuối phần nội dung của trang hoặc nằm trong phần đầu của trang và nơi mã của chúng tôi nằm trong một chức năng được gọi sau khi trang tải xong. JavaScript của chúng tôi để đính kèm các trình xử lý sự kiện bây giờ trông như thế này

document.getElementById('img1').onclick = dosomething; document.getElementById('sp1').onclick = dosomething;

Một điều cần lưu ý. Bạn sẽ nhận thấy rằng chúng tôi luôn viết onclick hoàn toàn bằng chữ thường. Khi mã hóa câu lệnh trong HTML của họ, bạn sẽ thấy một số người viết nó dưới dạng onClick. Điều này là sai vì tên của trình xử lý sự kiện JavaScript đều là chữ thường và không có trình xử lý nào như onClick. Bạn có thể thoát khỏi nó khi bạn đưa trực tiếp JavaScript vào trong thẻ HTML của mình vì HTML không phân biệt chữ hoa chữ thường và trình duyệt sẽ ánh xạ nó tới tên chính xác cho bạn. Bạn không thể tránh khỏi việc viết sai viết hoa trong chính JavaScript của mình vì JavaScript phân biệt chữ hoa chữ thường và không có thứ gọi là onClick trong JavaScript

Mã này là một cải tiến lớn so với các phiên bản trước bởi vì chúng tôi hiện đang đính kèm sự kiện vào đúng thành phần trong HTML của chúng tôi và chúng tôi có JavaScript hoàn toàn tách biệt với HTML. Chúng tôi có thể cải thiện điều này hơn nữa mặc dù

Một vấn đề còn tồn tại là chúng ta chỉ có thể đính kèm một trình xử lý sự kiện onclick cho một phần tử cụ thể. Nếu bất cứ lúc nào chúng ta cần đính kèm một trình xử lý sự kiện onclick khác vào cùng một phần tử thì quá trình xử lý được đính kèm trước đó sẽ không còn được đính kèm vào phần tử đó nữa. Khi bạn thêm nhiều tập lệnh khác nhau vào trang web của mình cho các mục đích khác nhau, ít nhất có khả năng hai hoặc nhiều tập lệnh trong số đó muốn cung cấp một số xử lý sẽ được thực hiện khi nhấp vào cùng một phần tử. Giải pháp lộn xộn cho vấn đề này là xác định nơi phát sinh tình huống này và kết hợp quá trình xử lý cần được gọi lại với nhau thành một hàm thực hiện tất cả quá trình xử lý

Mặc dù các xung đột như thế này ít phổ biến hơn với onclick so với onload, nhưng việc phải xác định các xung đột trước và kết hợp chúng lại với nhau không phải là giải pháp lý tưởng. Nó hoàn toàn không phải là một giải pháp khi quá trình xử lý thực tế cần được gắn vào phần tử thay đổi theo thời gian để đôi khi có một việc phải làm, đôi khi là một việc khác và đôi khi cả hai

Giải pháp tốt nhất là ngừng hoàn toàn việc sử dụng trình xử lý sự kiện và thay vào đó sử dụng trình xử lý sự kiện JavaScript (cùng với tệp đính kèm tương ứng cho Jscript- vì đây là một trong những tình huống mà JavaScript và JScript khác nhau). Chúng ta có thể thực hiện việc này một cách dễ dàng nhất bằng cách trước tiên tạo một hàm addEvent sẽ thêm trình xử lý sự kiện hoặc tệp đính kèm tùy thuộc vào ngôn ngữ nào trong hai ngôn ngữ mà ngôn ngữ đang chạy hỗ trợ;

Bây giờ chúng tôi có thể đính kèm quá trình xử lý mà chúng tôi muốn xảy ra khi phần tử của chúng tôi được nhấp vào bằng cách sử dụng

Sử dụng phương pháp đính kèm mã này để được xử lý khi một phần tử được nhấp vào có nghĩa là thực hiện lệnh gọi addEvent khác để thêm một hàm khác được chạy khi một phần tử cụ thể được nhấp vào sẽ không thay thế quá trình xử lý trước đó bằng quá trình xử lý mới mà thay vào đó sẽ cho phép . Khi gọi addEvent ta không cần biết đã có hàm gắn vào phần tử hay chưa để chạy khi click vào thì hàm mới sẽ chạy cùng với các hàm đã gắn trước đó.

Chúng ta có cần khả năng loại bỏ các chức năng khỏi những gì được chạy khi một phần tử được nhấp vào hay không thì chúng ta có thể tạo một hàm deleteEvent tương ứng để gọi hàm thích hợp để xóa trình xử lý sự kiện hoặc sự kiện đính kèm?

Một nhược điểm của cách đính kèm xử lý cuối cùng này là những trình duyệt thực sự cũ không hỗ trợ những cách tương đối mới này để đính kèm xử lý sự kiện vào một trang web. Hiện tại sẽ có ít người sử dụng các trình duyệt lỗi thời như vậy để bỏ qua chúng trong Tập lệnh J(ava) mà chúng tôi viết ngoài việc viết mã theo cách không gây ra số lượng lớn thông báo lỗi. Hàm trên được viết để không làm gì nếu cả hai cách mà nó sử dụng đều không được hỗ trợ. Hầu hết các trình duyệt thực sự cũ này cũng không hỗ trợ phương thức getElementById để tham chiếu HTML và do đó, nếu (. tài liệu. getElementById) trả về sai; . Tất nhiên, nhiều người viết JavaScript không quan tâm đến những người vẫn đang sử dụng các trình duyệt cũ và vì vậy những người dùng đó phải quen với việc nhìn thấy các lỗi JavaScript trên hầu hết mọi trang web họ truy cập bây giờ

Bạn sử dụng cách nào trong số những cách khác nhau này để đính kèm quá trình xử lý vào trang của mình để chạy khi khách truy cập của bạn nhấp vào thứ gì đó?

Khi xem mã cho trình xử lý sự kiện trên nhiều trình duyệt, bạn sẽ nhận thấy rằng có một tham số thứ tư mà chúng tôi gọi là uC, việc sử dụng tham số này không rõ ràng trong phần mô tả trước đó

Browsers have two different orders in which they can process events when the event is triggered. They can work from the outside inwards from the tag in towards the tag that triggered the event or they can work from the inside out starting at the most specific tag. These two are called capture and bubble respectively and most browsers allow you to choose which order multiple processing should be run in by setting this extra parameter.

• uC = true để xử lý trong giai đoạn chụp
• uC = false để xử lý trong giai đoạn bong bóng

Vì vậy, khi có một số thẻ khác bao quanh thẻ mà sự kiện đã được kích hoạt trong giai đoạn chụp, trước tiên hãy bắt đầu với thẻ ngoài cùng và di chuyển về phía thẻ đã kích hoạt sự kiện và sau đó khi thẻ được gắn vào sự kiện đã được xử lý

Internet Explorer và các trình xử lý sự kiện truyền thống luôn xử lý giai đoạn bong bóng chứ không bao giờ xử lý giai đoạn chụp, do đó, luôn bắt đầu với thẻ cụ thể nhất và hoạt động dần dần

Vì vậy, với xử lý sự kiện

nhấp vào xx sẽ bong bóng kích hoạt cảnh báo ('b') trước và cảnh báo ('a') thứ hai

Nếu những cảnh báo đó được đính kèm bằng trình xử lý sự kiện với uC true thì tất cả các trình duyệt hiện đại ngoại trừ Internet Explorer sẽ xử lý cảnh báo ('a') trước rồi đến cảnh báo ('b')

Trích dẫn bài viết này

Định dạng

trích dẫn của bạn

Chapman, Stephen. "Chuyển JavaScript ra khỏi trang web. "ThinkCo. https. //www. suy nghĩ. com/moving-javascript-out-of-the-web-page-2037542 (truy cập ngày 7 tháng 12 năm 2022)

Bạn có thể sử dụng HTML CSS và JavaScript cùng nhau không?

Tôi có thể viết JavaScript cả trong HTML và dưới dạng một tệp riêng biệt không?

Tôi có nên tách JavaScript khỏi HTML không?

Tôi có thể bỏ qua HTML và CSS để học JavaScript không?