Tôi đã nghe nhiều lần rằng sử dụng các sự kiện JavaScript, chẳng hạn như onClick()trong HTML là một thực tiễn tồi, bởi vì nó không tốt cho ngữ nghĩa. Tôi muốn biết nhược điểm là gì và cách khắc phục mã sau đây?

<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

Có lẽ bạn đang nói về Javascript không phô trương , sẽ giống như thế này:

<a href="#" id="someLink">link</a>

với logic trong một tệp javascript trung tâm trông giống như thế này:

$('#someLink').click(function(){
    popup('/map/', 300, 300, 'map'); 
    return false;
});

Những ưu điểm là

• hành vi (Javascript) được tách ra khỏi bản trình bày (HTML)
• không pha trộn ngôn ngữ
• bạn đang sử dụng khung javascript như jQuery có thể xử lý hầu hết các sự cố trình duyệt chéo cho bạn
• Bạn có thể thêm hành vi vào nhiều phần tử HTML cùng một lúc mà không cần sao chép mã

Nếu bạn đang sử dụng jQuery thì:

HTML:

 <a id="openMap" href="/map/">link</a>

JS:

$(document).ready(function() {
    $("#openMap").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });
});

Điều này có lợi ích là vẫn hoạt động mà không có JS hoặc nếu người dùng ở giữa nhấp vào liên kết.

Điều đó cũng có nghĩa là tôi có thể xử lý các quảng cáo chung bằng cách viết lại thành:

HTML:

 <a class="popup" href="/map/">link</a>

JS:

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), 300, 300, 'map');
        return false;
    });
});

Điều này sẽ cho phép bạn thêm một cửa sổ bật lên vào bất kỳ liên kết nào bằng cách chỉ cho nó lớp bật lên.

Ý tưởng này có thể được mở rộng hơn nữa như vậy:

HTML:

 <a class="popup" data-width="300" data-height="300" href="/map/">link</a>

JS:

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
        return false;
    });
});

Bây giờ tôi có thể sử dụng cùng một đoạn mã cho nhiều cửa sổ bật lên trên toàn bộ trang web của mình mà không phải viết vô số nội dung onclick! Yay cho tái sử dụng!

Điều đó cũng có nghĩa là nếu sau này tôi quyết định rằng cửa sổ bật lên là thông lệ xấu, (đó là!) Và tôi muốn thay thế chúng bằng cửa sổ phương thức kiểu hộp đèn, tôi có thể thay đổi:

popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

đến

myAmazingModalWindow($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

và tất cả các quảng cáo của tôi trên toàn bộ trang web của tôi hiện đang hoạt động hoàn toàn khác nhau. Tôi thậm chí có thể thực hiện phát hiện tính năng để quyết định những việc cần làm trên cửa sổ bật lên hoặc lưu trữ tùy chọn người dùng để cho phép họ hay không. Với onclick nội tuyến, điều này đòi hỏi một nỗ lực sao chép và dán rất lớn.

Với các ứng dụng JavaScript rất lớn, các lập trình viên đang sử dụng nhiều mã đóng gói hơn để tránh gây ô nhiễm phạm vi toàn cầu. Và để làm cho một chức năng có sẵn cho hành động onClick trong một phần tử HTML, nó phải nằm trong phạm vi toàn cầu.

Bạn có thể đã thấy các tệp JS trông như thế này ...

(function(){
    ...[some code]
}());

Đây là các biểu thức hàm được gọi ngay lập tức (IIFE) và bất kỳ hàm nào được khai báo trong chúng sẽ chỉ tồn tại trong phạm vi bên trong của chúng.

Nếu bạn khai báo function doSomething(){}trong IIFE, sau đó thực hiện doSomething()hành động onClick của một thành phần trong trang HTML của bạn, bạn sẽ gặp lỗi.

Mặt khác, nếu bạn tạo một eventListener cho phần tử đó trong IIFE đó và gọi doSomething()khi người nghe phát hiện ra một sự kiện nhấp chuột, thì bạn tốt vì người nghe và doSomething()chia sẻ phạm vi của IIFE.

Đối với các ứng dụng web nhỏ với số lượng mã tối thiểu, điều đó không thành vấn đề. Nhưng nếu bạn khao khát viết những cơ sở mã lớn, có thể duy trì, onclick=""là một thói quen mà bạn nên làm việc để tránh.

Nó không tốt vì nhiều lý do:

• nó trộn mã và đánh dấu
• mã được viết theo cách này đi qua eval
• và chạy trong phạm vi toàn cầu

Điều đơn giản nhất là thêm một namethuộc tính cho thành <a>phần của bạn , sau đó bạn có thể làm:

document.myelement.onclick = function() {
    window.popup('/map/', 300, 300, 'map');
    return false;
};

mặc dù cách thực hành tốt nhất hiện đại sẽ là sử dụng idthay vì tên và sử dụng addEventListener()thay vì sử dụng onclickvì điều đó cho phép bạn liên kết nhiều chức năng với một sự kiện.

Có một vài lý do:

1. Tôi thấy nó giúp duy trì việc đánh dấu riêng biệt, tức là các tập lệnh HTML và phía máy khách. Ví dụ, jQuery giúp dễ dàng thêm các trình xử lý sự kiện theo chương trình.

2. Ví dụ bạn đưa ra sẽ bị hỏng trong bất kỳ tác nhân người dùng nào không hỗ trợ javascript hoặc đã tắt javascript. Khái niệm tăng cường lũy ​​tiến sẽ khuyến khích một siêu liên kết đơn giản /map/cho các tác nhân người dùng không có javascript, sau đó thêm trình xử lý nhấp chuột theo chương trình cho các tác nhân người dùng hỗ trợ javascript.

Ví dụ:

Đánh dấu:

<a id="example" href="/map/">link</a>

Javascript:

$(document).ready(function(){

    $("#example").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });

})

Sửa đổi

Cách tiếp cận JavaScript không phô trương là tốt trong PAST - đặc biệt là trình xử lý sự kiện liên kết trong HTML được coi là thực tiễn xấu (chủ yếu vì onclick events run in the global scope and may cause unexpected errornhững gì được đề cập bởi YiddishNinja )

Tuy nhiên...

Hiện tại có vẻ như cách tiếp cận này đã hơi lỗi thời và cần một số cập nhật. Nếu ai đó muốn trở thành nhà phát triển frontend chuyên nghiệp và viết các ứng dụng lớn và phức tạp thì anh ta cần sử dụng các khung như Angular, Vue.js, v.v ... Tuy nhiên, các khung đó thường sử dụng (hoặc cho phép sử dụng) các mẫu HTML nơi trình xử lý sự kiện được liên kết trong mã mẫu html trực tiếp và điều này rất tiện dụng, rõ ràng và hiệu quả - ví dụ: trong mẫu góc thường mọi người viết:

<button (click)="someAction()">Click Me</button> 

Trong js / html thô tương đương với điều này sẽ là

<button onclick="someAction()">Click Me</button>

Sự khác biệt là trong onclicksự kiện js thô được chạy trong phạm vi toàn cầu - nhưng các khung cung cấp đóng gói.

Vậy vấn đề nằm ở đâu?

Vấn đề là khi lập trình viên mới làm quen luôn nghe rằng html-onclick rất tệ và những người luôn sử dụng btn.addEventListener("onclick", ... )muốn sử dụng một số khung công tác với các mẫu ( addEventListenercũng có nhược điểm - nếu chúng tôi cập nhật DOM theo cách động bằng cách sử dụng innerHTML=(khá nhanh ) - thì chúng tôi sẽ mất các sự kiện xử lý ràng buộc theo cách đó). Sau đó, anh ta sẽ phải đối mặt với những thứ như thói quen xấu hoặc cách tiếp cận sai đối với việc sử dụng khung - và anh ta sẽ sử dụng khung theo cách rất xấu - bởi vì anh ta sẽ tập trung chủ yếu vào phần js và không tập trung vào phần mẫu (và sản xuất không rõ ràng và khó bảo trì mã). Để thay đổi thói quen này, anh ta sẽ mất rất nhiều thời gian (và có lẽ anh ta sẽ cần một chút may mắn và giáo viên).

Vì vậy, theo tôi, dựa trên kinh nghiệm với các sinh viên của tôi, sẽ tốt hơn cho họ nếu họ sử dụng trình xử lý html-ràng buộc ngay từ đầu. Như tôi nói đúng là các trình xử lý được gọi trong phạm vi toàn cầu, nhưng giai đoạn này sinh viên thường tạo ra các ứng dụng nhỏ dễ kiểm soát. Để viết các ứng dụng lớn hơn, họ chọn một số khung.

Vậy lam gi?

Chúng tôi có thể CẬP NHẬT cách tiếp cận JavaScript không phô trương và cho phép các trình xử lý sự kiện liên kết (cuối cùng với các tham số đơn giản) trong html (nhưng chỉ xử lý liên kết - không đưa logic vào onclick như trong OP quesiton). Vì vậy, theo tôi trong js / html thô, điều này nên được cho phép

<button onclick="someAction(3)">Click Me</button>

hoặc là

function popup(num,str,event) {
   let re=new RegExp(str);  
   // ... 
   event.preventDefault();
   console.log("link was clicked");
}

<a href="https://example.com" onclick="popup(300,'map',event)">link</a>

Nhưng những ví dụ dưới đây KHÔNG được phép

<button onclick="console.log('xx'); someAction(); return true">Click Me</button>

<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

Thực tế thay đổi, quan điểm của chúng tôi cũng nên

Đó là một mô hình mới gọi là " JavaScript không phô trương ". "Tiêu chuẩn web" hiện tại nói về chức năng và cách trình bày riêng biệt.

Nó không thực sự là một "thực hành xấu", chỉ là hầu hết các tiêu chuẩn mới muốn bạn sử dụng trình lắng nghe sự kiện thay vì JavaScript liên tục.

Ngoài ra, đây có thể chỉ là một vấn đề cá nhân, nhưng tôi nghĩ nó dễ đọc hơn nhiều khi bạn sử dụng trình lắng nghe sự kiện, đặc biệt nếu bạn có nhiều hơn 1 câu lệnh JavaScript mà bạn muốn chạy.

Câu hỏi của bạn sẽ kích hoạt thảo luận tôi cho rằng. Ý tưởng chung là tốt để phân tách hành vi và cấu trúc. Hơn nữa, afaik, một trình xử lý nhấp chuột nội tuyến phải được evaldẫn đến 'trở thành' một chức năng javascript thực sự. Và nó khá lỗi thời, mặc dù đó là một cuộc tranh luận khá run rẩy. À, tốt, đọc một số về nó @ quirksmode.org

• các sự kiện onclick chạy trong phạm vi toàn cầu và có thể gây ra lỗi không mong muốn.
• Thêm các sự kiện onclick vào nhiều thành phần DOM sẽ làm chậm
  hiệu suất và hiệu quả.

Hai lý do nữa để không sử dụng trình xử lý nội tuyến:

Họ có thể yêu cầu trích dẫn tẻ nhạt thoát khỏi các vấn đề

Đưa ra một chuỗi tùy ý , nếu bạn muốn có thể xây dựng một trình xử lý nội tuyến gọi một hàm với chuỗi đó, đối với giải pháp chung, bạn sẽ phải thoát các dấu phân cách thuộc tính (với thực thể HTML được liên kết) và bạn sẽ phải thoát khỏi dấu phân cách được sử dụng cho chuỗi bên trong thuộc tính, như sau:

const str = prompt('What string to display on click?', 'foo\'"bar');
const escapedStr = str
  // since the attribute value is going to be using " delimiters,
  // replace "s with their corresponding HTML entity:
  .replace(/"/g, '"')
  // since the string literal inside the attribute is going to delimited with 's,
  // escape 's:
  .replace(/'/g, "\\'");
  
document.body.insertAdjacentHTML(
  'beforeend',
  '<button onclick="alert(\'' + escapedStr + '\')">click</button>'
);

Điều đó cực kỳ xấu xí. Từ ví dụ trên, nếu bạn không thay thế 's, một SyntaxError sẽ có kết quả, vì đó alert('foo'"bar')không phải là cú pháp hợp lệ. Nếu bạn không thay thế "s, thì trình duyệt sẽ hiểu nó là phần cuối của onclickthuộc tính (được phân cách bằng" s ở trên), điều này cũng không chính xác.

Nếu một người thường xuyên sử dụng các trình xử lý nội tuyến, người ta sẽ phải nhớ đảm bảo làm điều gì đó tương tự như trên (và thực hiện đúng ) mỗi lần , điều này tẻ nhạt và khó hiểu trong nháy mắt. Tốt hơn là tránh các trình xử lý nội tuyến hoàn toàn để chuỗi tùy ý có thể được sử dụng trong một bao đóng đơn giản:

const str = prompt('What string to display on click?', 'foo\'"bar');
const button = document.body.appendChild(document.createElement('button'));
button.textContent = 'click';
button.onclick = () => alert(str);

Nó không đẹp hơn sao?

Chuỗi phạm vi của một trình xử lý nội tuyến là rất đặc biệt

Bạn nghĩ mã nào sau đây sẽ đăng nhập?

let disabled = true;

<form>
  <button onclick="console.log(disabled);">click</button>
</form>

Hãy thử nó, chạy đoạn trích. Nó có thể không phải là những gì bạn đang mong đợi. Tại sao nó sản xuất những gì nó làm? Bởi vì xử lý nội tuyến chạy bên trong withcác khối. Đoạn mã trên nằm trong ba with khối: một cho document, một cho <form>và một cho <button>:

let disabled = true;

<form>
  <button onclick="console.log(disabled);">click</button>
</form>

Vì disabledlà một thuộc tính của nút, nên tham chiếu disabledbên trong trình xử lý nội tuyến đề cập đến thuộc tính của nút chứ không phải disabledbiến ngoài . Điều này khá phản trực quan. withcó nhiều vấn đề: nó có thể là nguồn gây ra lỗi khó hiểu và làm chậm đáng kể mã. Nó thậm chí không được phép ở chế độ nghiêm ngặt. Nhưng với các trình xử lý nội tuyến, bạn buộc phải chạy mã qua withs - và không chỉ qua một with, mà qua nhiều withs lồng nhau . Thật là điên rồ.

withkhông bao giờ nên được sử dụng trong mã. Bởi vì trình xử lý nội tuyến hoàn toàn yêu cầu withcùng với tất cả các hành vi khó hiểu của nó, nên xử lý nội tuyến cũng nên tránh.