자바스크립트 이벤트 – addEventListener() 라는 메소드를 사용해서 문서 객체의 이벤트를 연결할 수 있습니다.
이벤트를 연결을 할 때 첫 번째 매개 변수에 이벤트 의 이름을 지정하고, 두 번째 매개 변수에 이벤트가 발생되었을 때 호출할 함수를 설정합니다.
이벤트가 발생되었을 때 호출할 함수, 즉 이것을 일반적으로 이벤트 리스너(Event Listner) 또는 이벤트 핸들러(Event Handler) 라고 칭합니다.
등록된 이벤트 리스너는 해당 객체나 요소에 지정된 이벤트가 발생하게 되면, 브라우저를 통해 자동으로 등록된 이벤트 리스너(Event Listner)를 호출하게 됩니다.
그와 동시에 이벤트 리스너는 파라메터를 통해 이벤트 객체(event object)를 전달받게됩니다.
보통 문서 객체(Document Object)에서 제공하는 속성 혹은 메소드 중 On으로 시작하며 네이밍하는 속성들은 모두 이벤트(Event)와 연관된 속성입니다.
다양한 이벤트가가 있으며 이를 활용하여 사용자와 인터액티브하는 다양한 프로그램을 만들 수 있게 됩니다.
...
const button = document.createElement( "button" );
button.textContent = "버튼 이름";
button.addEventListener( "click", () => {
header.addEventListener( "click", listener );
p.textContent = '버튼 클릭시'
...
예를 들어서 위와 같은 코드의 경우, button 객체를 생성한 후 button의 event에 click 이벤트를 할당하는 것을 의미합니다.
SAPUI5 자바스크립트 이벤트 연결 – addEventListener()
아래 코드의 내용은 다음과 같습니다.
- h1 태그를 생성
- h1 태그를 클릭을 할 때마다
- 숫자 +1 씩 증가하여 h1 태그의 값을 변경
여기서 사용되는 주요 객체 관련 메소드는 createElement(), addEventListener() 등을 참고하시기 바랍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
document.addEventListener("DOMContentLoaded", () => {
const h1Elem = document.createElement("h1");
document.body.appendChild(h1Elem);
let count = 0;
//클릭시 반응없도록 userSelect 변경 - 클릭시 번쩍임 방지
h1Elem.style.userSelect = "none";
h1Elem.textContent = `클릭한 횟수 : ${count}`;
h1Elem.addEventListener("click", () => {
//클릭을 할떄 event Listner 에서 + 1을 올려주는 코드
count++;
h1Elem.textContent = `클릭한 횟수 : ${count}`;
});
h1Elem.style.color = "blue";
});
</script>
</head>
<body></body>
</html>실행결과는 다음과 같이, h1 태그를 클릭할 때마다 숫자가 1씩 증가함을 볼 수 있습니다.
자바스크립트 이벤트 Keydown(), Keyup()
Keydown, Keyup은 기본적으로 키보드가 눌러졌을 때 발생하는 이벤트입니다.
Keydown과 비슷한 keypress가 있으나, keypress의 경우, delete/alt 등 실제로 입력되어지지 않는 키는 이벤트가 발생하지 않으므로 보통 keydown 이벤트를 주로 사용하게 됩니다.
아래의 코드는 키보드의 키가 눌려질 때(keydown) 그리고 키가 다시 올라올 때(keyup)의 이벤트를 등록하여 활용한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
document.addEventListener("DOMContentLoaded", () => {
//일반적으로 콜백함수에 들어가는 매개변수는 event 혹은 e로 많이 사용됨
document.addEventListener( 'keydown', ( e ) => {
document.body.innerHTML = `<h1>keydown ${e.code} </h1>`;
})
document.addEventListener( 'keyup', (e) => {
document.body.innerHTML = `<h1>keyup ${e.code} </h1>`;
})
});
</script>
</head>
<body></body>
</html>
실행 후 브라우저상에서 키보드의 아무런 키를 누를 때마다 해당 이벤트의 이름과 키 코드값을 보여주게 됩니다.
textArea 객체를 querySelector()를 통해서 가져온 후, createElement()로 생성한 p 태그에 결과를 보여주는 내용으로, textArea 객체에서 keyup 이벤트가 발생한 시점을 이벤트 핸들러로 등록합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
document.addEventListener("DOMContentLoaded", () => {
// textArea를 id = textarear1 를 활용해서 객체를 가져옴
const textArea = document.querySelector("#textarear1");
//결과를 표시할 엘리먼트를 생성해서 body.appendChild
const p = document.createElement("p");
p.textContent = '총 글자수 세기 : ';
document.body.appendChild( p )
//textArea 객체에서 event가 발생시에는 p 태그에 그 결과를 보여줌
textArea.addEventListener("keyup", (event) => {
p.textContent = `총 글자수 세기 : ${textArea.value.length}`;
});
});
</script>
</head>
<body>
<!-- <h1>글자 갯수 : 0</h1> -->
<textarea name="textArea" id="textarear1" cols="30" rows="10"></textarea>
</body>
</html>
위의 addEventListener()의 keyup 로직은 아래의 로직 역시 동일하게 동작합니다.
//event.currentTarget을 활용하여
textArea.addEventListener("keyup", (event) => {
p.textContent = `총 글자수 세기 : ${event.currentTarget.value.length}`;
});
//화살표 함수는 this를 사용할 수 없으나, 익명함수로 변경시 this를 사용할 수 있음
textArea.addEventListener("keyup", function (event) {
p.textContent = `총 글자수 세기 : ${this.value.length}`;
});
기본 이벤트 막기 – event.preventDefault() 사용하기
자바스크립트 preventDefault 는 기본으로 브라우저상에 정의된 이벤트(Event)를 작동하지 못하게 하는 메서드입니다. 일반적으로 기본 이벤트를 건너뛰고 프로그램만의 기능을 수행하고자 할 때 사용합니다.
예를 들면, a태그의 경우, href 링크 주소로 웹페이지 이동을 해주는 것이 기본(Default) 기능인데, preventDefault()를 사용하여 링크를 누르더라도 아무런 동작을 하지 않도록 기본 기능을 막을 수 있습니다.
아래의 코드는 브라우저의 기본 기능, 객체에서 마우스 오른쪽 버튼 클릭시 콘텍스트 메뉴가 호출되게 되는데, 이를 자바스크립트 preventDefault()를 통해 막는 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- <h1>글자 갯수 : 0</h1> -->
<!-- <textarea name="textArea" id="textarear1" cols="30" rows="10"></textarea> -->
<a href ="<a href="http://www.naver.com">www.naver.com</a>">네이버로 이동하기</a>
<script>
const link = document.querySelector( "a" );
//contextmenu를 호출하는 이벤트에 preventDefault() 처리
link.addEventListener( "contextmenu", ( event ) => {
event.preventDefault();
//재정의 한 context Menu 등을 사용할 때
})
</script>
</body>
</html>
위의 내용은, 모질라 mdn web docs를 참고하여 작성하였으며 addEventListner, preventDefault 문서를 통해 더욱 더 상세한 내용을 확인할 수 있습니다.
SAPUI5 자바스크립트 DOM 조작과 관련한 기초적인 내용은 여기 문서를 참고하실 수 있습니다.