$(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());
});
한번 이벤트를 처리하고 나면 이벤트 리스너를 삭제하여 더이상 이벤트를 처리하지 않는다.
'Javascript' 카테고리의 다른 글
| js 모듈 의존성 줄이기 (0) | 2023.09.24 |
|---|---|
| AJAX using JQuery (0) | 2023.09.24 |
| Javascript this (0) | 2023.09.23 |
| JQuery effect (0) | 2023.09.22 |
| JQuery 입문 (1) | 2023.09.22 |
