Câu trả lời:
onclick="doSomething();doSomethingElse();"Nhưng thực sự, tốt hơn hết là bạn không nên sử dụng onclickvà gắn trình xử lý sự kiện vào nút DOM thông qua mã Javascript của bạn. Điều này được gọi là javascript không phô trương .
onclick=""không onClick="". Đó là một lỗi rất phổ biến.
jsxkhông phải là htmlvà câu hỏi này chưa được gắn thẻjsx
Một liên kết với 1 chức năng được xác định
<a href="#" onclick="someFunc()">Click me To fire some functions</a>Bắn nhiều chức năng từ someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}
Đây là mã cần thiết nếu bạn chỉ sử dụng JavaScript chứ không phải jQuery
var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);
Tôi sẽ sử dụng element.addEventListenerphương thức để liên kết nó với một chức năng. Từ chức năng đó bạn có thể gọi nhiều chức năng.
Ưu điểm tôi thấy khi liên kết một sự kiện với một hàm duy nhất và sau đó gọi nhiều hàm là bạn có thể thực hiện một số kiểm tra lỗi, có một số câu lệnh if khác để một số hàm chỉ được gọi nếu đáp ứng một số tiêu chí nhất định.
Chắc chắn, chỉ đơn giản là ràng buộc nhiều người nghe nó.
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>Phản ứng 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>Bạn có thể đạt được / gọi một sự kiện bằng một hoặc nhiều phương thức.
Bạn có thể thêm nhiều chỉ bằng mã ngay cả khi bạn có onclickthuộc tính thứ hai trong html mà nó bị bỏ qua và click2 triggeredkhông bao giờ được in, bạn có thể thêm một hành động mousedownnhưng đó chỉ là một cách giải quyết.
Vì vậy, cách tốt nhất để làm là thêm chúng theo mã như trong:
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>Bạn cần cẩn thận vì các sự kiện có thể chồng chất, và nếu bạn thêm nhiều sự kiện, bạn có thể mất số lượng đơn hàng chúng đang chạy.
Một bổ sung, đối với JavaScript có thể duy trì là sử dụng một hàm được đặt tên.
Đây là ví dụ về hàm ẩn danh:
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') });Nhưng hãy tưởng tượng bạn có một vài trong số họ gắn liền với yếu tố đó và muốn loại bỏ một trong số họ. Không thể xóa một chức năng ẩn danh duy nhất khỏi trình nghe sự kiện đó.
Thay vào đó, bạn có thể sử dụng các hàm được đặt tên:
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);Điều này cũng giữ cho mã của bạn dễ đọc và bảo trì hơn rất nhiều. Đặc biệt nếu chức năng của bạn lớn hơn.
Bạn có thể kết hợp tất cả các hàm thành một và gọi chúng. Các thư viện như Ramdajs có chức năng kết hợp nhiều hàm thành một.
<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>hoặc bạn có thể đặt thành phần dưới dạng hàm riêng biệt trong tệp js và gọi nó
const newFunction = R.compose(fn1,fn2,fn3);
<a href="#" onclick="newFunction()">Click me To fire some functions</a>Đây là thay thế của brad anser - bạn có thể sử dụng dấu phẩy như sau
onclick="funA(), funB(), ..."tuy nhiên tốt hơn là KHÔNG sử dụng phương pháp này - đối với các dự án nhỏ, bạn chỉ có thể sử dụng onclick trong trường hợp có một chức năng gọi (thêm: cập nhật javascript không phô trương ).