มีวิธีใดบ้างที่จะใช้onclickแอตทริบิวต์ html เพื่อเรียกใช้ฟังก์ชัน JavaScript มากกว่าหนึ่งฟังก์ชัน
คำตอบ:
onclick="doSomething();doSomethingElse();"แต่จริงๆแล้วคุณดีกว่าไม่ใช้onclickเลยและแนบตัวจัดการเหตุการณ์กับโหนด DOM ผ่านโค้ด Javascript ของคุณ นี้เป็นที่รู้จักกันจาวาสคริปต์ไม่สร้างความรำคาญ
onclick="" onClick=""มันเป็นความผิดพลาดทั่วไป
jsxไม่ได้htmlและคำถามนี้ยังไม่ได้ติดแท็กด้วยjsx
ลิงค์ที่มีการกำหนด 1 ฟังก์ชัน
<a href="#" onclick="someFunc()">Click me To fire some functions</a>การยิงหลายฟังก์ชั่นจาก someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}นี่เป็นรหัสที่จำเป็นถ้าคุณใช้ JavaScript เท่านั้นไม่ใช่ jQuery
var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);ฉันจะใช้element.addEventListenerวิธีการเชื่อมโยงไปยังฟังก์ชั่น จากฟังก์ชั่นนั้นคุณสามารถเรียกใช้หลายฟังก์ชั่นได้
ข้อได้เปรียบที่ฉันเห็นในการเชื่อมโยงเหตุการณ์ไปยังฟังก์ชั่นเดียวจากนั้นเรียกฟังก์ชั่นหลาย ๆ ฟังก์ชั่นคือคุณสามารถทำการตรวจสอบข้อผิดพลาดได้บ้างถ้ามีคำสั่งอื่นเพื่อให้บางฟังก์ชั่นเท่านั้น
แน่นอนว่าต้องผูกมัดผู้ฟังหลายคน
Short cutting with jQuery
$("#id").bind("click", function() {
alert("Event 1");
});
$(".foo").bind("click", function() {
alert("Foo class");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo" id="id">Click</div>ปฏิกิริยา ES6
<MenuItem
onClick={() => {
this.props.toggleTheme();
this.handleMenuClose();
}}
>var btn = document.querySelector('#twofuns');
btn.addEventListener('click',method1);
btn.addEventListener('click',method2);
function method2(){
console.log("Method 2");
}
function method1(){
console.log("Method 1");
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pramod Kharade-Javascript</title>
</head>
<body>
<button id="twofuns">Click Me!</button>
</body>
</html>คุณสามารถบรรลุ / โทรหนึ่งเหตุการณ์ด้วยวิธีการอย่างน้อยหนึ่งวิธี
คุณสามารถเพิ่มได้หลายรหัสเท่านั้นแม้ว่าคุณจะมีonclickแอททริบิวที่สองใน html ที่มันถูกละเว้นและclick2 triggeredไม่เคยถูกพิมพ์ออกมาคุณสามารถเพิ่มหนึ่งในการดำเนินการmousedownแต่นั่นก็เป็นเพียงวิธีแก้ปัญหา
ดังนั้นสิ่งที่ดีที่สุดที่จะทำคือเพิ่มพวกเขาด้วยรหัสใน:
var element = document.getElementById("multiple_onclicks");
element.addEventListener("click", function(){console.log("click3 triggered")}, false);
element.addEventListener("click", function(){console.log("click4 triggered")}, false);<button id="multiple_onclicks" onclick='console.log("click1 triggered");' onclick='console.log("click2 triggered");' onmousedown='console.log("click mousedown triggered");' > Click me</button>คุณต้องระวังเนื่องจากเหตุการณ์ต่างๆสามารถเกิดขึ้นได้และหากคุณต้องการเพิ่มหลายเหตุการณ์
นอกจากนี้หนึ่งสำหรับ JavaScript ที่บำรุงรักษาได้ใช้ฟังก์ชันชื่อ
นี่คือตัวอย่างของฟังก์ชันนิรนาม:
var el = document.getElementById('id');
// example using an anonymous function (not recommended):
el.addEventListener('click', function() { alert('hello world'); });
el.addEventListener('click', function() { alert('another event') });แต่ลองจินตนาการว่าคุณมีคู่ของพวกเขาแนบกับองค์ประกอบเดียวกันนั้นและต้องการลบหนึ่งในนั้น มันเป็นไปไม่ได้ที่จะลบฟังก์ชั่นที่ไม่ระบุชื่อเดียวออกจากฟังเหตุการณ์นั้น
คุณสามารถใช้ฟังก์ชั่นที่มีชื่อแทน:
var el = document.getElementById('id');
// create named functions:
function alertFirst() { alert('hello world'); };
function alertSecond() { alert('hello world'); };
// assign functions to the event listeners (recommended):
el.addEventListener('click', alertFirst);
el.addEventListener('click', alertSecond);
// then you could remove either one of the functions using:
el.removeEventListener('click', alertFirst);นอกจากนี้ยังช่วยให้รหัสของคุณง่ายต่อการอ่านและบำรุงรักษา โดยเฉพาะอย่างยิ่งถ้าฟังก์ชั่นของคุณมีขนาดใหญ่
คุณสามารถเขียนฟังก์ชั่นทั้งหมดเป็นหนึ่งและเรียกพวกเขาห้องสมุดเช่นRamdajsมีฟังก์ชั่นในการเขียนหลายฟังก์ชั่นเป็นหนึ่ง
<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>หรือคุณสามารถวางองค์ประกอบเป็นฟังก์ชันแยกในไฟล์ js และเรียกมันว่า
const newFunction = R.compose(fn1,fn2,fn3);
<a href="#" onclick="newFunction()">Click me To fire some functions</a>นี่เป็นทางเลือกของbrad anser - คุณสามารถใช้เครื่องหมายจุลภาคดังนี้
onclick="funA(), funB(), ..."แต่จะดีกว่าถ้าไม่ใช้วิธีนี้ - สำหรับโครงการขนาดเล็กคุณสามารถใช้ onclick เฉพาะในกรณีที่มีการเรียกใช้ฟังก์ชั่นเดียว (เพิ่มเติม: ปรับปรุงจาวาสคริปต์ที่ไม่สร้างความรำคาญ )