Bagaimana cara kerja inline Javascript (dalam HTML)?

Saya tahu ini adalah praktik buruk. Jangan menulis kode seperti ini jika memungkinkan.

Tentu saja, kita akan selalu menemukan diri kita dalam situasi di mana potongan pintar Javascript inline dapat mengatasi masalah dengan cepat.

Saya mengejar pertanyaan ini untuk memahami sepenuhnya apa yang terjadi (dan potensi jebakan) ketika sesuatu seperti ini ditulis:

<a href="#" onclick="alert('Hi')">Click Me</a>

Sejauh yang saya tahu ini secara fungsional sama dengan

<script type="text/javascript">
   $(function(){ // I use jQuery in this example
       document.getElementById('click_me').onclick = 
           function () { alert('Hi'); };
   });
</script>
<a href="#" id="click_me">Click Me</a>

Ekstrapolasi dari ini nampaknya bahwa string yang ditugaskan untuk atribut onclickdimasukkan dalam fungsi anonim yang ditugaskan untuk penangan klik elemen. Apakah ini yang sebenarnya terjadi?

Karena saya mulai melakukan hal-hal seperti ini:

<a href="#" onclick="$(this).next().fadeIn(); return false;">Display my next sibling</a> <!-- Return false in handler so as not to scroll to top of page! --> 

Yang bekerja Tapi saya tidak tahu seberapa banyak retasan ini. Ini terlihat mencurigakan karena tidak ada fungsi jelas yang sedang dikembalikan!

Anda mungkin bertanya, mengapa Anda melakukan ini, Steve? Inline JS adalah praktik buruk!

Ya jujur ​​saja, saya bosan mengedit tiga bagian kode yang berbeda hanya untuk memodifikasi satu bagian halaman, terutama ketika saya hanya membuat prototipe sesuatu untuk melihat apakah itu akan bekerja sama sekali. Ini jauh lebih mudah dan kadang-kadang bahkan masuk akal untuk kode yang secara khusus terkait dengan elemen HTML ini untuk didefinisikan tepat di dalam elemen: Ketika saya memutuskan 2 menit kemudian bahwa ini adalah ide yang mengerikan, mengerikan saya bisa memuntahkan seluruh div (atau apa pun ) dan saya tidak memiliki banyak JS misterius dan cruft berkeliaran di sisa halaman, memperlambat rendering sedikit. Ini mirip dengan konsep lokalitas referensi tetapi alih-alih meleset dari cache, kami melihat bug dan mengasapi kode.

Anda sudah hampir benar, tetapi Anda belum memperhitungkan thisnilai yang diberikan ke kode sebaris.

<a href="#" onclick="alert(this)">Click Me</a>

sebenarnya lebih dekat ke:

<a href="#" id="click_me">Click Me</a>
<script type="text/javascript">
document.getElementById('click_me').addEventListener("click", function(event) {
    (function(event) {
        alert(this);
    }).call(document.getElementById('click_me'), event);
});
</script>

Penangan acara sebaris yang disetel thissama dengan target acara. Anda juga dapat menggunakan fungsi anonim dalam skrip inline

<a href="#" onclick="(function(){alert(this);})()">Click Me</a>

Apa yang dilakukan browser saat Anda memilikinya

<a onclick="alert('Hi');" ... >

adalah mengatur nilai aktual "onclick" menjadi sesuatu yang efektif seperti:

new Function("event", "alert('Hi');");

Yaitu, ia menciptakan fungsi yang mengharapkan parameter "event". (Ya, IE tidak; itu lebih seperti fungsi anonim sederhana sederhana.)

Tampaknya ada banyak praktik buruk yang dilemparkan ke Atribut Event Handler. Praktik buruk adalah tidak mengetahui dan menggunakan fitur yang tersedia di tempat yang paling tepat. Atribut Acara sepenuhnya standar W3C yang didokumentasikan dan tidak ada praktik buruk tentang mereka. Ini tidak berbeda dengan menempatkan gaya inline, yang juga didokumentasikan W3C dan dapat berguna pada saatnya. Apakah Anda menempatkannya dalam tag skrip atau tidak, itu akan ditafsirkan dengan cara yang sama.

https://www.w3.org/TR/html5/webappapis.html#event-handler-idl-attributes

Cara terbaik untuk menjawab pertanyaan Anda adalah melihatnya dalam tindakan.

<a id="test" onclick="alert('test')"> test </a> ​

Di js

var test = document.getElementById('test');
console.log( test.onclick ); 

Seperti yang Anda lihat di console, jika Anda menggunakan chrome, ia mencetak fungsi anonim dengan objek acara dilewatkan, meskipun sedikit berbeda di IE.

function onclick(event) {
   alert('test')
}

Saya setuju dengan beberapa poin Anda tentang penangan event inline. Ya mereka mudah untuk ditulis, tetapi saya tidak setuju dengan poin Anda tentang harus mengubah kode di banyak tempat, jika Anda menyusun kode dengan baik, Anda tidak perlu melakukan ini.

Ini terlihat mencurigakan karena tidak ada fungsi jelas yang sedang dikembalikan!

Ini adalah fungsi anonim yang telah dilampirkan ke acara klik objek.

kenapa kamu melakukan ini, Steve?

Mengapa kamu melakukan ... Ah tidak pernah, seperti yang telah Anda sebutkan, itu benar-benar praktik buruk yang diadopsi secara luas :)

Coba ini di konsol:

var div = document.createElement('div');

div.setAttribute('onclick', 'alert(event)');

div.onclick

Di Chrome, ini menunjukkan ini:

function onclick(event) {
  alert(event)
}

... dan non-standar namemilik div.onclickyaitu "onclick".

Jadi, apakah ini anonim atau tidak tergantung definisi Anda tentang "anonim." Bandingkan dengan sesuatu seperti var foo = new Function(), di mana foo.namestring kosong, dan foo.toString()akan menghasilkan sesuatu seperti

function anonymous() {

}