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

사용자 도구

사이트 도구

현재 위치: start » wiki » javascript » javascript_note » dom_events
wiki:javascript:javascript_note:dom_events

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판 		이전 판
wiki:javascript:javascript_note:dom_events [2021/04/20 10:33]
emblim98 만듦 		wiki:javascript:javascript_note:dom_events [2023/01/13 18:44] (현재)
줄 95: 줄 95:
  
 =====Assign Events Using the HTML DOM===== =====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]]를 참조하세요.\\
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
  
/var/services/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
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki