Notice
Recent Posts
Recent Comments
Link
Tags
more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archives
Today
Total
관리 메뉴

JongDDA의 한걸음 한걸음씩

[JavaScript & Jquery] 그룹 이벤트 등록 메소드 본문

개발/프론트엔드

[JavaScript & Jquery] 그룹 이벤트 등록 메소드

종따 2021. 4. 5. 22:43
728x90

그룹 이벤트 등록 메소드

그룹 이벤트 등록 메소드를 사용하면 한 번에 2개 이상의 이벤트를 등록할 수 있다. 즉 선택한 요소에 메소드를 한 번만 적용하여 두 이벤트 이상을 등록할 수 있는 것이다.

 

on() 메소드를 사용한 그룹 이벤트 등록!

- 한번에 이벤트 여러 개를 등록하되, 서로 다른 이벤트 핸들러 등록하기

- 한번에 이벤트 여러 개를 등록하되, 똑같은 이벤트 핸들러 등록하기

 

객체를 사용한 이벤트 다수 등록 -> 키가 이벤트, 밸류가 핸들러

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <title>그룹 이벤트 등록</title>
    <style>
        #sample{
            width: 100px; height: 30px;
            border-radius: 8px; border: none;
            background-color: #cccccc;
            }

    </style>
</head>
<body>
   <input id="sample" type="text">
    <script src= "02_script.js"></script>
</body>
</html>
$("#sample").on({
    click: function(){ console.log("!") }, // 클릭시 ! 하나 출력
    dblclick: function(){ console.log("!!")}, // 더블클릭시 !! 두개 출력
    mouseenter: function(){ $(this).css("background-color", "white")}, // 마우스 얹히면 흰색
    mouseleave: function(){$(this).css("background-color", "#cccccc")} // 마우스 떠나면 #cccccc 색
})

 

다수의 이벤트에 대한 핸들러 하나만 등록

// 다수의 이벤트에 대한 핸들러 하나만 등록
$("#sample").on("click dblclick mouseenter mouseleave", function(){
    console.log("?!?!?!")
})

 

delegate() : 선택한 요소의 하위 요소에 여러 개의 이벤트 등록

$(".container").delegate("div","click",function(){

    $("input").val("델리게이트 했네?!")
})

 

 

one() : 한번만 호출될 이벤트 핸들러 등록!

$("button").one("click", function(){
    window.alert("경고했잖아 왜 눌렀어!!!")
})

off() : 이벤트 등록 전의 아무것도 없던 상태로 돌아가라

$("section > button").on("mouseenter", function(){
    $(this).css("background-color", "yellow") // 마우스 얹히면 노란색
}) 
$("section > button").on("click",function(){
    $(this).css("background-color","red") // 클릭하면 빨간색
    $(this).off()
})

 

728x90
반응형

'개발 > 프론트엔드' 카테고리의 다른 글

[JavaScript & Jquery] AJAX  (0) 2021.04.06
[JavaScript & Jquery] 효과 메소드 (애니메이션 효과)  (0) 2021.04.06
[JavaScript & Jquery] 객체 조작 메소드  (0) 2021.04.04
[JavaScript & Jquery] 토글 클레스(toggleClass)  (0) 2021.04.04
[JavaScript & Jquery] 선택자  (0) 2021.04.04
'개발/프론트엔드' Related Articles more
Comments