JQuery event

 

$(function() {

$('td').click(function(e){

console.log("event[표준객체]:"+e);

console.log("e.target[표준객체]:"+e.target);

console.log(e.target.firstChild.nodeValue);

console.log("this :"+this);

console.log(this.firstChild.nodeValue);

console.log("e.target[표준객체]--> jQuery객체의 text메소드 호출:"+$(e.target).text());

});

});

$(function); ==> window onload 시 function 등록 

 

javascript 표준객체에서는 jQuery의 함수를 사용할 수 없다.

jQuery 의 함수를 사용하려면 $()로 객체를 Wrapper 객체로 만들어주어야 한다. 

 

$('td').click(function); ==> td태그의 click 이벤트 리스너에 function 등록 

 

e = 발생 이벤트 

e.target = 이벤트가 발생한 객체

$(e.target) = 이벤트가 발생한 객체의 랩퍼 객체 

 

 

$('#txtInput').keyup(function(e){

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

console.log("keyCode:"+e.keyCode);//ASCIIcode

$('#txtKeyCode').val(`${e.key}[${e.keyCode}]`);

});

키 이벤트의 프로퍼티 key, keyCode

 

key = 입력한 키

keyCode = 입력한 키의 아스키코드

 

key는 문자 뿐만아니라 enter, spacebar, shift, 등 모든 키를 받는다. 

 

$('').val() == Element.value 

val(); = get

val(param); = set param in element.value

 

 

$().text() == element.innerText

$().html() == element.innerHTML

$(e.target).html('jQuery에서 제공하는 Event 핸들링 메소드'+ ++clickCount);

 

$('#mouseArea').on('mouseenter mouseleave',function(){

if(e.type=='mouseenter'){

enterCount++;

}else if(e.type=='mouseleave'){

leaveCount++;

}

});

 

.on() 이벤트 바인딩 함수

지금까지 나온 .click(), .keyup() 등은 특정 이벤트를 지정하여 그 이벤트에 대해서만 처리하는 리스너를 만드는데

.on() 함수는 어떤 타입의 이벤트라도 처리할 수 있고, 여러 이벤트를 처리할 수도 있다.

 

위 예제는 mouseenter 또는 mouseleave 이벤트가 발생하면 실행할 함수를 정의했는데 e.type으로  이벤트의 타입을 

구분하고 각 이벤트마다 다른 처리를 하였다. 

 

on(event, [childSelector, data,] function) 

event와 event를 처리할 function이 필수 인자 

특정 자식객체에게만 접근할 때는 childSelector, function을 수행하는데 필요한  data가 있다면 data를 추가로 입력할 수 있다.

$('#btnAdd').click(function(){

let item_no =$('li').length;

$('ul').append(`<li>list item ${item_no}</li>`);

});

$('ul').on('click','li',function(e){

alert($(e.target).text());

});

 

버튼을 클릭하면 ul 자식으로 li객체가 생성된다. 

li객체는 최초 로딩때는 존재하지 않다가 ul 객체에 이벤트가 발생하면 동적으로 생성되는 객체이다. 

이렇게 동적으로 생성되는 객체에 이벤트 리스너를 등록하려면 on함수를 사용한다. 

$('ul').on('click','li',function(e){...});

ul객체에 click 이벤트를 등록함과 동시에 그 자식 li도 click 이벤트를 등록한다. 

 

 

일회용 이벤트 리스너 만들기

one() 함수 사용

$('li').one('click',function(e){

alert($(e.target).text());

});

한번 이벤트를 처리하고 나면 이벤트 리스너를 삭제하여 더이상 이벤트를 처리하지 않는다.