wiki:javascript:javascript_note:dom_events

차이

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

차이 보기로 링크

--- wiki:javascript:javascript_note:dom_events [2021/04/20 11:48]
emblim98
+++ wiki:javascript:javascript_note:dom_events [2023/01/13 18:44] (현재)
@@ 줄 228: / 줄 228: @@
 =====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>

/volume1/web/dokuwiki/data/attic/wiki/javascript/javascript_note/dom_events.1618886929.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)