j13. 자바스크립트 이벤트

자바스크립트 이벤트

HTML 이벤트 (HTML events) 는 HTML 태그에 발생하는 "어떤 것 (things)" 인데, 

자바스크립트가 HTML 페이지에 사용되는 경우에는, 자바스크립트가 이러한 이벤트와 "상호 작용 (react)" 할 수 있습니다.

---

HTML 이벤트는 브라우저가 한 것 이거나, 사용자가 한 어떤 것일 수 있습니다.

HTML 이벤트에는 다음과 같은 것이 있습니다.

	HTML 웹 페이지가 로딩을 끝냈다.
	HTML 입력 필드 (input field) 가 변경되었다.
	HTML 버튼 (button) 이 클릭 되었다.

이벤트가 발생하였을 때, 무엇인가 해야 할 때가 있습니다.

자바스크립트는 이벤트가 감지 되었을 때, 코드를 실행하도록 해줍니다.

HTML 에서는 이벤트 핸들러 속성 (event handler attributes) 을, 자바스크립트 코드 (JavaScript code) 와 함께, HTML 태그에 추가하여, 사용할 수 있습니다.

단일 따옴표 (single quotes) 를 사용하는 경우:

<HTML-태그 이벤트='자바스크립트'>

쌍 따옴표 (double quotes) 를 사용하는 경우:

<HTML-태그 이벤트="자바스크립트">

---

아래 예에서 "온 클릭" 속성 (onclick attribute) 을 버튼 태그에 추가하였습니다.

<button onclick="getElementById('myID11').innerHTML=Date()">클릭하여 현재 시간을 표시해 봅니다.</button>

<p id="myID11"></p>

위의 예에서, 자바스크립트 코드는 id="myID11" 을 갖는 태그의 내용을 바꾸었습니다.

---

다음 예에서는, 코드가 자기 자신의 태그의 내용을 바꿉니다. 이때 this.innerHTML 스크립트가 사용됩니다.

<button onclick="this.innerHTML=Date()">this.innerHTML 을 사용하여 자기 자신의 내용을 바꿉니다.</button>

---

버튼을 클릭하면 함수가 호출되고, 함수 실행후 결과가 반환되어 HTML 코드에 표시됩니다.

일반적으로는 아래와 같이 함수를 호출하는 이벤트 속성을 자주 보게 될 것입니다.

<p>버튼을 클릭하면 함수가 호출되고, 함수 실행후 결과가 반환되어 HTML 코드에 표시됩니다.</p>

<button onclick="displayDate()">지금 몇시에요? 버튼을 클릭하여 함수를 호출해 보세요.</button>

<script>
function displayDate() {
document.getElementById("myID13").innerHTML = Date();
}
</script>

<p id="myID13"></p>

---

선택 강아지 고양이

<select id="onchangeSelect" onchange="onchangeFunction()">
<option value="어느 동물(을)">선택
<option value="닥스훈트">강아지
<option value="페르시안 캣(을)">고양이
</select>

<p id="onchangeResult"></p>

<script>
function onchangeFunction() {
var selectValue = document.getElementById("onchangeSelect").value;
document.getElementById("onchangeResult").innerHTML = selectValue + "를 좋아하세요?";
}
</script>

---

일반적인 HTML 이벤트를 나열하면 아래와 같습니다.

이벤트	설명
onchange		HTML 태그가 변경 되었을 때	
onclick		사용자가 HTML 태그를 클릭하였을 때 
onmouseover		사용자가 마우스를 HTML 태그 위로 움직였을 때
onmouseout		사용자가 마우스를 HTML 태그에서 내렸을 때	
onkeydown		사용자가 키보드의 키를 눌렀을 때
onload		브라우저가 페이지 로딩을 마쳤을 때



이벤트 핸들러 (Event handlers) 는 사용자 동작 (user actions), 브라우저 동작 (browser actions), 사용자 입력 (user input) 검증 이나 처리 (to handle) 를 위해 사용될 수 있습니다.

---

<button onclick="getElementById('myID11').innerHTML=Date()">클릭하여 현재 시간을 표시해 봅니다.</button>
<p id="myID11"></p>
<p><br /></p>

<button onclick="this.innerHTML=Date()">this.innerHTML 을 사용하여 자기 자신의 내용을 바꿉니다.</button>
<p><br /></p>

<button onclick="displayDate()">지금 몇시에요? 버튼을 클릭하여 함수를 호출해 보세요.</button>
<script>
function displayDate() {
document.getElementById("myID13").innerHTML = Date();
}
</script>
<p id="myID13"></p>
<p><br /></p>

<select id="onchangeSelect" onchange="onchangeFunction()">
<option value="어느 동물(을)">선택
<option value="닥스훈트">강아지
<option value="페르시안 캣(을)">고양이
</select>
<p id="onchangeResult"></p>
<script>
function onchangeFunction() {
var selectValue = document.getElementById("onchangeSelect").value;
document.getElementById("onchangeResult").innerHTML = selectValue + "를 좋아하세요?";
}
</script>
<p><br /></p>

<pre><code>onchange HTML 태그가 변경 되었을 때
onclick 사용자가 HTML 태그를 클릭하였을 때
onmouseover 사용자가 마우스를 HTML 태그 위로 움직였을 때
onmouseout 사용자가 마우스를 HTML 태그에서 내렸을 때
onkeydown 사용자가 키보드의 키를 눌렀을 때
onload 브라우저가 페이지 로딩을 마쳤을 때</code></pre>

---

[광고] Udemy 동영상 강의로 보기