Inline Javascript (ใน HTML) ทำงานอย่างไร

ฉันรู้ว่านี่เป็นการปฏิบัติที่ไม่ดี อย่าเขียนโค้ดแบบนี้ถ้าเป็นไปได้

แน่นอนว่าเรามักจะพบว่าตัวเองอยู่ในสถานการณ์ที่ตัวอย่าง Javascript แบบอินไลน์ที่ชาญฉลาดสามารถแก้ไขปัญหาได้อย่างรวดเร็ว

ฉันกำลังติดตามคำถามนี้เพื่อความเข้าใจอย่างถ่องแท้ว่าเกิดอะไรขึ้น (และข้อผิดพลาดที่อาจเกิดขึ้น) เมื่อมีการเขียนสิ่งนี้:

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

เท่าที่ฉันสามารถบอกได้ว่านี่เป็นหน้าที่เหมือนกับ

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

การสรุปจากสิ่งนี้ดูเหมือนว่าสตริงที่กำหนดให้กับแอตทริบิวต์onclickจะถูกแทรกภายในฟังก์ชันที่ไม่ระบุตัวตนซึ่งกำหนดให้กับตัวจัดการการคลิกขององค์ประกอบ เป็นเช่นนั้นจริงหรือ?

เพราะฉันกำลังเริ่มทำสิ่งนี้:

<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! --> 

ซึ่งได้ผล แต่ฉันไม่รู้ว่าแฮ็คนี้มีค่าแค่ไหน มันดูน่าสงสัยเพราะไม่มีการส่งคืนฟังก์ชันที่ชัดเจน!

คุณอาจถามว่าทำไมคุณถึงทำแบบนี้สตีฟ? Inline JS เป็นการปฏิบัติที่ไม่ดี!

พูดตามตรงว่าฉันเบื่อที่จะแก้ไขโค้ดสามส่วนที่แตกต่างกันเพียงเพื่อแก้ไขส่วนหนึ่งของหน้าโดยเฉพาะอย่างยิ่งเมื่อฉันสร้างต้นแบบบางอย่างเพื่อดูว่าจะใช้งานได้หรือไม่ มันง่ายกว่ามากและบางครั้งก็สมเหตุสมผลที่โค้ดที่เกี่ยวข้องโดยเฉพาะกับองค์ประกอบ HTML นี้จะถูกกำหนดไว้ภายในองค์ประกอบ: เมื่อฉันตัดสินใจ 2 นาทีต่อมาว่านี่เป็นความคิดที่แย่และแย่มากฉันสามารถหา div ทั้งหมดได้ (หรืออะไรก็ได้ ) และฉันไม่มี Cruft JS และ CSS ลึกลับจำนวนหนึ่งห้อยอยู่ในส่วนที่เหลือของหน้าทำให้การเรนเดอร์ช้าลงเล็กน้อย สิ่งนี้คล้ายกับแนวคิดของสถานที่อ้างอิง แต่แทนที่จะคิดถึงแคชเรากำลังดูจุดบกพร่องและการขยายโค้ด

คุณทำถูกต้องแล้ว แต่คุณไม่ได้คิดthisมูลค่าที่ระบุให้กับโค้ดอินไลน์

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

อยู่ใกล้กับ:

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

ตัวจัดการเหตุการณ์แบบอินไลน์ตั้งค่าthisเท่ากับเป้าหมายของเหตุการณ์ คุณยังสามารถใช้ฟังก์ชันที่ไม่ระบุชื่อในสคริปต์แบบอินไลน์

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

สิ่งที่เบราว์เซอร์ทำเมื่อคุณมี

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

คือการตั้งค่าที่แท้จริงของ "onclick" ให้มีประสิทธิภาพเช่น:

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

นั่นคือสร้างฟังก์ชันที่คาดว่าจะมีพารามิเตอร์ "เหตุการณ์" (ดี IE ไม่มันเหมือนฟังก์ชันนิรนามธรรมดาธรรมดา ๆ มากกว่า)

ดูเหมือนว่าจะมีการปฏิบัติที่ไม่ดีมากมายที่ถูกโยนทิ้งไปรอบ ๆ คุณสมบัติตัวจัดการเหตุการณ์ แนวปฏิบัติที่ไม่ดีคือการไม่รู้และใช้คุณลักษณะที่มีอยู่ในจุดที่เหมาะสม แอตทริบิวต์เหตุการณ์เป็นมาตรฐาน W3C Documented โดยสมบูรณ์และไม่มีการปฏิบัติที่ไม่ดีเกี่ยวกับพวกเขา ไม่ต่างอะไรกับการวางรูปแบบอินไลน์ซึ่งเป็นเอกสาร W3C และสามารถใช้ประโยชน์ได้ในบางครั้ง ไม่ว่าคุณจะวางไว้ในแท็กสคริปต์หรือไม่ก็ตามระบบจะตีความในลักษณะเดียวกัน

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

วิธีที่ดีที่สุดที่จะตอบคำถามของคุณคือการมองเห็นในการกระทำ

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

ใน js

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

ดังที่คุณเห็นในconsoleกรณีที่คุณใช้โครเมี่ยมมันจะพิมพ์ฟังก์ชันที่ไม่ระบุตัวตนพร้อมกับออบเจ็กต์เหตุการณ์ที่ส่งผ่านแม้ว่าจะแตกต่างกันเล็กน้อยใน IE

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

ฉันเห็นด้วยกับบางประเด็นของคุณเกี่ยวกับตัวจัดการเหตุการณ์แบบอินไลน์ ใช่มันเขียนง่าย แต่ฉันไม่เห็นด้วยกับประเด็นของคุณเกี่ยวกับการต้องเปลี่ยนโค้ดในหลาย ๆ ที่ถ้าคุณจัดโครงสร้างโค้ดได้ดีคุณไม่ควรทำเช่นนี้

มันดูน่าสงสัยเพราะไม่มีการส่งคืนฟังก์ชันที่ชัดเจน!

เป็นฟังก์ชันที่ไม่ระบุชื่อที่แนบมากับเหตุการณ์การคลิกของวัตถุ

ทำไมคุณถึงทำแบบนี้สตีฟ?

ทำไมคุณถึงอยู่บนโลกนี้ ..... ไม่เป็นไรอย่างที่คุณได้กล่าวมามันเป็นแนวทางปฏิบัติที่ไม่ดีอย่างกว้างขวาง :)

ลองสิ่งนี้ในคอนโซล:

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

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

div.onclick

ใน Chrome จะแสดงสิ่งนี้:

function onclick(event) {
  alert(event)
}

... และคุณสมบัติที่ไม่ได้มาตรฐานnameของdiv.onclickคือ"onclick".

ดังนั้นจะไม่ระบุชื่อหรือไม่นั้นขึ้นอยู่กับคำจำกัดความของคุณว่า "ไม่ระบุชื่อ" เปรียบเทียบกับสิ่งที่ต้องการสตริงว่างอยู่var foo = new Function()ที่ไหนfoo.nameและfoo.toString()จะสร้างสิ่งที่ต้องการ

function anonymous() {

}