자바스크립트 이벤트 바인딩 방법은 무엇입니까?
- 青灯夜游원래의
- 2021-09-08 18:15:295983검색
바인딩 방법: 1. "object.on 이벤트 이름 = function(){code}" 문을 사용하여 바인딩합니다. 2. "event source.addEventListener(이벤트 이름, 이벤트 처리 함수 이름, 캡처 여부)를 사용합니다. " 문 바인딩; 3. "onclick" 속성을 사용하여 HTML 태그에 이벤트를 바인딩합니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
1. 이벤트 소스의 이벤트 속성을 사용하여 핸들러 바인딩
HTML과 JS를 구분하는 방법 중 하나는 이벤트 소스의 이벤트 속성을 사용하여 이벤트 핸들러를 바인딩하는 것입니다. :
obj.on事件名 = 事件处理函数
형식의 obj가 이벤트 소스 객체입니다. 바인딩된 이벤트 프로그램은 일반적으로 익명 함수 또는 함수 이름의 정의문입니다.
이벤트 소스의 이벤트 속성 바인딩 핸들러 예:
oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
alert('hi')
};2. 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函数实现事件捕获
3. HTML 태그의 이벤트 속성을 사용하여 핸들러를 바인딩합니다.
HTML 태그의 이벤트 속성을 사용하여 이벤트 핸들러를 바인딩할 때, 이벤트 속성의 스크립트 코드는 함수 선언을 포함할 수 없지만 함수 호출 또는 세미콜론으로 구분된 일련의 스크립트 코드일 수 있습니다.
예: HTML 태그의 이벤트 속성을 사용하여 이벤트 핸들러를 바인딩합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML标签的事件属性绑定事件处理程序</title>
</head>
<body>
<input type="button" onclick="var name='张三';alert(name);" value="事件绑定测试"/>
</body>
</html>위 코드의 버튼은 클릭 이벤트의 대상 객체로, 이벤트 처리를 위해 라벨의 onclick 이벤트 속성을 통해 두 개의 스크립트 코드를 바인딩합니다. 위 코드를 크롬 브라우저에서 실행한 후, 사용자가 버튼을 클릭하면 경고 대화상자가 팝업됩니다.
【추천 학습: javascript 고급 튜토리얼】
위 내용은 자바스크립트 이벤트 바인딩 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!