Onclick 이벤트에서 여러 JavaScript 함수 호출
우리는onclick속성에 값으로 전달 된 특정 함수를 트리거하는 javascript의onclick이벤트에 대해 잘 알고 있습니다. HTML의Document Object Model(DOM) 이벤트는<br>,<head>,<html>,<iframe>,<와 같은 일부를 제외한 거의 모든 HTML 요소에 대해 지원됩니다. meta>,<param>,<script>,<style>또는<title>. 일반적으로<div>,<button>,<li>,<span>,<a>등과 같은 html 태그에 사용됩니다. 그러나 하나 이상의 함수를 어떻게 호출합니까? <div>,<li>또는<button>을 클릭합니다. 다음은이를 수행하는 몇 가지 방법입니다.
onclick매개 변수에 값으로 함수 전달- 눈에 거슬리지 않는 JavaScript 사용
&&및||사용 연산자
onclick매개 변수에 값으로 함수 전달
onclick속성을 사용하는 가장 일반적인 방법은 함수를onclick에 값으로 할당하는 것입니다. 일반적으로 HTML 태그 내의 GUI 코드로 작성합니다. 여러 함수를 값으로 전달하려면 해당 태그의onclick속성에 세미콜론으로 구분하여 나열하십시오. 이에 대한 구문은 다음과 같습니다.
onclick = 'functionA(); functionB();'
두 기능 모두 차례로 실행됩니다. 예를 들어,functionA()및functionB()함수와 함께 다음 코드를 사용하는 경우 결과는 값에 언급 된 순서대로 두 함수를 순차적으로 실행합니다.
<div id="output" onclick="functionA(); functionB();"></div>
function functionA() {
for (let i = 0; i < 5; i++) {
console.log(i + ' Mars is a planet');
}
}
function functionB() {
for (let i = 0; i < 5; i++) {
console.log(i + ' The sky is blue');
}
}
Ouput :
0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue
비고
onclick으로 여러 기능을 실행하는 것은 모든 웹 브라우저와 대부분의 HTML 요소에서 지원됩니다. 다중 함수 호출의 깔끔하고 간결한 방법입니다.- 함수 실행은 순차적입니다. 따라서 그에 따라 함수를 나열하여 메서드 호출을 수행해야하는 순서를 계획 할 수 있습니다.
- 함수 이름 뒤에 세미콜론을 사용하는 대신 쉼표로 구분할 수도 있습니다. 이는
onclick = "function1(), function2()"도 유효한 구문임을 의미합니다. onclick이벤트에 전달되는 여러 기능을 사용하는 데는 단점이 있습니다. 예외로 인해 매개 변수로 전달 된 메소드가 실패하면 전체 체인이 끊어집니다. 그리고 그 뒤에 오는 모든 기능은 실행되지 않습니다.- 태그에서
onclick을 사용하면 코드를 읽을 수 있습니다. 우리는 DOM을 조작하지 않습니다. 그것은 우리가 HTML에서 함수를 정적으로 지정한다는 것을 의미합니다. 따라서 런타임에 DOM 요소의onclick이벤트에함수을 추가하지 않습니다. 브라우저는 HTML을 파싱하고 파싱 단계에서 클릭 이벤트를 연결할 수 있습니다.
눈에 거슬리지 않는 JavaScript 사용
JavaScript의onclick에서 함수를 전달하는 또 다른 방법은 JavaScript 코드에onclick리스너를 추가하는 것입니다. 이 방법에서는 대상 요소를 찾고 함수를 해당 요소의onclick이벤트에 연결합니다. 눈에 거슬리지 않는접근 방식은 JavaScript 이벤트를 js 코드로 유지하고 HTML에는 정적 페이지 만 포함하는 프로그래밍 방법입니다 (자세한 내용은 참조). 다음은 클릭 이벤트에서 여러 함수를 호출하는 눈에 거슬리지 않는 방법입니다.
let element = document.getElementById('output');
element.addEventListener('click', functionA);
element.addEventListener('click', functionB);
출력:
0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue
비고
- 함수는 순차적으로 실행되지만 종속되지 않습니다. 따라서 함수 실행에 실패하더라도
onclick="functionA(), functionB()"의 경우와 달리 나머지 함수는 차단되지 않습니다. - 이 방법으로 여러 기능을 추가 할 수 있습니다. 이미 추가 된 함수를 동적으로 제거하려면
removeEventListener를 사용해야합니다. 구문은 다음과 같습니다.
element.removeEventListener('click', alertFirst);
- HTML은 HTML 요소의
onclick과 연결된 기능을 표시하지 않기 때문에 기능을 디버그하기가 어렵습니다. 메소드는 JavaScript 코드를 컴파일하는 동안 런타임에onclick이벤트에 매핑됩니다. - 런타임에
onclick을 추가하는이 방법은 런타임의 컴파일 단계에서 연관이 이루어 지므로 비즈니스 로직을 기반으로 함수를 스마트하게 실행할 수있는 유연성을 제공합니다.
&&및||사용 연산자
하나는&&및||로 구분 된 여러 기능을 포함 할 수 있습니다. 연산자. 함수에는 부울 반환 유형이 있어야합니다. 일반적으로 일부 조건을 결정한 다음 의도 한 기능을 실행해야 할 때이 방법을 사용합니다. 이러한 조건에 복잡하거나 긴 논리적 검사가 필요한 경우 이러한 조건을 함수로 만들고 js 코드 내에 유지하여 HTML을 가늘고 읽기 쉽게 만드는 것이 좋습니다. 다음 코드는 사용에 대해 자세히 설명합니다.
<div id="output" onclick="isValidPage(pageNum) && fetchPageDetails(pageNum)"></div>
function isValidPage(pageNumber) {
let pageNum = parseInt(pageNumber);
let maxPagesCount = 10;
let isValidPageNumber = false;
if (!isNaN(pageNum)) {
if (pageNum > 1 && pageNum < maxPagesCount) {
isValidPageNumber = true;
}
}
return isValidPageNumber;
}
function fetchPageDetails(pageNumber) {
// Call Backend service to get the detils
}
위 코드에서fetchPageDetails()함수는isValidPage()함수가true를 반환 한 후에 만 호출됩니다. 본질적으로&&연산자는pagenumber가 유효한 경우에만fetchPageDetails()함수가 실행되도록합니다.
비고
- 이 방법에서는 함수의 실행이 순차적입니다.
&&및||를 사용하여 로직을 코드로 따릅니다. 연산자. 예외로 인해 메서드가 실패하면 나머지 함수를 실행하지 않습니다. - 부울 반환 유형 또는 코드에 사용 된 논리 연산자와 일치하는 유형이있는 함수가있는 경우이 방법을 사용할 수 있습니다.
- HTML 요소의 클릭 속성에 함수를 지정하므로이 메서드는 여러 함수를 선언하는 정적 방법입니다. 우리는 어떤 런타임 연관도 만들지 않습니다.