JavaScript - event handle

yeong ·2022년 11월 22일

js

목록 보기
42/49

이벤트(Event) - 이벤트 처리
태그(Element 객체)에서 발생되는 다양한 이벤트는 자바스트립트를 이용하여 이벤트 처리 명령을 작성하여 실행
1.HTML 태그의 이벤트 속성의 속성값으로 이벤트 처리 명령(이벤트 처리 함수 호출)을 작성하여 이벤트가 발생될 경우 이벤트 처리 명령이 실행되도록 처리
2.Element 객체(태그)에 이벤트 속성을 프로퍼티로 설정하여 이벤트 처리 함수를 등록하여 이벤트가 발생될 경우 이벤트 처리 함수가 호출되어 실행되도록 처리

HTML 태그의 onXXX 속성 : 태그에 발생되는 이벤트에 대한 속성으로 이벤트 처리 명령을 속성값으로 설정

태그의 이벤트 속성값으로 이벤트 처리 함수 호출 - javascript 접두사 생략 가능
ex 버튼버튼 1을 눌렀습니다");" 버튼

<button type="button" onclick="eventHandle();">버튼-1</button>
	<button type="button" id="btn">버튼-2</button>
	<script type="text/javascript">
	function eventHandle() {
		alert('버튼-1를 눌렀습니다.');
	}
	/*
	var btn=document.getElementById("btn");
	//Element 객체의 이벤트 속성으로 이벤트 처리 함수 등록
	// => Element 객체에서 이벤트가 발생될 경우 이벤트 처리 함수 자동 호출
	btn.onclick=function() {
		alert('버튼-2를 눌렀습니다.');
	}
	*/
	document.getElementById("btn").onclick=function() {
		alert('버튼-2를 눌렀습니다.');
	}

0개의 댓글