인라인 이벤트 모델, 기본 이벤트 모델

CODEDRAGON Development/JavaScript, jQuery, ...

반응형


 

 

인라인 이벤트 모델

·       기본 이벤트 모델

·       HTML 태그의 이벤트 속성에 이벤트 핸들러(실행 함수) 직접 입력하는 형태입니다.

·       HTML 페이지의 가장 기본적인 이벤트 연결 방법으로 번에 하나의 이벤트 리스너만을 가질 있습니다.

 

div태그에 onclick속성 추가

<html>

<head>

<script type="text/javascript">

     function whenClick(){

        alert('CLICK');

    }

</script>

</head>

<body onload="init();">

    <div id="header" onclick="whenClick();">클릭</div>

</body>

</html>

 

 

 

 

기본 이벤트 모델

<html>

<head>

<script type="text/javascript">

window.onload = function(){

var header = document.getElementById('header');

function whenClick(){

alert('CLICK');

}

header.onclick = whenClick; //이벤트 연결

};

</script>

</head>

<body>

<div id="header">클릭</div>

</body>

 

</html>