온클릭 이벤트에서 여러 JavaScript 함수를 호출하려면 어떻게 해야 합니까?
를 사용하는 방법은 없습니까?onclick두 개 이상의 자바스크립트 함수를 호출하는 html 속성
onclick="doSomething();doSomethingElse();"
하지만 정말이지, 넌 안 쓰는 게 나아.onclick이벤트 핸들러를 Javascript 코드로 DOM 노드에 접속합니다.이것은 눈에 띄지 않는 javascript라고 알려져 있습니다.
1개의 함수가 정의된 링크
<a href="#" onclick="someFunc()">Click me To fire some functions</a>
에서 여러 함수를 기동하다someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}
jQuery가 아닌 JavaScript만 사용하는 경우 필요한 코드입니다.
var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);
함수에 링크하는 방법을 사용합니다.이 함수에서 여러 함수를 호출할 수 있습니다.
이벤트를 단일 함수에 바인드한 후 여러 함수를 호출할 때 얻을 수 있는 이점은 오류 체크를 수행할 수 있으며, 일부 함수가 특정 조건을 만족할 때만 호출되도록 if 문을 설정할 수 있다는 것입니다.
네, 여러 청취자를 연결하기만 하면 됩니다.
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>하나 이상의 메서드를 사용하여 하나의 이벤트를 달성/호출할 수 있습니다.
또한 유지관리 가능한 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);
또한 코드를 읽고 유지하기가 훨씬 더 쉬워집니다.특히 당신의 기능이 더 큰 경우.
const callDouble = () =>{
increaseHandler();
addToBasket();
}
<button onClick={callDouble} > Click </button>
나에게는 효과가 있어, 하나의 함수로 복수의 함수를 호출할 수 있다.단일 함수를 호출합니다.
두 번째 코드가 있더라도 코드로만 여러 개를 추가할 수 있습니다.onclickhtml에서 attribute는 무시됩니다.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>이벤트가 누적될 수 있으므로 주의해야 하며, 많은 이벤트를 추가할 경우 이벤트가 실행되는 순서를 느슨하게 셀 수 있습니다.
리액트 기능 컴포넌트
<Button
onClick={() => {
cancelAppointment();
handlerModal();
}}
>
Cancel
</Button>
다음은 클릭 이벤트를 .js 파일의 DOM 노드에 첨부하는 다른 답변입니다.기능도 있고callAll각 함수를 호출하기 위해 사용됩니다.
const btn = document.querySelector('.btn');
const callAll =
(...fns) =>
(...args) =>
fns.forEach(fn => fn?.(...args));
function logHello() {
console.log('hello');
}
function logBye() {
console.log('bye');
}
btn.addEventListener('click',
callAll(logHello, logBye)
); <button type="button" class="btn">
Click me
</button>모든 기능을 하나로 구성해서 호출할 수 있습니다.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(), ..."
그러나 이 접근법은 사용하지 않는 것이 좋습니다. 소규모 프로젝트의 경우 한 함수가 호출된 경우에만 클릭할 수 있습니다(more: 최신 javascript 업데이트).
function funA() {
console.log('A');
}
function funB(clickedElement) {
console.log('B: ' + clickedElement.innerText);
}
function funC(cilckEvent) {
console.log('C: ' + cilckEvent.timeStamp);
}div {cursor:pointer}<div onclick="funA(), funB(this), funC(event)">Click me</div>언급URL : https://stackoverflow.com/questions/3910736/how-to-call-multiple-javascript-functions-in-onclick-event
'it-source' 카테고리의 다른 글
| 권장되는 Python 메모리 프로파일러는 무엇입니까? (0) | 2023.01.03 |
|---|---|
| 어레이 값이 존재하는지 확인하는 방법 (0) | 2023.01.03 |
| Vuetify에서 프리펜드 아이콘으로 정의된 아이콘 스타일링 (0) | 2023.01.03 |
| "require"(Firefox 애드온 SDK)의 WebStorm 경고 "Unresolved function or method"(해결되지 않은 함수 또는 메서드)를 수정하려면 어떻게 해야 합니까? (0) | 2023.01.03 |
| 업데이트 중 Composer가 중단됨 (0) | 2023.01.03 |