728x90
이벤트(Event)
A.이벤트 설정 방법
1.고전 이벤트 모델
요소에 접근해서 속성 집어넣어서 이벤트 추가하는 것
이벤트 추가(기능 추가)
var test1 = document.getElementById('test1'); // 요소 접근
// var test1에 속성 넣고
// 이벤트 추가
test1.onclick = function() {
console.log('test1이 실행되었습니다.');
}
이벤트 삭제(기능 삭제)
test2.onclick = function() {
console.log('test2가 실행되면서 test1이벤트를 삭제하였습니다.');
test1.onclick = null; // null 집어넣어서 삭제
}
다른 이벤트 실행방법
지금까지 직접 펑션 집어넣었었는데, 펑션을 하나 미리 만들어 놓고 거기에다 연결도 가능
var test2_1 = document.getElementById('test2_1');
function test21() {
alert('이름으로 이벤트 연결');
}
test2_1.onclick = test21;
다수의 이벤트 동시에 연결가능
var test2_1 = document.getElementById('test2_1');
function test21() { // function 미리 선언
alert('이름으로 이벤트 연결');
}
test2_1.onclick = test21; // 미리 선언한 function 호출
// 다수의 이벤트 동시 연결 가능
test2_1.onmouseover = function() { // onmouseover : 마우스포인터가 해당 위치로 가면 발생
console.log('여러 이벤트 동시 연결 가능');
// onmouseover : 마우스가 올라간것에 대한 이벤트
}
test2_1.onclick = test21;로 위에서 선언된 test21 펑션을 호출하면서 바로 아랫줄에서 마우스포인터가 해당 버튼에 올라가면 이벤트 발생하도록 또 펑션을 연결하므로써 동시다발적으로 이벤트가 발생 가능하게 함
2.인라인 모델
태그안에 집어넣는게 인라인모델
<h3>인라인 모델</h3>
<button onclick="**test4()**;">Event - 인라인 모델</button>
<button onclick="alert('test4 가 실행되었습니다')">Event - 인라인 모델</button>
<script>
function test4(){
alert('test4가 실행되었습니다');
}
</script>
3.표준 이벤트 모델
addEventListener : 이벤트 추가
addEventListener(연결이벤트, 실행할 함수)
<button id="test5">표준 이벤트 모델 : test5 실행확인</button>
<script>
var test5 = document.getElementById('test5');
function fn_test5_1() {
console.log('test5가 클릭됐습니다.');
}
function fn_test5_2() {
console.log('test5에 들어왔습니다.');
}
// 이벤트 추가 : addEventListener
test5.addEventListener('click', fn_test5_1); // click하면 fn_test5_1 함수 실행하라는 코드
test5.addEventListener('mouseover', fn_test5_2); // 마우스포인터가 올라가면 fn_test5_2 함수를 실행하라는 코드
</script>
removeEventListener : 이벤트 삭제
removeEventListener(삭제할 이벤트, 삭제할 함수)
<button id="test5">표준 이벤트 모델 : test5 실행확인</button>
<button id="test6">표준 이벤트 모델 : test6 실행확인</button>
<script>
var test5 = document.getElementById('test5');
var test6 = document.getElementById('test6');
// 이벤트 삭제 : removeEventListener
test6.addEventListener('click', function() { // 클릭하면 function() 함수를 실행하라는 코드
console.log('test6에 들어오면서 test5의 클릭이벤트를 제거 했습니다.');
**test5.removeEventListener('click',fn_test5_1);**
// 이벤트 삭제 효과 : 이벤트 제거 후, test5 진입은 되나 클릭은 안되게 된다.
});
</script>
이벤트 기본 동작이란?
웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다.
- 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다.
- 폼에서 submit 버튼을 누르면 데이터가 전송된다.
- a 태그를 클릭하면 href 속성의 URL로 이동한다.
이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다.
이벤트 기본동작 취소하는 방법 3가지
1)inline
이벤트의 리턴값이 false이면 기본 동작이 취소된다.
<p>
<a href="http://opentutorials.org"
onclick="if(document.getElementById('prevent').checked) return false;">opentutorials</a>
</p>
<p>
<form action="http://opentutorials.org"
onsubmit="if(document.getElementById('prevent').checked) return false;">
<input type="submit" />
</form>
</p>
2)property 방식
리턴 값이 false이면 기본동작이 취소된다.
<p>
<a href="http://opentutorials.org">opentutorials</a>
</p>
<p>
<form action="http://opentutorials.org">
<input type="submit" />
</form>
</p>
<script>
document.querySelector('a').onclick = function(event){
if(document.getElementById('prevent').checked)
return false;
};
document.querySelector('form').onclick = function(event){
if(document.getElementById('prevent').checked)
return false;
};
</script>
3)addEventListener 방식
이 방식에서는 이벤트 객체의 preventDefault 메소드를 실행하면 기본 동작이 취소된다
<label>prevent event on</label>
<input id="prevent" type="checkbox" name="eventprevent" value="on" />
<p>
<a href="http://opentutorials.org">opentutorials</a>
</p>
<p>
<form action="http://opentutorials.org">
<input type="submit" />
</form>
</p>
<script>
document.querySelector('a').addEventListener('click', function(event){
if(document.getElementById('prevent').checked)
event.preventDefault();
});
document.querySelector('form').addEventListener('submit', function(event){
if(document.getElementById('prevent').checked)
event.preventDefault();
});
</script>728x90
반응형