1. inline 방식
가장 쉽게 쓸 수 있는 방식.
버튼을 '클릭' 했을 때 이벤트가 발생하기 때문에 onClick 핸들러를 사용한다.
<script>
function check() {
alert('Hello World');
}
</script>
</head>
<body>
<input type="button" id="btn" value="확인" onClick="check()">
</body>
2. property 방식
tag=element
이벤트 타겟이 되는 객체의 프로퍼티에 이벤트를 등록하는 방식이다.
<body>
<input type="button" id="btn" value="확인">
<script>
var btn=document.getElementById('btn');
btn.onclick=function(){
alert('Hello World');
}
</script>
3. 표준 이벤트 모델 방식 (dom level2 방식)
한 객체에 여러 이벤트를 등록할 수 있다.
W3C의 표준 방식을 따르는 브라우저(크롬, 파이어폭스, 사파리...)와
비표준 방식으로 동작하는 IE8 이하 버전 브라우저 모두 동작할 수 있도록 구분자 if ~ else if 문으로 작성해야 한다.
<body>
<input type="button" id="btn" value="확인">
<script>
var btn = document.getElementById('btn');
function btnEvent1() {
alert('Hello world 1');
}
function btnEvent2() {
alert('Hello world 2');
}
if (btn.addEventListener) { // 표준 방식 브라우저
btn.addEventListener('click', btnEvent1); // 복수개의 이벤트 등록 가능
btn.addEventListener('click', btnEvent2);
} else if (btn.attachEvent) { // 비표준 방식브라우저
btn.attachEvent('onclick', btnEvent1); // 복수개의 이벤트 등록 가능
btn.attachEvent('onclick', btnEvent2);
}
</script>
</body>
'웹표준 > 자바스크립트' 카테고리의 다른 글
| History 객체를 이용한 페이지 정보 저장 (0) | 2022.08.16 |
|---|---|
| Window 객체를 이용한 팝업 생성하기 (0) | 2022.08.16 |
| 이벤트와 이벤트 핸들러 (0) | 2022.08.16 |
| Math 객체 (0) | 2022.08.12 |
| String 객체 (0) | 2022.08.12 |