javascript Event(1)

Posted on In

javascript Event를 정리해보자

javascript Event는 매우 방대해서 아직 안써본 기술들이 많았다. 그중에 잘 쓰지 않았던 것들은 한번 정리해보려고 한다.

  1. Event.stopPropagation()
    자바스크립트에서 stopPropagation() 메서드는 event 객체의 버블링을 제거하는데 유용한 메서드이다.
    예를 들어 검색을 하고 클릭을 하는 이벤트를 만들어두었을때 어느 순간에는 클릭만 되게 만들 필요가 있을 것이다. 이벤트 버블링
    와 함께 매우 자주 사용되는 중요한 메서드입니다.

여기서 event 버블링이란 이벤트가 연속하여 발생하는 버블 현상을 의미한다 .이벤트는 이벤트캡쳐링과 이벤트버블링으로 나타나는데 클릭이 발생한 경우를 예로들면 클릭 시점에 해당 위치에서 이벤트가 발생하고 발생하고 다시 겹쳐진 요소를 올라가면서 해당 엘리먼트의 이벤트를 다시 발생시키는 현상을 의미한다.

리엑트 엘리먼트를 통한 방식에서도 유용하게 쓸수 있어보였다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let div=document.createElement('div')
div.innerText='testing'
div.addEventListener('click',()=>{  console.log('test1!')  })
document.body.append(div)
let div2=document.createElement('div')
div2.innerText='testing2'
div2.addEventListener('click',()=>{  console.log('test2!')  })
div.append(div2)

//VM997:1 test1!
div1을 클릭했을 때는 test1!만 출력
//VM1315:1 test2!
//VM997:1 test1!
div2을 클릭했을 때는 이벤트 버블링 발생 둘다 출력
  1. event.defaultPrevent()

defaultPrevent는 기본적인 html의 기능을 막을 수 있는 메소드이다.체크박스의 클릭 기본 동작,a 태그의 링크 이동 select 선택 기능 전부 다 막을 수 있다. 실질적으로 필요한 경우는 다른 이벤트를 넣었을때 체크박스나 셀렉트와 같은 기본기능이 필요없을 경우에 사용할 수 있지않을까 생각한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
function checkName(evt) {
  var charCode = evt.charCode;
  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      displayWarning(
        "영문 소문자만 입력하세요."
        + "\n" + "charCode: " + charCode + "\n"
      );
      //displayWarning는 경고창을 띄워줌
    }
  }
}

위의 코드와 같이 영문 소문자만 입력가능하게 세팅을 만들 수도 있다.