(DOM & Events 06) 이벤트 핸들링

in JavaScript

SoloLearn JS 번역


Events

이벤트


  • You can write JavaScript code that executes when an event occurs, such as when a user clicks an HTML element, moves the mouse, or submits a form.
    • 이벤트가 발생할 때 실행되는 JavaScript 코드를 작성할 수 있다.
    • 이벤트는 사용자가 HTML element를 클릭하거나, 마우스를 움직이거나, form을 제출하는 경우를 말한다.
  • When an event occurs on a target element, a handler function is executed.
    • target element에서 이벤트가 발생하면, 핸들러 함수가 실행된다.
  • Common HTML events include:
    • 일반적인 HTML 이벤트는 다음과 같다.


  • onclick: occurs when the user clicks on an element.
    • 사용자가 element를 클릭할 때 발생한다.
  • onload: occurs when an object has loaded.
    • 객체가 로딩될 때 발생한다.
  • onunload: occurs once a page has unloaded (for <body>).
    • 페이지가 언로딩될 때 발생한다.
    • (<body>의 경우)
  • onchange: occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <keygen>, <select>, and <textarea>).
    • form element, selection, state의 내용이 변경될 때 발생한다.
    • (<input>, <keygen>, <select>, <textarea>의 경우)
  • onmouseover: occurs when the pointer is moved onto an element, or onto one of its children.
    • 마우스 포인터가 element 위로 이동하거나, children(자식) 중 하나의 위로 이동할 때 발생한다.
  • onmouseout: occurs when a user moves the mouse pointer out of an element, or out of one of its children.
    • 마우스 포인터가 element의 바깥으로 이동하거나, children(자식) 중 하나의 바깥으로 이동할 때 발생한다.
  • onmousedown: occurs when the user presses a mouse button over an element.
    • element 위에서 마우스 버튼을 누를 때 발생한다.
  • onmouseup: occurs when a user releases a mouse button over an element.
    • element 위에서 마우스 버튼을 놓을 때 발생한다.
  • onblur: occurs when an element loses focus.
    • element가 focus를 잃을 때 발생한다.
  • onfocus: occurs when an element gets focus.
    • element가 focus를 얻을 때 발생한다.


Corresponding events can be added to HTML elements as attributes.

해당 이벤트를 HTML element에 속성으로 추가할 수 있다.

예: <p onclick="someFunc()">some text</p>


Handling Events

이벤트 핸들링


  • Let’s display an alert popup when the user clicks a specified button:
    • 사용자가 지정된 버튼을 클릭할 때 alert popup을 표시해보자.
<button onclick="show()">
   Click Me
</button>

<script>
   function show() {
      alert("Ssup bro?");
   }
</script>

코드 실행 확인


  • Event handlers can be assigned to elements.
    • 이벤트 핸들러를 element에 지정할 수 있다.
var x = document.getElementById("demo");
x.onclick = function() {
   document.body.innerHTML = Date();
}

코드 실행 확인


You can attach events to almost all HTML elements.

이벤트는 거의 모든 HTML element에 붙일 수 있다.


Events

이벤트


  • The onload and onunload events are triggered when the user enters or leaves the page.
    • onload와 onunload 이벤트는 사용자가 페이지에 들어가거나 떠날 때 trigger 된다.
  • These can be useful when performing actions after the page is loaded.
    • 이는 페이지가 로딩된 후 동작을 수행할 때 유용할 수 있다.
<body onload="doSomething()">


  • Similarly, the window.onload event can be used to run code after the whole page is loaded.
    • 마찬가지로, window.onload 이벤트는 전체 페이지가 로딩된 후 코드를 실행하는 데 사용할 수 있다.
window.onload = function() {
   // some code
}


  • The onchange event is mostly used on textboxes.
    • onchange 이벤트는 주로 textbox에서 사용된다.
  • The event handler gets called when the text inside the textbox changes and focus is lost from the element.
    • 이벤트 핸들러는 textbox 내의 text가 변경되고, element가 focus를 잃었을 때 호출된다.
<input type="text" id="name" onchange="change()">

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

코드 실행 확인


It’s important to understand events, because they are an essential part of dynamic webpages.

동적 웹페이지의 필수적인 부분이므로, 이벤트를 이해하는 것은 매우 중요하다.


Event Listeners

이벤트 리스너


  • The addEventListener() method attaches an event handler to an element without overwriting existing event handlers.
    • addEventListener() 메소드는 element에 이벤트 핸들러를 붙인다.
    • 기존 이벤트 핸들러를 덮어쓰지는 않는다.
  • You can add many event handlers to one element.
    • 하나의 element에 여러 이벤트 핸들러를 추가할 수 있다.
  • You can also add many event handlers of the same type to one element, i.e., two “click” events.
    • 동일한 type의 여러 이벤트 핸들러를 하나의 element에 추가할 수도 있다.
    • 즉, 두 개의 “click” 이벤트를 추가할 수도 있다.
element.addEventListener(event, function, useCapture);


  • The first parameter is the event’s type (like “click” or “mousedown”).
    • 첫 번째 매개변수는 이벤트의 type이다.
    • (“click” 또는 “mousedown”)
  • The second parameter is the function we want to call when the event occurs.
    • 두 번째 매개변수는 이벤트가 발생할 때 호출할 함수이다.
  • The third parameter is a Boolean value specifying whether to use event bubbling or event capturing.
    • 세 번째 매개변수는 bubbling 또는 capturing 이벤트를 사용할지 여부를 지정하는 Boolean 값이다.
  • This parameter is optional.
    • 이 매개변수는 선택적이다.


Note that you don’t use the "on" prefix for this event; use "click" instead of "onclick".

이 이벤트에는 접두사 "on"을 사용하지 않는다.

"onclick" 대신 "click"을 사용한다.


  • Example:
element.addEventListener("click", myFunction);
element.addEventListener("mouseover", myFunction);

function myFunction() {
   alert("Hello World!");
}


  • This adds two event listeners to the element.
    • 이는 두 개의 이벤트 리스너를 element에 추가한다.
  • We can remove one of the listeners:
    • 리스너 중 하나를 제거할 수 있다.
element.removeEventListener("mouseover", myFunction);


  • Let’s create an event handler that removes itself after being executed:
    • 실행 후 그 자체를 제거하는 이벤트 핸들러를 생성해보자.
<button id="demo">
   Start
</button>

<script>
   var btn = document.getElementById("demo");
   btn.addEventListener("click", myFunction);
   
   function myFunction() {
      alert(Math.random());
      btn.removeEventListener("click", myFunction);
   }
</script>

코드 실행 확인


  • After clicking the button, an alert with a random number displays and the event listener is removed.
    • 버튼을 클릭하면 난수가 alert 되고, 이벤트 리스너가 제거된다.


Internet Explorer version 8 and lower do not support the addEventListener() and removeEventListener() methods.

Internet Explorer 버전 8 이하는 addEventListener()와 removeEventListener() 메소드를 지원하지 않는다.


QUIZ

  • The type of function that executes when an event occurs is called:
    • 이벤트가 발생할 때 실행되는 함수의 type을 …라고 한다.

event handler

이벤트 핸들러


  • Fill in the blanks to call func() when the button is clicked.
    • 버튼을 클릭했을 때 func()를 호출해라.
<button onclick="func()">
   Click Here
</button>


  • Drag and drop from the options below to call the clear() function after body is loaded.
    • body가 로딩된 후 clear() 함수를 호출해라.
<body onload="clear()">
   
</body>


  • Can multiple event handlers be added to a single element?
    • 하나의 element에 여러 이벤트 핸들러를 추가할 수 있는가?

Yes