ฉันเคยได้ยินมาหลายครั้งแล้วว่าการใช้เหตุการณ์ JavaScript เช่นonClick()ใน HTML เป็นการปฏิบัติที่ไม่ดีเพราะไม่ดีต่อความหมาย ฉันต้องการทราบว่าข้อเสียคืออะไรและจะแก้ไขโค้ดต่อไปนี้ได้อย่างไร?

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

คุณอาจกำลังพูดถึงJavascript ที่ไม่สร้างความรำคาญซึ่งจะมีลักษณะดังนี้:

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

ด้วยตรรกะในไฟล์ javascript ส่วนกลางที่มีลักษณะดังนี้:

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

ข้อดีคือ

• พฤติกรรม (Javascript) ถูกแยกออกจากการนำเสนอ (HTML)
• ไม่มีการผสมภาษา
• คุณกำลังใช้กรอบงานจาวาสคริปต์เช่น jQuery ที่สามารถจัดการปัญหาข้ามเบราว์เซอร์ส่วนใหญ่ให้คุณได้
• คุณสามารถเพิ่มลักษณะการทำงานให้กับองค์ประกอบ HTML จำนวนมากพร้อมกันได้โดยไม่ต้องทำซ้ำรหัส

หากคุณใช้ jQuery แล้ว:

HTML:

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

JS:

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

สิ่งนี้มีประโยชน์ในการทำงานโดยไม่มี JS หรือหากผู้ใช้คลิกลิงก์ตรงกลาง

นอกจากนี้ยังหมายความว่าฉันสามารถจัดการป๊อปอัปทั่วไปได้โดยเขียนใหม่อีกครั้งเพื่อ:

HTML:

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

JS:

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

สิ่งนี้จะช่วยให้คุณสามารถเพิ่มป๊อปอัปลงในลิงก์ใดก็ได้โดยเพียงแค่ให้คลาสป๊อปอัป

แนวคิดนี้สามารถขยายออกไปได้มากขึ้นเช่น:

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

ตอนนี้ฉันสามารถใช้รหัสบิตเดียวกันสำหรับป๊อปอัปจำนวนมากบนไซต์ทั้งหมดของฉันได้โดยไม่ต้องเขียนสิ่งที่ onclick! ใช่สำหรับการนำกลับมาใช้ใหม่!

นอกจากนี้ยังหมายความว่าหากในภายหลังฉันตัดสินใจว่าป๊อปอัปเป็นการปฏิบัติที่ไม่ดี (ซึ่งก็คือ!) และฉันต้องการแทนที่ด้วยหน้าต่างโมดอลสไตล์ไลท์บ็อกซ์ฉันสามารถเปลี่ยน:

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

ถึง

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

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

ด้วยแอปพลิเคชัน JavaScript ที่มีขนาดใหญ่มากโปรแกรมเมอร์กำลังใช้การห่อหุ้มโค้ดมากขึ้นเพื่อหลีกเลี่ยงการก่อมลพิษในขอบเขตทั่วโลก และเพื่อให้ฟังก์ชันพร้อมใช้งานสำหรับการดำเนินการ onClick ในองค์ประกอบ HTML ฟังก์ชันจะต้องอยู่ในขอบเขตส่วนกลาง

คุณอาจเคยเห็นไฟล์ JS ที่มีลักษณะเช่นนี้ ...

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

สิ่งเหล่านี้เป็นนิพจน์ฟังก์ชันที่เรียกใช้ทันที (IIFE) และฟังก์ชันใด ๆ ที่ประกาศภายในจะมีอยู่ภายในขอบเขตภายในเท่านั้น

หากคุณประกาศfunction doSomething(){}ภายใน IIFE ให้ทำการdoSomething()ดำเนินการ onClick ขององค์ประกอบในหน้า HTML ของคุณคุณจะได้รับข้อผิดพลาด

ในทางกลับกันถ้าคุณสร้าง eventListener สำหรับองค์ประกอบนั้นภายใน IIFE นั้นและโทรdoSomething()เมื่อผู้ฟังตรวจพบเหตุการณ์การคลิกคุณก็ทำได้ดีเพราะผู้ฟังและdoSomething()แบ่งปันขอบเขตของ IIFE

สำหรับเว็บแอปเล็ก ๆ น้อย ๆ ที่มีโค้ดเพียงเล็กน้อยก็ไม่สำคัญ แต่ถ้าคุณปรารถนาที่จะเขียนโค้ดเบสที่มีขนาดใหญ่และดูแลรักษาonclick=""ได้เป็นนิสัยที่คุณควรหลีกเลี่ยง

ไม่ดีเนื่องจากสาเหตุหลายประการ:

• มันผสมรหัสและมาร์กอัป
• รหัสที่เขียนด้วยวิธีนี้จะต้องผ่าน eval
• และทำงานในขอบเขตทั่วโลก

สิ่งที่ง่ายที่สุดคือการเพิ่มnameแอตทริบิวต์ให้กับ<a>องค์ประกอบของคุณจากนั้นคุณสามารถทำได้:

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

แม้ว่าแนวทางปฏิบัติที่ดีที่สุดในปัจจุบันคือการใช้idแทนชื่อและใช้addEventListener()แทนการใช้onclickเนื่องจากช่วยให้คุณสามารถผูกฟังก์ชันต่างๆเข้ากับเหตุการณ์เดียวได้

มีสาเหตุสองสามประการ:

1. ฉันพบว่ามันช่วยในการบำรุงรักษาเพื่อแยกมาร์กอัปเช่น HTML และสคริปต์ฝั่งไคลเอ็นต์ ตัวอย่างเช่นjQueryทำให้ง่ายต่อการเพิ่มตัวจัดการเหตุการณ์โดยใช้โปรแกรม

2. ตัวอย่างที่คุณให้อาจใช้ไม่ได้ใน User Agent ที่ไม่รองรับ javascript หรือปิด javascript แนวคิดของการเพิ่มประสิทธิภาพแบบโปรเกรสซีฟจะส่งเสริมให้มีการเชื่อมโยงหลายมิติแบบธรรมดา/map/สำหรับตัวแทนผู้ใช้โดยไม่ต้องใช้จาวาสคริปต์จากนั้นเพิ่มตัวจัดการการคลิก prgramatically สำหรับตัวแทนผู้ใช้ที่สนับสนุนจาวาสคริปต์

ตัวอย่างเช่น:

มาร์กอัป:

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

Javascript:

$(document).ready(function(){

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

})

การแก้ไข

วิธีการใช้ JavaScript ที่ไม่สร้างความรำคาญเป็นสิ่งที่ดีใน PAST โดยเฉพาะอย่างยิ่งการเชื่อมโยงตัวจัดการเหตุการณ์ใน HTML ถือเป็นการปฏิบัติที่ไม่ดี (ส่วนใหญ่เป็นเพราะonclick events run in the global scope and may cause unexpected errorสิ่งที่YiddishNinjaกล่าวถึง)

อย่างไรก็ตาม ...

ขณะนี้ดูเหมือนว่าแนวทางนี้จะล้าสมัยเล็กน้อยและต้องการการอัปเดต หากใครบางคนต้องการเป็นนักพัฒนาส่วนหน้ามืออาชีพและเขียนแอปที่มีขนาดใหญ่และซับซ้อนเขาจำเป็นต้องใช้เฟรมเวิร์กเช่น Angular, Vue.js เป็นต้นอย่างไรก็ตามเฟรมเวิร์กนั้นมักจะใช้ (หรืออนุญาตให้ใช้) เทมเพลต HTMLที่ตัวจัดการเหตุการณ์ถูกผูกไว้ ในโค้ดเทมเพลต html โดยตรงและมีประโยชน์ชัดเจนและมีประสิทธิภาพมากเช่นในเทมเพลตเชิงมุมมักจะเขียนว่า:

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

ใน js / html แบบ raw จะมีค่าเท่ากัน

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

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

แล้วปัญหาอยู่ที่ไหน?

ปัญหาคือเมื่อโปรแกรมเมอร์มือใหม่ที่มักจะได้ยินว่า html-onclick นั้นไม่ดีและผู้ที่ใช้งานอยู่เสมอbtn.addEventListener("onclick", ... )ต้องการใช้เฟรมเวิร์กกับเทมเพลต ( addEventListenerมีข้อเสียเช่นกัน - หากเราอัปเดต DOM ในรูปแบบไดนามิกโดยใช้innerHTML=(ซึ่งค่อนข้างเร็ว ) - เราจะคลายเหตุการณ์ต่างๆ ตัวจัดการผูกในลักษณะนั้น) จากนั้นเขาจะต้องเผชิญกับบางสิ่งบางอย่างเช่นนิสัยที่ไม่ดีหรือแนวทางที่ไม่ถูกต้องในการใช้งานเฟรมเวิร์ก - และเขาจะใช้เฟรมเวิร์กในทางที่แย่มาก - เพราะเขาจะเน้นที่ js-part เป็นหลักและไม่มีในส่วนของเทมเพลต (และสร้างความไม่ชัดเจนและยากที่จะรักษา รหัส). ในการเปลี่ยนนิสัยนี้เขาจะเสียเวลามาก (และอาจต้องใช้โชคและครู)

ดังนั้นในความคิดของฉันจากประสบการณ์กับนักเรียนของฉันจะดีกว่าสำหรับพวกเขาถ้าพวกเขาใช้ html-handlers-bind ในตอนเริ่มต้น อย่างที่ฉันพูดมันเป็นเรื่องจริงที่ตัวจัดการจะถูกเรียกในขอบเขตทั่วโลก แต่ขั้นตอนนี้นักเรียนมักจะสร้างแอปพลิเคชันขนาดเล็กซึ่งง่ายต่อการควบคุม ในการเขียนแอปพลิเคชันที่ใหญ่ขึ้นพวกเขาเลือกเฟรมเวิร์กบางอย่าง

แล้วจะทำอย่างไร?

เราสามารถอัปเดตวิธีการ JavaScript ที่ไม่สร้างความรำคาญและอนุญาตตัวจัดการเหตุการณ์ที่เชื่อมโยง (ในที่สุดก็มีพารามิเตอร์อย่างง่าย) ใน html (แต่มีเพียงตัวจัดการการผูกเท่านั้น - ไม่ได้ใส่ตรรกะลงใน onclick เหมือนใน OP quesiton) ดังนั้นในความคิดของฉันใน raw js / html สิ่งนี้ควรได้รับอนุญาต

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

หรือ

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>

แต่ไม่ควรอนุญาตตัวอย่างด้านล่าง

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

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

ความเป็นจริงเปลี่ยนไปมุมมองของเราก็ควรเช่นกัน

เป็นกระบวนทัศน์ใหม่ที่เรียกว่า " จาวาสคริปต์ที่ไม่สร้างความรำคาญ " "มาตรฐานเว็บ" ในปัจจุบันระบุว่าจะแยกฟังก์ชันการทำงานและการนำเสนอออกจากกัน

ไม่ใช่ "แนวทางปฏิบัติที่ไม่ดี" แต่เป็นเพียงมาตรฐานใหม่ส่วนใหญ่ที่ต้องการให้คุณใช้ตัวฟังเหตุการณ์แทน JavaScript แบบซับใน

นอกจากนี้นี่อาจเป็นเรื่องส่วนตัว แต่ฉันคิดว่ามันง่ายกว่ามากที่จะอ่านเมื่อคุณใช้ตัวฟังเหตุการณ์โดยเฉพาะอย่างยิ่งถ้าคุณมีคำสั่ง JavaScript มากกว่า 1 คำสั่งที่คุณต้องการเรียกใช้

คำถามของคุณจะทำให้เกิดการอภิปรายที่ฉันคิดว่า แนวคิดทั่วไปคือควรแยกพฤติกรรมและโครงสร้างออกจากกัน นอกจากนี้ afaik ตัวจัดการการคลิกแบบอินไลน์จะต้องevalนำไปสู่ ​​'กลายเป็น' ฟังก์ชันจาวาสคริปต์ที่แท้จริง และมันค่อนข้างเชย แต่นั่นเป็นข้อโต้แย้งที่ค่อนข้างสั่นคลอน อืมอ่านเกี่ยวกับเรื่องนี้@ quirksmode.org

• เหตุการณ์ onclick ทำงานในขอบเขตส่วนกลางและอาจทำให้เกิดข้อผิดพลาดที่ไม่คาดคิด
• การเพิ่มเหตุการณ์ onclick ไปยังองค์ประกอบ DOM จำนวนมากจะทำให้
  ประสิทธิภาพและประสิทธิภาพช้าลง

อีกสองเหตุผลที่ไม่ควรใช้เครื่องจัดการแบบอินไลน์:

พวกเขาอาจต้องการคำพูดที่น่าเบื่อหน่ายปัญหา

กำหนดสตริงที่กำหนดเองหากคุณต้องการสร้างตัวจัดการแบบอินไลน์ที่เรียกใช้ฟังก์ชันด้วยสตริงนั้นสำหรับวิธีแก้ปัญหาทั่วไปคุณจะต้องออกจากตัวคั่นแอตทริบิวต์ (ด้วยเอนทิตี HTML ที่เกี่ยวข้อง) และคุณจะ ต้องหลีกเลี่ยงตัวคั่นที่ใช้สำหรับสตริงภายในแอตทริบิวต์ดังต่อไปนี้:

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

มันน่าเกลียดอย่างไม่น่าเชื่อ จากตัวอย่างด้านบนหากคุณไม่ได้แทนที่'s จะทำให้เกิด SyntaxError เนื่องจากalert('foo'"bar')ไม่ใช่ไวยากรณ์ที่ถูกต้อง หากคุณไม่ได้แทนที่"s เบราว์เซอร์จะตีความว่าเป็นจุดสิ้นสุดของonclickแอตทริบิวต์ (คั่นด้วย"s ด้านบน) ซึ่งอาจไม่ถูกต้องเช่นกัน

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

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

ไม่ดีกว่านี้มากเหรอ?

ห่วงโซ่ขอบเขตของตัวจัดการแบบอินไลน์นั้นแปลกมาก

คุณคิดว่ารหัสต่อไปนี้จะบันทึกอะไร

let disabled = true;

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

ลองใช้เรียกใช้ตัวอย่างข้อมูล อาจไม่ใช่สิ่งที่คุณคาดหวัง ทำไมมันถึงสร้างสิ่งที่มันทำ? เนื่องจากตัวจัดการแบบอินไลน์ทำงานภายในwithบล็อก รหัสด้านบนอยู่ภายในสาม withช่วงตึก: หนึ่งสำหรับdocumentหนึ่งสำหรับหนึ่งสำหรับ<form>และหนึ่งสำหรับ<button>:

let disabled = true;

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

เนื่องจากdisabledเป็นคุณสมบัติของปุ่มการอ้างอิงdisabledภายในตัวจัดการแบบอินไลน์จะอ้างถึงคุณสมบัติของปุ่มไม่ใช่disabledตัวแปรภายนอก สิ่งนี้ค่อนข้างสวนทางกับธรรมชาติ withมีปัญหามากมาย: อาจเป็นที่มาของจุดบกพร่องที่สับสนและทำให้โค้ดช้าลงอย่างมาก ไม่อนุญาตเลยแม้แต่น้อยในโหมดเข้มงวด แต่ด้วยตัวจัดการแบบอินไลน์คุณจะถูกบังคับให้เรียกใช้โค้ดผ่านwiths - ไม่ใช่แค่ผ่านตัวเดียวwithแต่ต้องใช้หลายwithตัว มันบ้ามาก

withไม่ควรใช้ในโค้ด เนื่องจากตัวจัดการแบบอินไลน์ต้องการโดยปริยายwithพร้อมกับพฤติกรรมที่สับสนทั้งหมดจึงควรหลีกเลี่ยงตัวจัดการแบบอินไลน์เช่นกัน