클릭 이벤트에서 여러 js 함수를 호출하는 방법
- 藏色散人원래의
- 2018-12-15 16:03:1012178검색
js에서 클릭 이벤트에 대해 여러 함수를 호출하려면 addEventListener() 메서드를 사용할 수 있습니다. 즉, 버튼의 클릭 이벤트에서 여러 함수를 호출하거나 실행하려는 경우 JavaScript addEventListener() 메서드를 사용할 수 있습니다.
이제 특정 코드 예제를 기반으로 여러 함수를 호출하기 위해 js에서 클릭 이벤트를 구현하는 방법을 소개하겠습니다.
코드 예시는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>click事件中调用多个js函数的方法示例</title>
</head>
<body>
<button type="button" id="myBtn">点我</button>
<script>
// 定义自定义函数
function sayHello(){
alert("Hello World! sayHello() 函数执行成功!");
}
function sayHi(){
alert("Hi There! sayHi() 函数执行成功!");
}
// 选择按钮元素
var btn = document.getElementById("myBtn");
// 将事件侦听器分配给按钮
btn.addEventListener("click", sayHello);
btn.addEventListener("click", sayHi);
</script>
</body>
</html>위 코드에서는 sayHello()와 sayHi() 두 함수를 사용자 정의했습니다. 그런 다음 getElementById 메소드를 통해 버튼 요소를 가져옵니다. 그런 다음 addEventListener 메서드를 사용하여 동일한 이벤트, 즉 click 클릭 이벤트를 버튼 버튼에 할당하고 두 가지 다른 사용자 정의 함수를 호출합니다.
효과는 아래 그림과 같습니다.
참고: addEventListener() 메서드는 지정된 요소에 이벤트 핸들러를 추가하는 데 사용됩니다.
구문:
element.addEventListener(event, function, useCapture)
매개변수는 각각 다음을 나타냅니다.
event(필수)는 문자열을 나타내고 이벤트 이름을 지정합니다.
function(필수)은 이벤트가 발생했을 때 실행될 함수를 지정하는 것을 의미합니다.
이벤트 객체가 첫 번째 매개변수로 함수에 전달될 때. 이벤트 개체의 유형은 특정 이벤트에 따라 다릅니다.
useCapture(선택 사항). 지정된 이벤트가 캡처 단계 또는 버블링 단계에서 실행되는지 여부를 나타내는 부울 값입니다.
이 글은 클릭 이벤트에서 여러 js 함수를 호출하는 구현 방법에 대한 소개입니다. 또한 매우 간단합니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!
위 내용은 클릭 이벤트에서 여러 js 함수를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!