IT Log

JavaScript (5) 본문

JavaScript

JavaScript (5)

newly0513 2020. 6. 13. 02:06
728x90
반응형

Event

  • 웹 브라우저가알려주는 HTML 요소에 대한 사건의 발생

  • 브라우저나 사용자가 발생

Event Type

  • Keyboard

  • Mouse

  • HTML DOM,

  • Window 등

Event Specification

  1. DOM Level 3

  2. HTML5

  3. Mobile

Event Listener

  • 해당 객체나 요소에 등록되어야 호출 가능

  • Event의 대상이 되는 객체나 요소에 Property로 등록

  • 객체나 요소의 Method에 Event Listener를 전달

객체나 요소에 Property로 등록

  • JavaScript 코드에서 Property로 등록하거나 HTML 태그에 속성으로 등록

  • Event Type별로 오직 하나의 Event Listener만 등록할 수 있는 단점

  • HTML 태그에 속성으로 등록하는 경우, 가독성이 떨어지며, 유지보수도 저하됨
window.onload = function() { 
    var text = document.getElementById("text"); 
    text.innerHTML = "HTML 문서가 로드되었습니다.";
}

또는 

<p onclick="alert('문자열을 클릭했어요!')">이 문자열을 클릭해 보세요!</p>

객체나 요소의 Method에 Event Listener를 전달

  • addEventListener() 또는 attachEvent()

  • addEventListener() Method에서는 "on"이 붙지 않은 Event Type 사용
  • addEventListener() Method를 사용하면, 하나의 객체에 여러 개의 Event를 추가
  • removeEventListner() Method를 사용하면 등록된 Event를 삭제

 

 

 

# addEventListener() Method
// element.addEventListener(event, function, useCapture);

// evnet : Evevnt Type(click 또는 mousedownd 등)
// function : Event 발생 시 호출 함수
// useCapture : 선택 사항이며, false면 버블링 방식으로, true면 캡처링 방식으로 Event 전달


var showBtn = document.getElementById("btn"); 
showBtn.addEventListener("click", showText);  
function showText() {
    document.getElementById("text").innerHTML = "짜잔~!! 텍스트가 나타났어요!!";
}

# 여러 개의 Event 추가
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
  document.getElementById("demo").innerHTML += "Moused over!<br>";
}

function mySecondFunction() {
  document.getElementById("demo").innerHTML += "Clicked!<br>";
}

function myThirdFunction() {
  document.getElementById("demo").innerHTML += "Moused out!<br>";
}


# Event 삭제
function clickBtn() {
    btn.removeEventListener("mouseover", mouseoverBtn);
    btn.removeEventListener("mouseout", mouseoutBtn);
    document.getElementById("text").innerHTML = "이벤트 리스너가 삭제되었어요!";
}

Event bubbling / Event Capturing

  • addEventListener(event, function, useCapture)에서 useCapture 부분에 작성 

  • Event 발생 시 요소 순서를 정의하는 방법으로 기본값은 false ( true: capturing / false: bubbling )

  • bubbling : 내부 요소의 Event를 먼저 처리

  • Capturing : 외부 요소의 Event를 먼저 처리

<body>
<div id="myDiv1">
  <h2>Bubbling:</h2>
  <p id="myP1">Click me!</p>
</div><br>

<div id="myDiv2">
  <h2>Capturing:</h2>
  <p id="myP2">Click me!</p>
</div>

<script>
document.getElementById("myP1").addEventListener("click", function() {
  alert("You clicked the white element!");
}, false);

document.getElementById("myDiv1").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, false);

document.getElementById("myP2").addEventListener("click", function() {
  alert("You clicked the white element!");
}, true);

document.getElementById("myDiv2").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, true);
</script>
</body>
// myDiv1 태그의 경우 false이므로 내부에서 외부순으로 p태그 이후 div태그 이벤트가 발생
// myDiv2 태그의 경우 true이므로 외부에서 내부순으로 div태그 이후 p태그 이벤트가 발생

// false경우 기본값이 false이므로 생략이 가능하고, 내부 태그 조건과 상관없이 외부태그 조건에 따라
순서가 정해진다.

preventDefault() / stopPropagation()

  • prenvetDefault() : 기본 동작을 취소

  • stopPropagation() : useCapture를 취소

# 동작 취소
<a id="linkBox" href="/javascript/intro">클릭</a>
<script>
document.getElementById("linkBox").addEventListener("click", clickLink);
function clickLink(event) {
    event.preventDefault(); 
    document.getElementById("text").innerHTML += "링크의 기본 동작을 막았어요!<br>";
    document.getElementById("text").innerHTML += "a 요소를 click 하셨네요!<br>";
}
</script>
// 링크 연결이 취소됨


# Event 취소
<a id="linkBox" href="/javascript/intro">클릭</a>
<script>
document.getElementById("linkBox").addEventListener("click", clickLink);
function clickLink(event) {
    event.preventDefault();
    document.getElementById("text").innerHTML += "링크의 기본 동작을 막았어요!<br>";
    event.stopPropagation(); 
    document.getElementById("text").innerHTML += "이벤트의 전파를 막았어요!<br>";
}
</script>
// a 태그보다 외부에 있는 event는 실행되지 않는다.

Event Case

Input Mouse Click Load
onblur onmouseover onclick onload
onchange onmouseout ondblclick onerror
onfocus onmousedown   onunload
onselect onmouseup   onresize
onsubmit onmousemove    
onreset      
onkeydown      
onkeypress      
onkeyup      

onblur

  • focus가 되어있지 않은 상태
<body>
<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
</body>

// 영문 소문자를 작성 후 focus를 풀리면(input이 아닌 다른 곳을 클릭) 영문이 대문자로 변경

onsubmit

  • 양식을 제출하려고 할 때 발생하는 이벤트
  • 양식 유효성 검증을 넣을 수 있음
<body>
<script>
function confirmInput() {
  fname = document.forms[0].fname.value;
  alert("Hello " + fname + "! You will now be redirected to www.w3Schools.com");
}
</script>

<form onsubmit="confirmInput()" action="https://www.w3schools.com/">
  Enter your name: <input id="fname" type="text" size="20">
  <input type="submit">
</form>

</body>

// text에 입력한 값이 fname값에 저장되어 alert창이 입력한 값으로 출력

onmouseover & onmouseout

  • 마우스를 어떤요소 위로 이동하거나 위에서 다른곳으로 이동할 때 발생하는 이벤트
<body>

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

</body>

// 처음 실행 시 검은색이었다가 마우스를 text위로 올리면 빨간색으로 바뀌고 다시 text를 벗어나면 노란색으로 변경

onclick

  • 사용자가 마우스 왼쪽버튼을 클릭할 때 발생
  • 가장 자주 사용되는 이벤트 유형
  • 이벤트 유형에 대해 유효성 검사, 경고 등을 넣을 수 있음
<body>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>
<p>Click the button to trigger a function.</p>

<button onclick="myFunction()">Click me</button>

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

</body>

// button을 클릭하면 해당 Text가 출력된다.
728x90
반응형

'JavaScript' 카테고리의 다른 글

JavaScript (6)  (0) 2020.06.14
JavaScript (4)  (0) 2020.06.13
jQuery Tutorial (3)  (0) 2020.06.09
jQuery Tutorial (2)  (0) 2020.06.09
jQuery Tutorial (1)  (0) 2020.06.08
'JavaScript' Related Articles more
Comments