답변:
onclick="doSomething();doSomethingElse();"그러나 실제로 onclickJavascript 코드를 통해 이벤트 핸들러를 DOM 노드에 연결 하지 않고 이벤트 핸들러를 사용하지 않는 것이 좋습니다 . 이를 눈에 잘 띄지 않는 자바 스크립트라고 합니다.
onclick=""아닙니다 onClick="". 매우 흔한 실수입니다.
jsx아닙니다. html그리고이 질문은 태그로 설정되지 않았습니다jsx
1 개의 기능이 정의 된 링크
<a href="#" onclick="someFunc()">Click me To fire some functions</a>여러 기능을 발사 someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}
element.addEventListener메서드를 사용하여 함수에 연결합니다. 이 함수에서 여러 함수를 호출 할 수 있습니다.
이벤트를 단일 함수에 바인딩 한 다음 여러 함수를 호출 할 때의 이점은 오류 검사를 수행하고 if else 문을 사용하여 특정 기준을 충족하는 경우에만 일부 함수가 호출되도록 할 수 있다는 것입니다.
물론 여러 리스너를 바인딩하기 만하면됩니다.
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>하나 이상의 방법으로 하나의 이벤트를 달성 / 호출 할 수 있습니다.
onclickHTML에서 두 번째 속성이 무시되고 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);또한 코드를보다 쉽게 읽고 유지 관리 할 수 있습니다. 특히 기능이 더 큰 경우.
이것은 brad anser의 대안입니다 -다음과 같이 쉼표를 사용할 수 있습니다
onclick="funA(), funB(), ..."그러나이 접근법을 사용하지 않는 것이 좋습니다. 작은 프로젝트의 경우 함수 호출이 하나 인 경우에만 onclick을 사용할 수 있습니다 (추가 : 눈에 띄지 않는 javascript 업데이트 ).