JavaScript

자바스크립트 - event

CD2Y 2021. 9. 10.
반응형

See the Pen event by nilgi (@nilgi) on CodePen.

 

Event : HTML 페이지 반응
HTML 웹 페이지 로드할 때, HTML 입력 필드가 변경됐을 때, HTML 버튼을 클릭했을 때 코드를 실행
<element event='some JavaScript'> 또는 <element event="some JavaScript">


<button onclick="document.getElementById('e1').innerHTML=Date()">눌러</button>
<p id="e1"></p> // html의 요소를 변경

<button onclick="this.innerHTML=Date()">눌러보시게~</button> // 자체 요소 변경

<button onclick="todayDate()">눌러줘ㅠ-ㅠ</button>
<script>
  function todayDate() {
  document.getElementById("d1").innerHTML = Date(); // function 사용
}
</script>
<p id="d1"></p>


- event 종류
onchange : HTML 요소 변경
onclick : HTML 요소 클릭
onmouseover : HTML 요소 위에 마우스를 올렸을 때
onmouseout : 마우스가 HTML 요소에서 나올 때
onkeydown : 키를 누를 때
onload : 페이지가 로딩될 때

반응형