인라인 이벤트 모델
이전까지 기본 이벤트 모델에서는 id나 class 등의 선택자나 태그 자체를 가져와 window.onload에 메서드를 만들어 사용하거나, body 태그 안에서 script 태그를 만들어 선택자를 불러와 메서드를 사용하는 방식을 사용했다. 인라인 이벤트 모델도 비슷한데, 이것은 태그안에 직접 이벤트 속성을 넣는 방식이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
function h2click (e) {
alert('클릭');
alert('클릭');
alert('클릭');
}
</script>
</head>
<body>
<h1 onclick="alert('클릭');alert('클릭');alert('클릭')">Click Here</h1>
<h2 onclick="h2click(event)">Click Here</h2>
</body>
</html>
|
cs |
h1 태그 안에 이벤트 속성인 onclick을 이용해 alert를 사용하게 했는데 여러개의 속성을 입력하려면 ;를 이용해 구분을 해주어야 한다. 하지만 속성이 많이 들어가면 코드가 쓸데없이 길어지므로 h2 태그와 같이 메서드를 호출하는 방식으로 짧게 줄여 쓰는 방식을 더 선호한다. 이벤트 객체는 이전에 기본 이벤트 모델과 같은 방법으로 사용할 수 있다.
디폴트 이벤트 제거
몇개의 HTML 태그에는 이미 이벤트 리스너가 포함되어 있는 경우가 있다. a태그(앵커 태그)는 자신을 클릭하면 a태그에 입력된 URL로 이동이 되는데 이것이 디폴트 이벤트이다.
디폴트 이벤트를 제거하는 것은 주로 입력 양식(form 태그) 태그에 주로 사용한다. <input> 태그의 type을 submit(제출)으로 하고 이 버튼을 누르면 자동으로 입력 양식이 개발자가 action에 적은 곳으로 데이터가 보내지게 되는데, 만약 사용자가 양식을 제대로 작성하지 않았는데 입력 양식을 제출을 하게될 수 있기 때문에 이것을 방지하기 위해 사용한다.
먼저 submit의 디폴트 이벤트를 간단하게 제거하는 방법은 이벤트 리스너에서 onsubmit(submit 버튼을 눌렀을 때) 속성에 return false를 입력하면 된다.
|
1
2
3
4
5
6
7
|
<script>
window.onload=function(){
document.getElementById('login_form').onsubmit=function(){
return false;
}
}
</script>
|
cs |
위의 코드를 script 태그에 사용하면 제출 버튼을 눌러도 디폴트 이벤트가 제거가 된 상태라서 아무일도 일어나지 않는다. 이것을 응용해서, form 태그에 type이 password인 input 태그에 비밀번호와 비밀번호 확인 역할을 하게 만들어서 조건문으로 둘의 입력값이 동일하다면 submit의 디폴트 이벤트가 정상 작동을 하고 그렇지 않으면 디폴트 이벤트가 작동하지 않게 만들 수 있다.
|
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
31
32
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
window.onload=function(){
document.getElementById('login_form').onsubmit=function(){
let pass=document.getElementById('pass').value;
let pass_check=document.getElementById('pass-check').value;
if(pass == pass_check){
alert('비밀번호 확인');
}else{
alert('비밀번호가 일치하지 않음');
return false;
}
}
}
</script>
</head>
<body>
<form action="none" id="login_form">
<label for='name'>이름</label><br>
<input type="text" name="name" id="name"><br>
<label for='pass'>비밀번호</label><br>
<input type="password" name="pass" id="pass"><br>
<label for='pass-check'>비밀번호 확인</label><br>
<input type="password" id="pass-check"><br>
<input type="submit" value="제출">
<input type="reset" value="다시입력">
</form>
</body>
</html>
|
cs |
위는 기본 이벤트 모델일 때 사용하는 방식인데, 이때는 단순히 return false를 입력하면 되지만, 인라인 이벤트 모델을 사용할 때는 form 태그의 안에 onsubmit 이벤트 속성에 "return 함수()" 형태를 입력해야한다.
|
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
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
function whenSubmit(){
let pass=document.getElementById('pass').value;
let pass_check=document.getElementById('pass-check').value;
if(pass == pass_check){
alert('비밀번호 확인');
}else{
alert('비밀번호가 일치하지 않음');
return false;
}
}
</script>
</head>
<body>
<form action="none" onsubmit="return whenSubmit()">
<label for='name'>이름</label><br>
<input type="text" name="name" id="name"><br>
<label for='pass'>비밀번호</label><br>
<input type="password" name="pass" id="pass"><br>
<label for='pass-check'>비밀번호 확인</label><br>
<input type="password" id="pass-check"><br>
<input type="submit" value="제출">
<input type="reset" value="다시입력">
</form>
</body>
</html>
|
cs |
이벤트 전달(버블링 / 캡처링)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
*{border: 3px solid black;}
</style>
</head>
<body>
<div onclick="alert('outer-div')">
<div onclick="alert('inner-div')">
<h1 onclick="alert('header')">
<p onclick="alert('Paragraph')">Paragraph</p>
</h1>
</div>
</div>
</body>
</html>
|
cs |
이전에 이벤트의 종류에 포커스(Focus) 이벤트 부분에서 언급했었던 내용이다.
이벤트의 종류 : https://miyakita.tistory.com/119
JavaScript - 이벤트 종류
1-1. 마우스 이벤트 이벤트 이름 설명 mouseenter 포인터가 이벤트 핸들러로 등록된 요소 위로 이동했을 때 mouseover 포인터가 이벤트 핸들러로 등록된 요소나 그 자식 요소 위로 이동했을 때 mousemove 포인터..
miyakita.tistory.com
버블링(bubbling)과 캡처링(capturing)이라고 부른다. 버블링은 이벤트가 발생했을 때 자식 노드에서 부모 노드 순으로 이벤트가 연쇄적으로 실행이 되는 것을 의미하고 캡처링은 반대로 부모 노드에서 자식 노드 순으로 이벤트가 연쇄적으로 실행이 되는 것을 의미한다. 이벤트 버블링은 사용하지만 이벤트 캡처링은 IE와 jQuery에서 사용하지 않는 기능이다.
|
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
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
*{border: 3px solid black;}
</style>
</head>
<body>
<div onclick="onClick(this)">
<div onclick="onClick(this)">
<h1 onclick="onClick(this)">
<p onclick="onClick(this)">Paragraph</p>
</h1>
</div>
</div>
<script>
function onClick(element, e){
e=window.event||e;
alert('CLICKED');
if(e.stopPropagation){
e.stopPropagation();
}else{
e.stopPropagation=true;
}
}
</script>
</body>
</html>
|
cs |
e = e || window.Event 를 기억하자
'프로그래밍 공부 > JavaScript' 카테고리의 다른 글
| JavaScript - 예외 처리 (0) | 2019.12.23 |
|---|---|
| JavaScript - DOM Level 2 이벤트 모델 (0) | 2019.12.20 |
| JavaScript - 이벤트 발생 객체와 이벤트 객체 / 이벤트 강제 실행 (0) | 2019.12.19 |
| JavaScript - 고전 이벤트 모델(기본 이벤트 모델) (0) | 2019.12.19 |
| JavaScript - 이벤트 종류 (0) | 2019.12.19 |
