jQuery: event ( mouse, keyboard, form, browser, document loading, handler , event object)

jQuery: event ( mouse, keyboard, form, browser, document loading, handler , event object)

2021. 3. 2. 17:37ㆍ코딩공부

event

웹에서 발생할 수 있는 특정한 사건

$("선택자").{eventtype}(function(){
	이벤트 문장;
})

mouse event

click()

: mousedown+mouseup

$("p:eq(0)").click(function(){
      $(this).addClass("on");
})

hover()

: mouseover+mouseout

$("선택자").hover(function(){
	mouseover에서 실행될 이벤트 문장
},function(){
	mouseout에서 실행될 이벤트 문장
});

contextmenu()

: mouse right click

            $("div").contextmenu(function() {
                $(this).toggleClass("bg");
            })

마우스 우클릭 금지

<body>
    <h1>마우스 오른쪽 클릭 금지</h1>
    <div oncontextmenu="return false">자바스크립트</div>
    <h1>마우스 오른쪽 크릭 금지</h1>
    <div class="test2">제이쿼리</div>
</body>

$(function(){
    $(".test2").contextmenu(function(e){
         e.preventDefault();
    })
})

마우스 우클릭 메뉴 만들기

html 마크업에서 div.popMenu.hide 로 메뉴 만든 후 👇

$(function(){
    $(".menu>li>a").contextmenu(function(e){
        $(".popMenu").removeClass("hide").css({
            "top":e.clientY+10,
            "left":e.clientX+10
        })
        e.preventDefault();
    })
    
    $(document).click(function(){
        $(".popMenu").addClass("hide");
    })
})

keyboard

keydown()

keyup()

keypress()

: kewydown+keyup

영문자, 숫자, 기호 키에서만 동작. (alt, 화살표 등 기능키에서는 동작 x)

$("input.text2").keydown(function(e){
      console.log(e.code);
      console.log(e.keyCode);
})

$("input.text3").keypress(function(e){
       console.log(e.code);
       console.log(e.key);
       console.log(e.keyCode);
 })

e.code : 키보드 명칭

e.keycode : 키보드 고유번호

e.key : 입력한 키보드 값

form

focusin(), focusout()

focus(), blur() : foccusin/out 보다 강제성이 있음

select() : 드래그로 선택 혹은 입력 양식의 내용이 바뀔 때

change()

 $("#tel").change(function(e){
        console.log(e);
        console.log($(this).val()); //선택한 select의 value 값
        console.log($(this).prop("selectedIndex")) //선택한 select의 순서
 })

event handler

on()

        $(function() {
           // 한가지 이벤트 적용
            $(".btn1").on("click", function() {
                $(this).next().css("background", "pink");
            })
            
           // 두가지 이벤트 적용
            $(".btn2").on("mouseover focus", function() {
                $(this).next().css("background", "gold");
            })
            
           // multiple 이벤트 적용 
            $(".btn3").on({
                "click":function(){
                    $(this).next().css("font-size","50px")
                },
                "dblclick":function(){
                    $(this).next().css("background","lightgreen")
                },
                "mouseout":function(){
                    $(this).next().css("text-decoration","underline")
                }
            })
        })

bind()

on()과 같은 효과로 사용되지만 곧 사라질 예정.

off()

on에 적용시킨 이벤트 해제

            $("p").on("mouseover", function(){
                $(this).css("background","lavender");
            })
            $("button").on("click",function(){
                $("p").off("mouseover");
            })
            
            var wWidth= $(window).width();
            console.log(wWidth);
            
            if(wWidth>767){
                $("p").on("mouseover",function(){
                    $(this).css("background","pink")
                })
            } else{
                $("p").off("mouseover")
            }

trigger()

자동으로 움직이는 무언가를 구현할 때 대부분 사용

       var num=0;
        
        $("button:eq(0)").click(function(){
            num++;
            $("span").text(num);
        })
        
        $("button:eq(1)").click(function(){
            $("button:eq(0)").trigger("click");
        })

event object

scroll()

            $(window).scroll(function(){
                var scrollY=$(this).scrollTop();
                $(".text").text(scrollY);
            })

윈도우에 스크롤 이벤트가 발생하면, .text에 scrollY 값(scrollTop의 위치값) 출력

resize()

            $(window).resize(function(){
                var resizeW= $(this).width();
                $(".text").text(resizeW);
            })

윈도우에 리사이즈 이벤트가 발생하면, .text에 현재의 너비값 출력

mousewheel

            $("html,body").on("mousewheel DOMMouseScroll",function(e){
                console.log(e.originalEvent);
                var event = e.original;
                if(event.detail){ //조건을 만족하면 파이어폭스
                   var d= event.detail*-40 //wheelup-3 wheeldown 3
                } else { //아니면 나머지 브라우저
                    var d= event.wheelDelta; // wheelup 120, wheeldown -120
                }
            })

mousewheel : 익스플로러, 크롬, 사파리, 오페라

DOMMouseScroll : 파이어폭스

'코딩공부' 카테고리의 다른 글

반응형 작업 시 유의점 (0)	2021.04.29
다양한 퍼블리싱 회사 차이점 ( si, sm, 사이트운영/관리 ) (0)	2021.04.14
form: input, select, radio, textarea 와 label로 placeholder 대체하기 (0)	2021.04.08
프로그래밍 기초 (0)	2021.02.06
HTML.CSS. 마크업할 때, 클론코딩할 때 주의할 점 (0)	2020.12.09

코딩하지아