JavaScript 이벤트, 간소한 ajax처리

이벤트 활용

이벤트 속성과 이벤트핸들러(함수)를 연동하여 이벤트 발생시 특정기능을 하도록 하는 것

이벤트 설정방법

고전 이벤트 모델

표준 이벤트 모델

고전 이벤트 모델

요소객체가 가지고 있는 이벤트 속성에 이벤트 핸들러를 연결하는 방법

이벤트를 제거할 때는 속성값에 null값을 넣어주면 됨

이벤트 발생객체는 핸들러 내부에서 this로 표현 / 스타일변경 가능

매개변수로 이벤트 정보전달(e, window.event) ->이벤트객체 전달

예) 클릭시 이벤트설정

var h = document.getElementById('id명');

h.onclick = function{

수행기능 설정;

h(this).onclick = null; //한번만 실행

};

<div id="area"></div>

<span id="checkid"></span>

<script>

//고전방식의 이벤트처리

//속성값에 바로 함수(이벤트핸들러) 입력!

onload = function () {

var ar = document.getElementById('area');

ar.onmouseover = function () {

ar.setAttribute('style', 'background-color:tomato; color:aqua;');

ar.appendChild(document.createTextNode('너무 졸립니다.'));

}

표준 이벤트 모델 + ajax 처리

w3에서 공식적으로 지정한 이벤트 모델

한번에 여러가지 이벤트핸들러 설정 가능

this키워드가 이벤트 발생객체 의미

메소드	내용
addEventListener(이벤트 이름, 핸들러, 확장)	확장:버블링/캡쳐링
removeEventListener(이벤트 이름, 핸들러)	이벤트 삭제

var h = document.getElementById('id명');

h.addEventListener('click', function(){

수행기능 설정;

};

<div id="area"></div>

아이디입력<input type="text" name="id" id="id">

<span id="checkid"></span>

<script>

//고전방식의 이벤트처리

//속성값에 바로 함수(이벤트핸들러) 입력!

onload = function () {

var ar = document.getElementById('area');

ar.onmouseover = function () {

ar.setAttribute('style', 'background-color:tomato; color:aqua;');

ar.appendChild(document.createTextNode('너무 졸립니다.'));

}

//표준이벤트처리

//addEventListener()등록하여 처리하는것

var sec1 = document.getElementsByTagName('section');

sec1[0].addEventListener('click', function(){

var inImg = document.createElement('img');

inImg.setAttribute('src','https://encrypted-tbn0.gstatic.com/images?q=tbn:

ANd9GcTx1epZGCGpBv98tZKNz8V5MG-rdLl3kS5qmlIY4ChIhzF8WNZHIw');

inImg.setAttribute('width', 200);

inImg.setAttribute('height',200);

sec1[0].appendChild(inImg);

for(var key in e){

console.log(key+" : "+e[key]);

}

console.log("이벤트 발생객체 : "+e.target.tagName);

for(var k in e.target)

{

console.log(k+" : "+e.target[k]);

}

});

}

var inputId = document.getElementById('id');

var id = 'admin';

var checkId = "";

inputId.onkeypress = function (e) {

console.log(this);

console.log(e.key);

var temp = document.getElementById('checkid');

// temp.innerText +=e.key;

checkId += e.key;

if (id == checkId) {

temp.innerText = "중복아이디가 있습니다.";

temp.style.color = 'red';

checkId = "";

} else {

temp.innerHTML = "중복되지 않습니다.";

}

}

기본 이벤트 제거

onsubmit이벤트 속성에 이벤트 핸들러 연결할때 false를 return함

유효성 검사

이벤트 핸들러에 데이터 비교 후 맞지 않으면 false를 리턴