은은하게 코드 뿌시기

제이쿼리(jQurey) -이벤트 본문

웹/제이쿼리 JSTL

제이쿼리(jQurey) -이벤트

은은하게미친자 2022. 11. 10. 17:27
728x90

이벤트

: 사이트에 방문자가 취하는 모든동작

 

단독이벤트 등록 대상      /종류 / 이벤트 핸들러
$("#btn").click(function(){
    스크립트 코드

});
그룹이벤트 등록 대상      /등록/종류           / 핸들러
$("#btn").on("이벤트종류",function(){
    스크립트코드

});

이벤트의 종류

마우스 이벤트
click 클릭했을때 마우스 포인터로 눌럿다가 떼었을때
dbclick 더블클릭 했을때
hover mouseenter 와 mouseleave 이벤트를 한번에 bind
mousedown 마우스를 눌럿다가 떼엇을때
moudseenter 마우스가 진입했을때 
mouseleave 마우스가 노드에서 벗어났을때
mousemove 마우스를 움직였을때
mouseout 마우스 포인터가 떠났을때
mouseover 노드 영역에서 마우스를 올려놓았을때 ( 내부노드까지 이벤트를 감지)
mouseup 마우스 포인터를 노드에 올려놓고 마우스 버튼으 눌럿다 떼었을때 발생
toggle 클릭 이벤트 핸들러를 바인딩 하고 클릭할때 마다 실행될 함수들을 차례대로 실행
문서로딩 이벤트
ready 해당 페이지가 로딩되었을때 (처음 읽힐때 )
unload 해당 페이지를 빠져 나갈 때 발생
폼 이벤트
blur 노드에서 포커스가 떠날때
change 노드의 값이 변경될 때
focus 노드의  포커스를 획득 했을때 발생
select 유저가 텍스트를 선택 했을때
submit 폼의 내용을 전송할 때에 발생
키보드 이벤트
keydown 키보드를 눌렀을때 발생
keypress 키보드를 계속 누르고 있을때 발생
keyup 키보드를 눌렀다가 떼었을때 발생
웹 브라우저 이벤트  
resize 윈도우 사이즈의 변화가 있을때
scroll 때스크롤이 움직일때 발생

 

 

핸들러

: 이벤트가 발생햇을때 호출되는 함수

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="ko">
<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">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(function(){
 
            //=====================================단독이벤트
            //btn1안에있는 a 가 마우스 오버, 포커스 됬을때 트수
            $(".btn1 a").mouseover(function(){
                alert('hello');
            });
 
            //=====================================그룹이벤트
            $(".btn2 a").on("mouseover focus", function(){
                //a요소에 마우스오버 햇을때 배경화면 바뀌게
                var ts = $(this);
                ts.css("background-color","yellow")
            });
 
            // a요소를 클릭햇을때 아래 목록 태그가 나오도록
            $(".btn2 a").on("mouseover focus", function(){
                //a요소에 마
                var ts = $(this);
                ts.css("background-color","yellow")
            });
 
            // a요소를 클릭햇을때 아래 목록 태그가 나오도록
            $(".btn2 a").on("click", function(){
                var ts1 = $(this);
                //이미보이면 끄기
                $(".btn2").next("ul").filter(":visible").hide();
 
                ts1.parent().next().show();
                return false; // a태그 이동을 막아줌.
            });            
 
 
        });
 
    </script>
</head>
<body>
    <p class="btn1"><a href="#">이벤트 대상1</a></p>
    <ul style="display:none;">
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
    </ul>
    <p class="btn2"><a href="#">이벤트 대상2</a></p>
    <ul style="display:none;">
        <li>리스트4</li>
        <li>리스트5</li>
        <li>리스트6</li>   
    </ul>
</body>
</html>
 cs

 

 

728x90

'웹 > 제이쿼리 JSTL' 카테고리의 다른 글

제이쿼리(jQurey) 비동기 방식 연동 - JQUERY/AJAX  (1) 2022.11.14
제이쿼리(jQurey) - 효과 및 애니메이션 메소드  (0) 2022.11.14
제이쿼리(jQurey) -기본  (0) 2022.11.10
제이쿼리(jQurey) load,div onclick, show, hide ,visible 간단예제  (0) 2022.07.12
제이쿼리(jQuery) cdn 및 onload, ready  (0) 2022.07.12
'웹/제이쿼리 JSTL' Related Articles more
Comments