자바스크립트에서 이벤트를 바인딩하는 방법은 무엇입니까?

이벤트 바인딩 방법: 1. "" 문을 사용하여 바인딩 2. "dom object.on 이벤트 이름 = 이벤트 핸들러" 문을 사용하여 바인딩 3 "이벤트 소스.addEventListener(이벤트 이름, 이벤트 핸들러, 캡처 여부)" 문을 사용하여 바인딩합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

Javascript에서는 이벤트를 바인딩하는 3가지 방법이 있습니다.

• HTML 태그의 이벤트 속성을 사용하여 핸들러를 바인딩합니다.

• 이벤트 소스의 이벤트 속성을 사용하여 핸들러를 바인딩합니다.

• 사용 addEventListener( ) 바인딩 핸들러

1. HTML 태그의 이벤트 속성 바인딩을 사용하여 핸들러를 바인딩합니다.

기본 구문:

<标签 on事件名="事件处理程序" />

예:

<input type=’button’ onclick=’display()’ />

샘플 코드:

위 내용은 일반적인 인라인 바인딩은 필요한 기능을 완성할 수 있지만 구조 + 스타일 + 동작을 동일한 태그에 바인딩하므로 나중에 유지 관리하는 데 도움이 되지 않습니다.

2. 이벤트 소스의 이벤트 속성 바인딩 핸들러를 사용하세요

기본 구문:

dom对象.on事件名 = 事件处理程序（通常是一个匿名函数）

위 질문을 동적 바인딩 아이디어를 통해 개선해 보세요.

3. addEventListener()를 사용하여 핸들러를 바인딩합니다

이벤트 소스 개체의 이벤트 속성을 사용하여 이벤트 핸들러를 바인딩하는 것은 간단하지만 단점이 있습니다. 이벤트는 하나의 핸들러만 바인딩할 수 있습니다. 및 후속 바인딩 특정 이벤트 핸들러는 이전에 바인딩된 이벤트 핸들러를 덮어씁니다. 실제 애플리케이션에서는 이벤트 소스의 이벤트가 여러 함수에 의해 처리될 수 있습니다.

이벤트 소스를 여러 함수를 사용하여 처리해야 하는 경우 이벤트 소스를 통해 addEventListener()(표준 브라우저용)를 호출하여 이벤트 처리 함수를 바인딩하여 이 요구 사항을 달성할 수 있습니다. 이벤트 소스가 메서드를 통해 여러 이벤트 함수를 바인딩하는 방식은 이벤트 소스 객체에 대해 addEventListener()를 여러 번 호출하는 것이며, 각 호출은 하나의 이벤트 처리 함수만 바인딩합니다.

addEventListener()는 표준 이벤트 모델의 메서드이며 모든 표준 브라우저에 유효합니다. 이벤트 핸들러를 바인딩하기 위해 addEvent Lister()를 사용하는 형식은 다음과 같습니다.

事件源.addEventListener(事件名称,事件处理程序,是否捕获);

매개변수 "이벤트 이름"은 "on"이 없는 이벤트 이름입니다. 매개변수 "캡처 여부"는 부울 값이며 기본값입니다. 값이 false이면 이벤트 버블링이 달성되고, true이면 이벤트 캡처가 달성됩니다.

addEventListener()를 여러 번 호출하면 여러 이벤트 핸들러를 이벤트 소스 객체의 동일한 이벤트 유형에 바인딩할 수 있습니다. 객체에 이벤트가 발생하면 이벤트에 바인딩된 모든 이벤트 처리 함수가 바인딩된 순서대로 순차적으로 호출되고 실행됩니다. 또한 addEventListener()에 의해 바인딩된 이벤트 처리 함수에서 이는 이벤트 소스를 가리킨다는 점에 유의해야 합니다.

addEventListener() 바인딩 핸들러 예:

document.addEventListener('click',fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener('click',fn2,true);//click事件绑定fn2函数实现事件捕获

[관련 권장 사항: javascript 학습 튜토리얼]

위 내용은 자바스크립트에서 이벤트를 바인딩하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!