일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 영어회화
- 영어 회화
- animation
- effect
- 재택근무
- 결혼
- 영어공부
- 설날
- 예비맘
- 초코맘
- 1일 1단어
- HTML
- 달리기
- 1일 1패턴
- 스타일 가이드
- 신혼생활
- css
- javascript
- 청첩장
- 업무
- 가을
- 1일 1독서
- event
- 결혼준비
- 산책
- 신혼
- 용산아이파크몰
- 자바스크립트 스타일 가이드
- 출산휴가
- 1일 1영어회화
- Today
- Total
코딩물고기
[J] JavaScript & jQuery 공부하기 #21 본문
경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.
26. 이벤트
- 이벤트 처리
* 이벤트(event)
- 사용자가 문언가를 클릭하거나 혹은 대상 위에 마우스를 가져가거나
특정 키를 누를 때 상호작용이 발생하는 것 등
브라우저에서 일어나는 모든 동작을 의미한다
- 이벤트 핸들러를 통해 이벤트에 대한 특정 작업 처리를 할 수 있다
* 캡처링(capturing)
- 이벤트를 이벤트가 발생한 요소의 자식 노드들로 전파함
* 버블링(bubbling)
- 캡처링과는 반대로, 이벤트가 일어난 요소에서 이벤트 요소를 포함하고
있는 부모 요소까지 올라가며 이벤트를 검사한다.
* 고전 이벤트 모델
- 문서 객체의 이벤트 속성으로 이벤트를 연결하는 방법
- 이벤트 하나에 이벤트 리스너 하나만 연결 가능
< script type="text/javascript">
window.onload = function () {
var header = document.getElementById('header');
header.onclick = function(){
alert('누르셨군요');
// null 할당 시 이벤트 제거
header.onclick = null;
}
};
</ script>
< body>
< h1 id="header">눌러보세염</ h1>
</ body>
* DOM Level 0 모델의 처리
* 인라인 이벤트 모델
- HTML 페이지의 가장 기본적인 이벤트 연결 방법
- 태그 안에 직접 이벤트 속성 및 이벤트 리스너를 정의함
< body onload="alert('어서오세요')" onunload="alert('안녕히가세여')">
< h1>좋은 아침입니다.</ h1>
</ body>
* 디폴트 이벤트 제거
- 이벤트 리스너가 이미 정의되어 있는 이벤트를 디폴트 이벤트라 함
- false를 리턴하는 이벤트 리스너를 정의하여 제거함
< script type="text/javascript">
function whenSubmit(){
// 유효성 검사
return false;
}
</ script>
< form onsubmit="return whenSubmit()"></ form>
* 이벤트 전달 막기
- 인터넷 익스플로러 : 이벤트 객체의 cancelBubble 속성을 true로 변경
- 그 외 : stopPropagation() 메소드 사용
* 예제
< script type="text/javascript">
function passwordCheck(){
var pwd1 = document.getElementById("pwd1");
var pwd2 = document.getElementById("pwd2");
if(pwd1.value != pwd2.value){
alert("비밀번호가 일치하지 않습니다.");
pwd2.focus();
pwd1.select();
return false;
}
}
</ script>
< body>
< form name="myForm" onsubmit=" return passwordCheck()" action = "ok.html">
비밀번호 : < input type="password" name = "passwd1" id="pwd1">
비밀번호 확인 : < input type="password" name = "passwd2" id="pwd2">
< input type="submit" value="비밀번호 확인">
</ form>
</ body>
'코딩물고기의 IT월드' 카테고리의 다른 글
[J] JavaScript & jQuery 공부하기 #23 (0) | 2019.04.08 |
---|---|
[J] JavaScript & jQuery 공부하기 #22 (0) | 2019.04.08 |
[J] JavaScript & jQuery 공부하기 #20 (0) | 2019.04.05 |
[J] JavaScript & jQuery 공부하기 #19 (0) | 2019.04.05 |
[J] JavaScript & jQuery 공부하기 #18 (0) | 2019.04.05 |