관리 메뉴

moozi

javascript 이벤트처리 방식 정리 본문

TIS_2016/HTML5_1기

javascript 이벤트처리 방식 정리

moozi 2016. 3. 25. 11:51

<!DOCTYPE html>

<html>

<body>


<p>Click "Try it" to execute the displayDate() function.</p>


<button id="myBtn">Try it</button>

<button onClick="displayDate()">Try it</button>

<button id="myBtn2">Try it</button>

<button id="myBtn3">Try it</button>


<p id="demo"></p>


<script>

// myBtn을 찾아서 click이벤트가 발생하면 diplayDate함수를 호출    

document.getElementById("myBtn").onclick = displayDate;

    

// EventListener를 이용해서 함수호출

document.getElementById("myBtn2").addEventListener("click",displayDate);


// EventListener를 이용해서 함수호출. 익명함수(콜백함수) 사용.

document.getElementById("myBtn3").addEventListener("click",function(){

   document.getElementById("demo").innerHTML = Date(); 

    

});

    

    

function displayDate() {

    document.getElementById("demo").innerHTML = Date();

}

</script>


</body>

</html> 



'TIS_2016 > HTML5_1기' 카테고리의 다른 글

3/28 오전수업 소스코드  (0) 2016.03.28
javascript 연습문제 풀이 1 ~ 8  (0) 2016.03.25
jquery 연습문제1  (0) 2016.03.24
gallery프로그램 예제  (0) 2016.03.24
AngularJS Custom Filter 예제  (0) 2016.03.23
Comments