[Web] 16. Event
Evnet
브라우저에는 많은 이벤트가 발생한다. 브라우저 화면의 크기를 조절하거나 마우스로 스크롤 하는 등 브라우저가 이벤트 정보를 가지고 있는데, 개발자는 그 정보를 가지고 작업을 할 수 있다.
브라우저에는 많은 이벤트가 발생한다. 브라우저 화면의 크기를 조절하거나 마우스로 스크롤 하는 등 브라우저가 이벤트 정보를 가지고 있는데, 개발자는 그 정보를 가지고 작업을 할 수 있다.
- addEvnetListener()
element 객체 안에있는 메서드로 아래와 같이 사용 할 수 있다. 이 함수는 click 이벤트가 일어났을때 그 다음 인자로 나오는 function()을 수행하도록 한다. 이 함수를 Evnet Handler 또는 Event Listener 라고 한다. 이벤트가 발생한 후 나중에 수행되기 때문에 call back 함수라고 할 수 있다.
"1.html"
<html>
<header></header>
<body>
<div class="outside">outside element</div>
</body>
<script src="1.js"></script>
</html>
"1.js"
var el = document.querySelector(".outside");
el.addEventListener("click",function(e){
var target = e.target;
console.log(target.className, target.nodeName)
console.log(target.innerText)
debugger;
});
- Event Handler
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Random color example — event handler property</title>
<style>
button {
margin: 10px;
}
</style>
</head>
<body>
<button>Change color</button>
<script>
const btn = document.querySelector('button');
function random(number) {
return Math.floor(Math.random()*number);
}
function bgChange() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
btn.onmouseover= bgChange;
</script>
</body>
</html>
다양한 이벤트 메소드를 실행해 볼 수 있는 코드다. btn.onmouseover 대신 다른 이벤트를 입력하면 된다.
- btn.onfocus / btn.onblu : 버튼이 target일 때와 아닐때
- btn.ondlclick : 더블클릭시 이벤트 발생
- window.onkeypress / window.onkeydown / window.onkeyup : 키보드가 눌렸을 때
- btn.onmourseover / btn.onmouseout : 마우스가 버튼 위에 올라왔을 때
No comments: