wiki:javascript:javascript_note:dom_events
문서의 이전 판입니다!
목차
Javascript HTML DOM Events
- description : Javascript HTML DOM Events
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-04-20
Source of the article
HTML DOM을 사용하면 JavaScript가 HTML 이벤트에 반응할 수 있습니다:
Reacting to Events
사용자가 HTML 요소를 클릭 할 때와 같이 이벤트가 발생하면, JavaScript를 실행될 수 있습니다.
사용자가 요소를 클릭 할 때 코드를 실행하려면, HTML 이벤트 속성에 JavaScript 코드를 추가하십시오.
onclick=JavaScript
HTML 이벤트의 에시는 다음과 같습니다:
- 사용자가 마우스를 클릭 할 때
- 웹 페이지가 로딩 되었을 때
- 이미지가 로딩 되었을 때
- 마우스가 요소 위로 이동할 때
- 입력 필드가 변경된 경우
- HTML 양식을 제출할 때
- 사용자가 키를 입력할 때
다음 예제에서, 사용자가 클릭하면 <h1> 요소의 콘텐츠가 변경됩니다.
예제
<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body> </html>
다음 예제에서는, 이벤트 핸들러(event handler)가 함수를 호출합니다:
예제
<!DOCTYPE html> <html> <body> <h1 onclick="changeText(this)">Click on this text!</h1> <script> function changeText(id) { id.innerHTML = "Je t'aime~~"; } </script> </body> </html>
HTML Event Attributes
HTML 요소에 이벤트를 할당하려면 이벤트 속성을 사용할 수 있습니다.
예제
버튼 요소에 onclick 이벤트를 할당합니다.
<!DOCTYPE html> <html> <body> <p>Click the button to display the date.</p> <button onclick="displayDate()">The time is?</button> <p id="demo"></p> <script> function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> </body> </html>
상기 예제에서, displayDate()함수는 버튼이 클릭되면 실행됩니다.
Assign Events Using the HTML DOM
/volume1/web/dokuwiki/data/attic/wiki/javascript/javascript_note/dom_events.1618882390.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
