html 노드(엘리먼트)에 이벤트를 바인딩하는 방법은 간단하게 addEventListener()라는 함수로 해결할 수 있다. 그럼 동적으로 생성되는 태그에도 onchange, onclick 같은 함수들을 사용할 수 있게 된다. 우선 함수는 아래와 같이 사용하면 된다.
window.addEventListener("load", function(){
노드객체.addEventListener( "이벤트 종류", 함수 정의 );
});
예제를 통해 사용 방법을 알아보자.
아래와 같은 html 코드가 있고, test2 태그에 click 이벤트를 바인딩해본다.
<body>
<div>
<ul id="tutorial">
<li id="test1">test1</li>
<li id="test2">test2</li>
</ul>
</div>
</body>
해당 태그의 id 값은 test2이고 이를 가지고 해당 태그의 객체를 읽어 온다.
객체는 document.querySelector("#test2"); 와 같은 방법으로 읽어 온다.
querySelector 외에도 getElementById 를 사용해도 된다.
지금까지 웹 개발자로 근무하면서 대부분은 getElementById 를 사용했던 것 같다.
리턴 받은 객체에 addEventListener()를 지정해주면 아래와 같은 형태가 된다.
<script>
window.addEventListener("load", function(){
var liObject = document.querySelector("#test2");
liObject.addEventListener("click", function(e){
alert("뿌잉 뿌잉");
});
});
</script>
화면 :
결과 : test2 클릭하면 알럿 창이 뜬다.
위 케이스는 click 이벤트를 바인딩한 예시고, 이 외에도 다양한 이벤트를 바인딩할 수 있다.
특히 다이나믹하게 태그를 추가시키는 페이지에서 유용하게 사용할 수 있다.
끝~!
'[개발] Programming > Javascript' 카테고리의 다른 글
| 자바스크립트 Uncaught SyntaxError: missing ) after argument list 오류 해결 (0) | 2021.12.09 |
|---|---|
| 자바스크립트 노드(태그) 리스트 조회하는 함수 - querySelectorAll() (0) | 2021.07.27 |
| 자바스크립트 document.getElementById() - id로 dom 요소 찾기 (0) | 2021.07.20 |
| 마우스 스크롤 시 실행되는 jQuery 함수 - window scroll (0) | 2021.03.20 |
| 자바스크립트, 유입 경로의 url 알아내기 (이전 페이지 주소) (0) | 2020.05.31 |
댓글