반응형
1. 인라인 방식(inline)
이벤트를 html 요소의 속성으로 직접 지정하는 방식
html 코드와 스크립트가 섞여 사용, html 코드와 스크립트 코드는 분리가 유지보수에 용이하다고 하지만.. 우리 회사 같은 경우에는 굉~~ 장히 많이 사용되고 있는 방식 중 하나라 알아두면 요긴하게 쓰인다.
<html>
<body>
<button onclick="alert('Hello world');">Test</button>
</body>
</html>
2. 프로퍼티 방식(Property)
이벤트를 자바스크립트 코드에서 프로퍼티로 등록하여 사용하는 방식
html 코드와 자바스크립트가 섞여 사용되지 않음
하나의 이벤트 핸들러 프로퍼티엔 하나의 이벤트핸들러만 바인딩 가능
let testBtn = document.querySelector('#testBtn');
testBtn.onclick = function () { alert('Hello world1'); };
3. addEventListener() 방식(attachEvent() 방식)
하나 이상의 이벤트 핸들러를 바인딩 할 수 있다.
객체. addEventListener('이벤트 타입', 함수명[이벤트 전파 방식]);
- 이벤트 타입 : 바인딩될 이벤트의 문자열
- 함수명 : 이벤트 리스너
- 이벤트 전파 방식 : 캡쳐링 사용 여부
※ 사용 시 유의점
- IE 9 이상에서 동작한다. (IE 8 이하에는 attachEvent() 방식을 사용해야 한다.)
- 프로퍼티로 방식은 "on"이 붙은 이벤트 타입을 사용하지만, addEventListener() 방식은 "on"이 붙지 않은 이벤트 타입을 사용한다.
let testBtn2 = document.querySelector('#testBtn2');
function testFunc(){ alert('Hello world1');}
//testBtn2 요소에 2개의 이벤트를 설정할 수 있다.
testBtn2.addEventListener('click', testFunc);
testBtn2.addEventListener('click', function () {alert('Hello world2'); }); }
Reference
출처: https://goddaehee.tistory.com/269 [갓대희의 작은 공간]
반응형
'WEB > JavaScript' 카테고리의 다른 글
| [jQuery]$(".checkbox").attr("checked", true); VS $( '.checkbox' ).prop( 'checked',true); (0) | 2022.01.09 |
|---|