[jQuery] jQuery event 이벤트
by mini_min[jQuery] jQuery event 이벤트
✔️ jQuery 이벤트
-- 이벤트의 연결(event binding)
$("selector").click(function(event) { // 실행하고자 하는 jQuery 코드 });
$("selector").bind("click", function(event) { // 실행하고자 하는 jQuery 코드 });
$("selector").on("click", function(event) { // 실행하고자 하는 jQuery 코드 });
$("body").on({"click": function(event) { // 실행하고자 하는 jQuery 코드 }}, "selector");
$("body").on("click", "selector", function(event) { // 실행하고자 하는 jQuery 코드 });
jQuery 1.7부터는 .bind()나 .click() 메소드를 사용해도, 내부적으로 .on() 메소드를 이용하여 이벤트 핸들러와 바인
-- .on() 메소드
선택한 요소에 어떤 타입의 이벤트라도 연결할 수 있다.
하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결할 수 있다.
선택한 요소에 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 같이 연결할 수 있다.
사용자 지정 이벤트(custom event)를 위해 이벤트 핸들러로 데이터를 넘길 수 있다.
차후에 다루게 될 요소를 이벤트에 바인딩할 수 있다.
-- .off() 메소드
더 이상 사용하지 않는 이벤트와의 바인딩(binding)을 제거한다.
-- 이벤트
.bind()
일치된 집합에 있는 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당한다. 1.7 부터는 .on() 사용을 권장
.unbind()
확장 집합의 모든 엘리먼트에서 전달된 매개변수에 따라 이벤트 핸들러를 선택적으로 제거한다.
-- 이벤트 핸들러 함수 내부의 $(this)
이벤트를 발생시킨 객체~~~
📓 예제 1
$(function(){
$(".btn1").click(function(){
alert("클릭1");
});
$(".btn2").on("click", function(){
alert("클릭2..")
});
$(".btn4").click(function(){
$(".btn3").on("click", function(){ //이벤트 바인딩
alert("클릭3");
});
$(".btn3").text("클릭가능");
});
$(".btn5").click(function(){
$(".btn3").off("click"); //이벤트 바인딩 제어
$(".btn3").text("클릭불가");
});
});
📓 예제 2
$(function(){
$(".btn1").click(function(){
$(".box").append("<button type='button' class='btn btn2>'클릭</button>");
});
//나중에 동적으로 추가된 버튼은 기존에 등록된 이벤트는 적용되지 않는다.
//btn1 을 이용하여 추가된 버튼은 이벤트가 등록되지 않는다.
/* $(".btn2").on("click", function(){
alert("클릭");
}); */
//btn1 을 이용해 추가된 버튼도 이벤트 등록
//범위 : 바디, 추가할 이벤트 클릭 , 적용될 클래스
$("body").on("click", ".btn2", function(){
alert("동적 클릭 추가")
});
});
📓 예제 3 - trigger
$(function(){
$(".btn1").click(function(){
$(".box").append("<button type='button' class='btn btn2>'클릭</button>");
});
//나중에 동적으로 추가된 버튼은 기존에 등록된 이벤트는 적용되지 않는다.
//btn1 을 이용하여 추가된 버튼은 이벤트가 등록되지 않는다.
/* $(".btn2").on("click", function(){
alert("클릭");
}); */
//btn1 을 이용해 추가된 버튼도 이벤트 등록
//범위 : 바디, 추가할 이벤트 클릭 , 적용될 클래스
$("body").on("click", ".btn2", function(){
alert("동적 클릭 추가")
});
});
✔️ jQuery 이벤트 중지
-- 이벤트 중지
- Event.preventDefault() : 프리벤트디폴트함수는 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지 않고 그 이벤트를 취소한다.
- Event.stopPropagation() : 현재 이벤트가 상위로 전파되지 않도록 중단한다. 즉, 캡처 및 버블 링 단계에서 현재 이벤트가 더 이상 전파되지 않도록 한다.
- Event.stopImmediatePropagation() : 상위 뿐 아니라 같은 레벨로도 이벤트가 전파되지 않도록 중단한다.
- return false; : jquery 에서는 event.preventDefault()와 event.stopPropagation()를 모두 수행한것과 같다.
📓 예제 1
$(function(){
$("#linkList1 a").on("click", function(e){
e.preventDefault();
alert("이 링크는 동작하지 않습니다.")
});
$(".btn1").on("click", function(){
//링크 적용됨
$("#linkList1").append("<li><a href='https://naver.com'>네이버</a></li>")
});
$("#linkList2").on("click", "a", function(e){
e.preventDefault();
alert("이 링크는 동작하지 않습니다!!")
});
$(".btn2").on("click", function(){
//링크 동작 안함
$("#linkList2").append("<li><a href='https://naver.com'>네이버</a></li>")
});
$("#linkList3").on("click", "a", function(e){
alert("이 링크는 동작하지 않습니다!!")
return false; //프리벤트와 동일한 역할이다.
});
});
✔️ jQuery 마우스 이벤트
.click() : 자바스크립트의 "click" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "click" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.contextmenu() : 마우스 우측 버튼을 누르면 실행. 이벤트 핸들러를 javascript의 "contextmenu" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
.dblclick() : 마우스를 더블클릭하면 실행. 이벤트 핸들러를 javascript의 "dblclick" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
.hover() : 하나 또는 두 개의 핸들러를 일치하는 요소에 바인딩하여 마우스 포인터가 요소에 들어오고 나갈 때 실행되도록 한다.
.mousedown() : 이벤트 핸들러를 javascript의 "mousedown" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
.mouseenter() : 마우스가 요소에 들어갈 때 발생하는 이벤트 핸들러를 바인딩하거나 요소에서 해당 핸들러를 트리거.
마우스 포인터가 해당 영역 안으로 이동하면 실행. 지정된 요소만 적용되며 자식 요소는 적용되지 않음
.mouseleave() : 마우스가 요소를 떠날 때 시작될 이벤트 핸들러를 바인딩하거나 요소에서 해당 핸들러를 트리거
마우스 포인터가 해당 영역 밖으로 이동하면 실행. 지정된 요소만 적용되며 자식 요소는 적용되지 않음
.mousemove() : 이벤트 핸들러를 javascript의 "mousemove" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
마우스를 움직이면 실행
.mouseout() : 이벤트 핸들러를 javascript의 "mouseout" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
마우스 포인터가 해당 영역 밖으로 이동하면 실행. 지정된 요소 및 자식 요소에도 적용
.mouseover() : 이벤트 핸들러를 javascript의 "mouseover" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
마우스 포인터가 해당 영역 안으로 이동하면 실행. 지정된 요소 및 자식 요소에도 적용
.mouseup() : 이벤트 핸들러를 javascript의 "mouseup" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
마우스 버튼을 뗄때 실행.
📓 예제 1
$(function(){
$("div.item").dblclick(function(){
alert("더블클릭")
});
$("div.item").contextmenu(function(){
alert("우측클릭")
});
//해당 영역으로 이동하면 실행. 지정요소 및 자식에서도 적용
$("#wrap1").mouseover(function(){
$("#wrap1 p").css("background", "yellow")
});
//해당 영역에서 나가면 실행
$("#wrap1").mouseout(function(){
$("#wrap1 p").css("border", "3px solid red")
});
//해당 영역에서 이동하면 실행. 자식 적용 안된다.
$("#wrap2").mouseenter(function(){
$("#wrap2 p").css("background", "yellow")
});
//해당 영역에서 나가면 실행. 자식 적용 안된다.
$("#wrap2").mouseleave(function(){
$("#wrap2 p").css("border", "3px solid red")
});
});
📓 예제 2
$(function(){
//jquery 이벤트 핸들러에서는 $(this)는 이벤트 발생시킨 객체
$("table.tr tre:gt(0)").hover(
function(){ $(this).addClass("hover");},
function(){ $(this).removeClass("hover");}
);
$(".btnUpdate").click(function(){
let a = $(this).attr("data-hak")
alert(a);
});
$(".btnDelete").on("click", function(){
let a = $(this).attr("data-hak")
alert(a);
});
});
✔️ jQuery 키보드 이벤트
-- 키보드 관련 이벤트
.keydown() : 이벤트 핸들러를 javascript의 "keydown" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
.keypress() : 이벤트 핸들러를 javascript의 "keypress" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
.keyup() : 이벤트 핸들러를 javascript의 "keyup" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
-- 키보드 관련 이벤트
.blur() : 이벤트 핸들러를 javascript의 "blur" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
.change() : 이벤트 핸들러를 javascript의 "change" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
.select() : 이벤트 핸들러를 javascript의 "select" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
.submit() : 이벤트 핸들러를 javascript의 "submit" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
.focus() : 이벤트 핸들러를 javascript의 "focus" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
.focusin() : "focusin" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "focusin" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
부모 요소에서 이벤트 감지. 이벤트 버블링 지원
.focusout() : "focusout" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "focusout" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
이벤트 버블링 지원
📓 예제 1
$(function(){
$("input").not($(":button")).keypress(function(evt){
if(evt.keyCode===13){ //엔터이면, //input 뿐만 아니라 버튼으로도 넘어가야해서 다 찾아냄
const fields = $(this).parents("form,body").find("button,input,textarea,select");
let index = fields.index(this); //이벤트 발생객체의 인덱스
if(index > -1 && (index+1) < fields.length){
fields.eq(index+1).focus();
}
return false;
}
});
});
$(function(){
$(".inputs").keyup(function(){
let limit = $(this).attr("maxlength");
//맥스 길이 없으면 이벤트 처리할 필요 없이 나가기
if(! limit){
return false;
}
if($(this).val().length >= limit){
$(this).closest("tr").next().find(".inputs").focus();
return false;
}
});
});
'JSP' 카테고리의 다른 글
| [AJAX] AJAX 란? (get 방식 / post 방식) (0) | 2022.10.19 |
|---|---|
| [jQuery] jQuery <input> 요소 선택자, 직렬화 (0) | 2022.10.19 |
| [jQuery] jQuery css , attr 추가, 프로퍼티 설정 (0) | 2022.10.19 |
| [jQuery] jQuery parent_closest , find, children (0) | 2022.10.19 |
| [jQuery] jQuery append 요소 추가, 요소 삭제 (0) | 2022.10.19 |
블로그의 정보
개발자 미니민의 개발로그
mini_min