문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Javascript HTML DOM Events======
<WRAP left notice 80%>
  * description : Javascript HTML DOM Events 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-20
</WRAP>
<WRAP clear></WRAP>
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/js/js_htmldom_events.asp|Javascript HTML DOM Events]]
\\
%%HTML DOM%%을 사용하면 %%JavaScript%%가 %%HTML%% 이벤트에 반응할 수 있습니다:\\

=====Reacting to Events=====
사용자가 %%HTML%% 요소를 클릭 할 때와 같이 이벤트가 발생하면, %%JavaScript%%를 실행될 수 있습니다.\\
\\
사용자가 요소를 클릭 할 때 코드를 실행하려면, %%HTML%% 이벤트 속성에 %%JavaScript%% 코드를 추가하십시오.\\
\\
<code javascript>
onclick=JavaScript
</code>

%%HTML%% 이벤트의 에시는 다음과 같습니다:\\

  * 사용자가 마우스를 클릭 할 때
  * 웹 페이지가 로딩 되었을 때
  * 이미지가 로딩 되었을 때
  * 마우스가 요소 위로 이동할 때
  * 입력 필드가 변경된 경우
  * %%HTML%% 양식을 제출할 때
  * 사용자가 키를 입력할 때

다음 예제에서, 사용자가 클릭하면 ''%%<h1>%%'' 요소의 콘텐츠가 변경됩니다.\\

====예제====
<code html>
<!DOCTYPE html>
<html>
<body>

  <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

</body>
</html>
</code>
\\
다음 예제에서는, 이벤트 핸들러(event handler)가 함수를 호출합니다:\\

====예제====
<code javascript>
<!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>
</code>

=====HTML Event Attributes=====
%%HTML%% 요소에 이벤트를 할당하려면 이벤트 속성을 사용할 수 있습니다.\\

====예제====
버튼 요소에 onclick 이벤트를 할당합니다.\\
<code javascript>
<!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>
</code>
\\
상기 예제에서, ''displayDate()''함수는 버튼이 클릭되면 실행됩니다.\\

=====Assign Events Using the HTML DOM=====
%%HTML DOM%%을 사용하면 %%JavaScript%%를 사용하여 %%HTML%% 요소에 이벤트를 할당할 수 있습니다.\\

====예제====
버튼 요소에 onclick 이벤트를 할당합니다.\\
<code javascript>
  <script>
    document.getElementById("myBtn").onclick = displayDate;

    function displayDate() {
      document.getElementById("demo").innerHTML = Date();
    }
  </script>
</code>
\\
위의 예제에서 ''displayDate'' 함수는 ''id="myBtn"''를 가진 %%HTML%% 요소에 할당됩니다.\\
\\
버튼을 클릭하면 함수가 실행됩니다.\\
\\
=====The onload and onunload Events=====

''onload'' 및 ''onunload'' 이벤트는 사용자가 페이지에 들어가거나 페이지를 떠날 때 작동됩니다.\\
\\
''onload'' 이벤트는 방문자의 브라우저 유형 및 브라우저 버전을 확인하고,\\ 
해당 정보를 기반으로 적절한 버전의 웹 페이지를 로딩하는 데 사용할 수 있습니다.\\
\\
''onload'' 및 ''onunload'' 이벤트를 사용하여 쿠키를 처리할 수 있습니다.\\

====예제====
<code javascript>
<!DOCTYPE html>
<html>
<body onload="checkCookies()">

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

  <script>
    function checkCookies() {
      var text = "";
      if (navigator.cookieEnabled == true) {
        text = "Cookies are enabled.";
      } else {
        text = "Cookies are not enabled.";
      }
      document.getElementById("demo").innerHTML = text;
    }
  </script>

</body>
</html>
</code>

=====The onchange Event=====
''onchange'' 이벤트는 종종 입력 필드의 유효성 검사와 결합하여 사용됩니다.\\
\\
다음은 onchange를 사용하는 방법의 예제입니다. 사용자가 입력 필드의 내용을 변경하면 ''%%upperCase()%%'' 함수가 호출됩니다.\\

====예제====
<code javascript>
<!DOCTYPE html>
<html>
<body>

  Enter your name: <input type="text" id="fname" onchange="myFunction()">

  <p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

  <script>
    function myFunction() {
      var x = document.getElementById("fname");
      x.value = x.value.toUpperCase();
    }
  </script>

</body>
</html>
</code>

=====The onmouseover and onmouseout Events=====
''onmouseover'' 및 ''onmouseout'' 이벤트는 사용자가 %%HTML%% 요소 위로 마우스를 가져 가거나\\
%%HTML%% 요소에서 벗어날 때 함수를 작동시킬 때 사용할 수 있습니다.\\
\\
<code javascript>
<!DOCTYPE html>
<html>
<body>

  <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color: #D94A38; width:120px; height: 20px; padding:40px;">Mouse Over Me</div>

  <script>
    function mOver(obj) {
      obj.innerHTML = "Thank you"
    }

    function mOut(obj) {
      obj.innerHTML = "Mouse Over Me"
    }
  </script>

</body>
</html>
</code>

=====The onmousedown, onmouseup and onclick Events=====
''onmousedown'', ''onmouseup'' 및 ''onclick'' 이벤트는 모두 마우스 클릭의 일부입니다.\\ 
먼저 마우스 버튼을 클릭하면 ''onmousedown'' 이벤트가 작동되고,\\ 
마우스 버튼을 놓으면 ''onmouseup'' 이벤트가 작동되고\\ 
마지막으로 마우스 클릭이 완료되면, ''onclick'' 이벤트가 작동됩니다.\\
\\
<code javascript>
<!DOCTYPE html>
<html>
<body>

  <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color: #D94A38; width:90px ; height:20px; padding:40px; color:white">Click Me</div>

  <script>
    function mDown(obj) {
      obj.style.backgroundColor = "#1ec5e5";
      obj.innerHTML = "Release Me";
    }

    function mUp(obj) {
      obj.style.backgroundColor = "#D94A38";
      obj.innerHTML = "Merci";
    }
  </script>

</body>
</html>
</code>

=====More Examples=====

%%onmousedown and onmouseup%%\\
사용자가 마우스 버튼을 누르고 있을 때 이미지를 변경합니다.\\
<code javascript>
<!DOCTYPE html>
<html>
<body>

  <img src="bulboff.gif" alt="bulb" id="myimage" onmousedown="lighton()" onmouseup="lightoff()" width="100" height="180" />

  <p>Click mouse and hold down!</p>

  <script>
    function lighton() {
      document.getElementById('myimage').src = "bulbon.gif";
    }
    function lightoff() {
      document.getElementById('myimage').src = "bulboff.gif";
    }
  </script>

</body>
</html>
</code>
\\
%%onload%%\\
페이지 로딩이 완료되면 alert 상자를 표시합니다.\\
<code javascript>
<!DOCTYPE html>
<html>
<body onload="mymessage()">

  <script>
    function mymessage() {
      alert("This message was triggered from the onload event");
    }
  </script>

</body>
</html>
</code>
\\
%%onfocus%%\\
포커스를 받으면 입력 필드의 배경색을 변경합니다.\\
<code javascript>
<!DOCTYPE html>
<html>
<body>

  Enter your name: <input type="text" onfocus="myFunction(this)">

  <p>When the input field gets focus, a function is triggered which changes the background-color</p>

  <script>
    function myFunction(x) {
      x.style.background = "yellow";
    }
  </script>

</body>
</html>
</code>
\\
%%Mouse Events%%\\
커서를 요소 위로 이동하면 요소의 색상을 변경합니다.\\
<code javascript>
<!DOCTYPE html>
<html>
<body>

  <h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>

</body>
</html>
</code>








=====HTML DOM Event Object Reference=====
모든 %%HTML DOM%% 이벤트 목록은 [[https://www.w3schools.com/jsref/dom_obj_event.asp|HTML DOM Event Object Reference]]를 참조하세요.\\













{{tag>오션, Javascript HTML DOM Events}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
