설정 방법: 1. HTML 태그의 이벤트 속성을 통해 설정합니다. 구문은 "on+event name="processing function""입니다. 2. "element.onclick"을 사용하여 설정합니다. 3. addEventListener()를 사용합니다. 설정하는 방법.
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
1. 인라인 바인딩
인라인 바인딩: HTML 태그의 이벤트 속성을 통해 바인딩, 바인딩 방법: on + 이벤트 이름, 트리거된 이벤트가 여기에 할당됩니다.
<button onclick="alert('123');">点击</button>
2. 이벤트 바인딩에 element.onclick 사용
이벤트 바인딩에 element.onclick 사용: DOM 요소를 작동하여 이벤트를 DOM에 바인딩합니다(양식 인트라 피어 바인딩 사용).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
alert("hello world");
}
}
</script>
</head>
<body>
<button id="btn">点击</button>
</body>
</html>3. addEventListener() 메소드를 사용하세요
3개의 매개변수(처리할 이벤트 이름, 이벤트 핸들러로서의 함수, 부울 값)를 허용하는 addEventListener() 메소드를 사용하세요. 이 부울 값은 true를 의미합니다. 이벤트 핸들러는 이벤트 캡처 단계 중에 호출되며, false인 경우 이벤트 버블링 단계 중에 호출됩니다. 일부 브라우저는 이벤트 캡처(예: IE8 이하)를 지원하지 않으므로 캡처 단계 중 이벤트 리스너 바인딩에 주의하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
alert("123");
},false);
}
</script>
</head>
<body>
<button id="btn">点击</button>
</body>
</html>이벤트 바인딩 해제 방법: 요소를 통해 제거이벤트리스너()를 호출하여 전달된 매개변수는 이벤트 핸들러를 추가할 때와 동일합니다. 두 번째 매개변수(이벤트 핸들러 함수)는 동일해야 합니다(포인팅 주소). 동일)이므로 이벤트 핸들러 함수를 변수에 저장해야 합니다. 익명 함수가 전달되면 이벤트 리스너를 제거할 수 없습니다.
참고: IE8 이하에서는 2개의 매개변수(이벤트 핸들러 이름, 이벤트 핸들러 함수)를 허용하는 이벤트 바인딩을 위해 attachmentEvent()를 사용합니다. 이 메소드에 의해 바인딩된 이벤트 핸들러는 버블링 단계에 있습니다. 이 메서드는 여러 이벤트 핸들러를 바인딩할 수 있지만 실행 순서는 바인딩 순서와 반대입니다.
【추천 학습: javascript 고급 튜토리얼】
위 내용은 자바스크립트에서 이벤트 수신을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
