인라인 이벤트 모델은 HTML페이지의 가장 기본적인 이벤트 연결 방법이다.
<body>
<h1 onclick="">Click</h1>
</body>위 코드와 같이 인라인 이벤트 모델은 HTML태그 요소노드에 이벤트 속성을 추가하여 구현한다.
이벤트 속성에는 다음과 같이 자바스크립트 코드를 작성하여 실행할 수 있다.
<body>
<h1 onclick="alert('인라인 이벤트 실행')">Click</h1>
</body>
이벤트 속성에 여러 줄의 자바스크립트 코드도 입력이 가능하다.
<head>
<script>
function alpha () {
var alpha = 10;
alert(alpha);
}
</script>
</head>
<body>
<h1 onclick="alpha();">Click</h1>
</body>하지만 이벤트 속성에 여러줄의 코드를 사용하면 지저분해져 가독성이 떨어진다.
이 경우 스크립트 코드로 함수를 구현한 뒤 함수를 호출하는 방식을 많이 사용한다.
<head>
<script>
function eventProp (event) {
console.log(event);
alert(event);
}
</script>
</head>
<body>
<h1 onclick="eventProp(event);">Click</h1>
</body>위 코드와 같이 이벤트를 호출할 때 매개변수를 넣었다.
이벤트 객체를 전달하는 방법이다.
이러한 이벤트 객체를 PointerEvent 라고 한다.
클릭하여 이벤트가 호출되면 콘솔창에 이벤트 객체에 대한 정보가 다음과같이 출력된다.
디폴트 이벤트 제거
일부 HTML 태그는 이미 이벤트 리스너가 있다.
이러한 것을 디폴트 이벤트 라고 한다.
예를들어 a태그는 클릭하면 다른페이지로 이동하는데 이것이 바로 a태그가 가진 디폴트 이벤트이다.
디폴트 이벤트를 제거하는 것은 입력양식에서 많이 사용된다.
입력 양식의 submit 버튼을 누르면 자동으로 입력 양식을 제출하고 페이지를 새로고침하는 것이 디폴트 이벤트이다.
<body>
<form id="my-form">
<label>비밀번호</label>
<input type="password" name="passk" id=pass/></br>
<label>비밀번호 확인</label>
<input type="password" id="pass-check"/>
<input type="submit" value="제출" />
</form>
</body>window.onload = function () {
document.getElementById('my-form').onsubmit = function(){
return false;
};
};위와 같이 고전 이벤트 모델로 코드를 작성하고 실행하면 submit 버튼이 작동되지 않는다.
사용자가 회원가입 양식을 제대로 작성하지도 않았을 때에 입력양식을 제출해서는 안된다.
입력 양식에 입력한 비밀번호가 서로 일치하지 않는경우 아래 코드와 같이 유효성 검증을 통해 디폴트 이벤트를 제거하는 고전 이벤트 모델 로직을 구현한다.
window.onload = function () {
document.getElementById('my-form').onsubmit = function(){
var pass = document.getElementById('pass').value();
var passCheck = document.getElementById('pass-check').value();
if(pass == passcheck) {
alert('성공');
}else{
alert('비밀번호가 일치하지 않습니다.');
return false;
}
};
};위와 같이 입력 양식에 값이 제대로 들어갔는지 확인하는 것을 유효성 검사라고 한다.
고전 이벤트 모델은 return false를 입력하면 되지만 인라인 이벤트 모델을 사용할 때는 form태그의 onsubmit속성에 "return 함수( )" 형태로 입력해야 한다.
<script>
function whenSubmit(){
return false;
}
</script>
<body>
<form onsubmit="return whenSubmit();"></form>
</body><script>
window.onload = function () {
document.getElementById('my-form').onsubmit = function(){
return false;
};
};
</script>
<body>
<form id="my-form"></form>
</body>고전 이벤트 모델과 인라인 이벤트 모델의 디폴트 이벤트를 구현한 두 코드의 차이점이다.
<script>
function whenSubmit(){
var pass = document.getElementById('pass').value();
var passCheck = document.getElementById('pass-check').value();
if(pass == passcheck) {
alert('성공');
}else{
alert('비밀번호가 일치하지 않습니다.');
return false;
}
}
</script>
<body>
<form onsubmit="return whenSubmit();">
<label>비밀번호</label>
<input type="password" name="passk" id=pass/></br>
<label>비밀번호 확인</label>
<input type="password" id="pass-check"/>
<input type="submit" value="제출" />
</form>
</body>
'JavaScript > DOM & Event' 카테고리의 다른 글
| 이벤트 - DOM Level 2 : 표준 이벤트 모델 (0) | 2022.01.20 |
|---|---|
| 이벤트 - DOM Level 0 : 고전 이벤트 모델 (0) | 2022.01.20 |
| 문서객체 스타일조작, 제거 removeChild( ), parentNode, appendChild( ), childNode (0) | 2022.01.19 |
| 문서객체 가져오기 getElementBy (Id, Name,TagName, class) / querySelector (0) | 2022.01.19 |
| 문서 객체 만들기 (DOM) createElement , createTextNode , appendChild, setAttribute , getAttribute , innerHTML, textContent속성 (0) | 2022.01.18 |