Saya telah mendengar berkali-kali bahwa menggunakan peristiwa JavaScript, seperti onClick(), dalam HTML adalah praktik yang buruk, karena itu tidak baik untuk semantik. Saya ingin tahu apa kerugiannya dan bagaimana cara memperbaiki kode berikut?

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

Anda mungkin berbicara tentang Javascript yang tidak mencolok , yang akan terlihat seperti ini:

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

dengan logika di file javascript pusat terlihat seperti ini:

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

Keuntungannya adalah

• perilaku (Javascript) dipisahkan dari presentasi (HTML)
• tidak ada campuran bahasa
• Anda menggunakan kerangka kerja javascript seperti jQuery yang dapat menangani sebagian besar masalah lintas-browser untuk Anda
• Anda dapat menambahkan perilaku ke banyak elemen HTML sekaligus tanpa duplikasi kode

Jika Anda menggunakan jQuery maka:

HTML:

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

JS:

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

Ini memiliki manfaat tetap bekerja tanpa JS, atau jika pengguna mengklik tautan tersebut.

Ini juga berarti bahwa saya dapat menangani sembulan umum dengan menulis ulang lagi ke:

HTML:

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

JS:

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

Ini akan memungkinkan Anda menambahkan sembulan ke tautan apa pun dengan hanya memberikannya kelas sembulan.

Gagasan ini dapat diperluas lebih jauh seperti:

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;
    });
});

Sekarang saya dapat menggunakan sedikit kode yang sama untuk banyak popup di seluruh situs saya tanpa harus menulis banyak hal onclick! Yay untuk dapat digunakan kembali!

Ini juga berarti bahwa jika nanti saya memutuskan bahwa popup adalah praktik yang buruk, (yang memang demikian!) Dan saya ingin menggantinya dengan jendela modal gaya lightbox, saya dapat mengubah:

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

untuk

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

dan semua popup saya di seluruh situs saya sekarang bekerja dengan sangat berbeda. Saya bahkan bisa melakukan deteksi fitur untuk memutuskan apa yang harus dilakukan pada sembulan, atau menyimpan preferensi pengguna untuk mengizinkannya atau tidak. Dengan onclick inline, ini membutuhkan salinan dan upaya menempel yang sangat besar.

Dengan aplikasi JavaScript yang sangat besar, pemrogram menggunakan lebih banyak enkapsulasi kode untuk menghindari polusi lingkup global. Dan untuk membuat fungsi tersedia untuk aksi onClick dalam elemen HTML, itu harus dalam lingkup global.

Anda mungkin telah melihat file JS yang terlihat seperti ini ...

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

Ini adalah Ekspresi Fungsi Segera Diminta (IIFE) dan fungsi apa pun yang dinyatakan di dalamnya hanya akan ada dalam lingkup internal mereka.

Jika Anda mendeklarasikan function doSomething(){}dalam IIFE, lalu membuat doSomething()aksi onClick suatu elemen di halaman HTML Anda, Anda akan mendapatkan kesalahan.

Sebaliknya, jika Anda membuat eventListener untuk elemen itu dalam IIFE itu dan menelepon doSomething()ketika pendengar mendeteksi acara klik, Anda baik karena pendengar dan doSomething()berbagi ruang lingkup IIFE.

Untuk aplikasi web kecil dengan jumlah kode minimal, tidak masalah. Tetapi jika Anda bercita-cita untuk menulis basis kode yang besar dan dapat dipelihara, onclick=""adalah kebiasaan yang harus Anda hindari.

Ini tidak baik karena beberapa alasan:

• itu mencampur kode dan markup
• kode yang ditulis dengan cara ini melewati eval
• dan berjalan dalam lingkup global

Hal paling sederhana adalah menambahkan nameatribut ke <a>elemen Anda , maka Anda bisa melakukannya:

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

meskipun praktik terbaik modern adalah menggunakan idalih - alih nama, dan menggunakan addEventListener()alih-alih menggunakan onclickkarena itu memungkinkan Anda untuk mengikat beberapa fungsi ke satu peristiwa.

Ada beberapa alasan:

1. Saya merasa bantu untuk memisahkan markup, yaitu skrip HTML dan sisi klien. Misalnya, jQuery memudahkan untuk menambahkan penangan acara secara terprogram.

2. Contoh yang Anda berikan akan rusak di agen pengguna apa pun yang tidak mendukung javascript, atau javascript dimatikan. Konsep peningkatan progresif akan mendorong hyperlink sederhana /map/untuk agen pengguna tanpa javascript, kemudian menambahkan penangan klik prgramatis untuk agen pengguna yang mendukung javascript.

Sebagai contoh:

Markup:

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

Javascript:

$(document).ready(function(){

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

})

Revisi

Pendekatan JavaScript yang tidak mencolok baik di MASA LALU - terutama event handler binding dalam HTML dianggap sebagai praktik buruk (terutama karena onclick events run in the global scope and may cause unexpected errorapa yang disebutkan oleh YiddishNinja )

Namun...

Saat ini tampaknya pendekatan ini agak ketinggalan jaman dan perlu beberapa pembaruan. Jika seseorang ingin menjadi pengembang frontend profesional dan menulis aplikasi yang besar dan rumit maka dia harus menggunakan kerangka kerja seperti Angular, Vue.js, dll. Namun kerangka itu biasanya menggunakan (atau memungkinkan untuk menggunakan) template-HTML di mana penangan acara terikat dalam kode html-template secara langsung dan ini sangat berguna, jelas dan efektif - misalnya dalam template sudut biasanya orang menulis:

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

Dalam js / html mentah, ini setara dengan

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

Perbedaannya adalah bahwa dalam onclickperistiwa js mentah dijalankan dalam lingkup global - tetapi kerangka kerja menyediakan enkapsulasi.

Jadi di mana masalahnya?

Masalahnya adalah ketika programmer pemula yang selalu mendengar bahwa html-onclick buruk dan yang selalu menggunakan btn.addEventListener("onclick", ... )ingin menggunakan beberapa kerangka kerja dengan template ( addEventListenerjuga memiliki kelemahan - jika kita memperbarui DOM secara dinamis menggunakan innerHTML=(yang cukup cepat ) - maka kita kehilangan acara penangan mengikat dengan cara itu). Kemudian dia akan menghadapi sesuatu seperti kebiasaan buruk atau pendekatan yang salah untuk penggunaan kerangka kerja - dan dia akan menggunakan kerangka kerja dengan cara yang sangat buruk - karena dia akan fokus terutama pada bagian js dan tidak pada bagian kerangka (dan menghasilkan tidak jelas dan sulit untuk mempertahankan kode). Untuk mengubah kebiasaan ini, ia akan kehilangan banyak waktu (dan mungkin ia akan membutuhkan keberuntungan dan guru).

Jadi menurut saya, berdasarkan pengalaman dengan siswa saya, lebih baik bagi mereka jika mereka menggunakan html-handler-bind di awal. Seperti yang saya katakan memang benar bahwa penangan dipanggil dalam lingkup global tetapi pada tahap ini siswa biasanya membuat aplikasi kecil yang mudah dikendalikan. Untuk menulis aplikasi yang lebih besar, mereka memilih beberapa kerangka kerja.

Jadi apa yang harus dilakukan?

Kita dapat MEMPERBARUI pendekatan JavaScript yang Tidak Mengganggu dan mengizinkan pengikat acara bind (akhirnya dengan parameter sederhana) dalam html (tetapi hanya pengikat ikatan - tidak memasukkan logika ke dalam klik seperti pada pertanyaan OP). Jadi menurut saya di js / html mentah ini harus diizinkan

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

atau

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>

Tetapi contoh di bawah ini TIDAK boleh diizinkan

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

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

Kenyataannya berubah, sudut pandang kita juga harus

Ini adalah paradigma baru yang disebut " JavaScript Tidak Mengganggu ". "Standar web" saat ini mengatakan untuk memisahkan fungsi dan presentasi.

Ini sebenarnya bukan "praktik buruk", hanya saja sebagian besar standar baru ingin Anda menggunakan pendengar acara alih-alih menggunakan JavaScript.

Juga, ini mungkin hanya hal pribadi, tapi saya pikir ini jauh lebih mudah dibaca ketika Anda menggunakan pendengar acara, terutama jika Anda memiliki lebih dari 1 pernyataan JavaScript yang ingin Anda jalankan.

Pertanyaan Anda akan memicu diskusi saya kira. Gagasan umumnya adalah memisahkan perilaku dan struktur itu baik. Selanjutnya, afaik, penangan klik sebaris harus evaldiarahkan untuk 'menjadi' fungsi javascript nyata. Dan itu cukup kuno, meskipun itu argumen yang cukup goyah. Ah, baca beberapa tentangnya @ quirksmode.org

• onclick events berjalan dalam lingkup global dan dapat menyebabkan kesalahan tak terduga.
• Menambahkan peristiwa onclick ke banyak elemen DOM akan memperlambat
  kinerja dan efisiensi.

Dua alasan lagi untuk tidak menggunakan penangan inline:

Mereka dapat meminta kutipan yang lolos dari masalah

Diberikan string sewenang - wenang , jika Anda ingin dapat membangun inline handler yang memanggil fungsi dengan string itu, untuk solusi umum, Anda harus melarikan diri dari pembatas atribut (dengan entitas HTML terkait), dan Anda akan harus lolos dari pembatas yang digunakan untuk string di dalam atribut, seperti berikut:

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>'
);

Itu sangat jelek. Dari contoh di atas, jika Anda tidak mengganti 's, SyntaxError akan menghasilkan, karena alert('foo'"bar')bukan sintaks yang valid. Jika Anda tidak mengganti "s, maka peramban akan menafsirkannya sebagai akhir onclickatribut (dibatasi dengan "s di atas), yang juga akan salah.

Jika seseorang terbiasa menggunakan penangan inline, ia harus memastikan untuk mengingat melakukan sesuatu yang mirip dengan yang di atas (dan melakukannya dengan benar ) setiap kali , yang membosankan dan sulit untuk dipahami dalam sekejap. Lebih baik untuk menghindari penangan inline sepenuhnya sehingga string sewenang-wenang dapat digunakan dalam penutupan sederhana:

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);

Bukankah itu jauh lebih baik?

Rantai lingkup penangan inline sangat aneh

Menurut Anda apa yang akan dicatat oleh kode berikut?

let disabled = true;

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

Cobalah, jalankan cuplikannya. Mungkin bukan itu yang Anda harapkan. Mengapa itu menghasilkan apa yang dilakukannya? Karena penangan inline dijalankan di dalam withblok. Kode di atas ada di dalam tiga with blok: satu untuk document, satu untuk <form>, dan satu untuk <button>:

let disabled = true;

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

Karena disabledmerupakan properti tombol, referensi disableddi dalam inline handler mengacu pada properti tombol, bukan disabledvariabel luar . Ini cukup kontra-intuitif. withmemiliki banyak masalah: ini dapat menjadi sumber bug yang membingungkan dan secara signifikan memperlambat kode. Bahkan tidak diizinkan sama sekali dalam mode ketat. Tetapi dengan penangan inline, Anda dipaksa untuk menjalankan kode melalui withs - dan bukan hanya melalui satu with, tetapi melalui beberapa withs bersarang . Ini gila.

withtidak boleh digunakan dalam kode. Karena penangan inline secara implisit memerlukan withbersama dengan semua perilakunya yang membingungkan, penangan inline harus dihindari juga.