JavaScript event listener

yeong ·2022년 11월 22일

js

목록 보기
46/49

이벤트(Event) - Event Listener
태그의 이벤트 속성의 속성값으로 이벤트 처리 함수를 호출하여 이벤트 처리 <br 다수의 이벤트 처리 함수 호출 가능

버튼1과 버튼2에대한 여러개의 이벤트처리

<button type="button" onclick="eventHandleOne(); eventHandleTwo();">이벤트 버튼-1</button>
<button type="button" id="btn">이벤트 버튼-2</button>
function eventHandleOne() {
		alert("eventHandleOne 함수의 이벤트 처리 명령 실행");
	}
	function eventHandleTwo() {
		alert("eventHandleTwo 함수의 이벤트 처리 명령 실행");
	}

태그를 검색하여 Element 객체로 반환받아 이벤트 속성에 이벤트 처리 함수 등록하여 이벤트 처리
> Element 객체의 이벤트 속성에하는 이벤트 처리 함수를 ✔하나만 등록 가능

document.getElementById("btn").onclick=function() {
		alert("첫번째 이벤트 처리 함수의 명령 실행");
	}
	document.getElementById("btn").onclick=function() {
		alert("두번째 이벤트 처리 함수의 명령 실행");
	}

>Node.addEventListener(type, callback [,capture]) : Node(Elemenet) 객체에서 발생된 이벤트에 대한 이벤트 처리 함수를 등록하는 메소드

> type : 이벤트 종류, callbakc : 이벤트 처리 함수, capture : false(기본) 또는 true
> Node(Elemenet) 객체에서 발생된 이벤트에 대한 다수의 이벤트 처리 함수를 등록하기 위해 사용

document.getElementById("btn").addEventListener("click", function() {
		alert("첫번째 이벤트 처리 함수의 명령 실행");
	}, false);
document.getElementById("btn").addEventListener("click", function() {
		alert("두번째 이벤트 처리 함수의 명령 실행");
	});

0개의 댓글