[자바스크립트] 이벤트 처리 onclick/addEventListener()

onclick

 

1) HTML 태그 안에서 이벤트 처리기 연결 

<div id="container"> 
	<img id="pic" src="pizza.png" alt="" onclick="fn_changePic( )">. 
</div> 


<script> 
  // pizza 누르면 chciken 사진으로 변경
  var pic = document.querySelector('#pic');

  function fn_changePic( ) {
      pic.src = "chicken.png";
  } 
</script>

2) DOM 요소 안에서 이벤트 처리기 연결 

<div id="container"> 
	<img id="pic" src="pizza.png" alt="">. 
</div> 


<script> 
  // pizza 누르면 chciken 사진으로 변경
  var pic = document.querySelector('#pic');
  pic.onclick = fn_changePic;

  function fn_changePic( ) {
      pic.src = "chicken.png";
  } 
</script>

 

addEventListener() 

한 요소에 여러 이벤트가 발생했을 때 동시에 처리 가능, document 객체나 window 객체 가능

 

변수.addEventListener("이벤트 유형", 함수, 캡처 여부)

*캡처 여부 : false(버블링)가 기본 값. true는 캡처링

 // pizza 마우스 오버시 chciken 사진으로 변경
var pic = document.querySelector('#pic');
pic.addEventListener("mouseover", fn_changePic, flase);
pic.addEventListener("mouseout", fn_OriPic, flase);


  function fn_changePic( ) {
      pic.src = "chicken.png";
  } 

  function fn_OriPic( ) {
      pic.src = "pizza.png";
  }