jquery의 마우스 이벤트 메서드는 무엇입니까?

jquery의 마우스 이벤트 메서드는 다음과 같습니다. 1. 왼쪽 클릭 이벤트를 트리거할 수 있는 click() 2. 오른쪽 클릭 이벤트를 트리거할 수 있는 contextmenu() 더블 클릭 이벤트 4. 마우스 누르기 이벤트를 트리거할 수 있는 mousedown() 6. 마우스 이동 이벤트를 트리거할 수 있는 mousemove(); 이벤트 등에서 마우스 이동을 트리거할 수 있는 mouseenter().

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6.1 버전, Dell G3 컴퓨터.

JQuery 마우스 이벤트 구성

1. 클릭: 왼쪽 클릭, 오른쪽 클릭

.Click(): 왼쪽 마우스 클릭

은 JavaScript "클릭" 이벤트에 바인딩됩니다. 요소에 대한 click' 이벤트. (터치스크린 탭 이벤트 지원)

.contextmenu():

오른쪽 클릭 메뉴 버튼을 마우스 오른쪽 버튼으로 클릭하면 오른쪽 클릭 메뉴가 거부될 수 있습니다.

2. 더블 클릭

.dblclick(): 더블 클릭 트리거

3. 마우스 누름, 마우스 놓음

.mousedown(): 마우스 누름

.mouseup(): 마우스 놓음

4. 마우스 이동

.mousemove(): 마우스 이동

5. 마우스 입력, 마우스 이동 종료

.mouseenter(): 마우스가 요소로 이동할 때 트리거됩니다.

.mouselevave(): 마우스가 요소 밖으로 이동할 때 트리거됩니다.

.mouseout(): 마우스가 요소 밖으로 이동할 때 트리거되고 마우스가 하위 요소 안팎으로 이동할 때도 트리거됩니다.

.mouseover(): 마우스가 요소 안으로 이동할 때 트리거되고 마우스가 하위 요소 안팎으로 움직일 때도 트리거됩니다.

6. 마우스 휠 스크롤

내장 Jquery 라이브러리에서는 휠 이벤트를 지원하는 확장 라이브러리가 없습니다.

7. 기타 jquery 확장 이벤트

.hover(): mouseenter/mouseave의 두 이벤트 함수를 일치하는 요소에 바인딩합니다. 이는 마우스 포인터가 요소에 들어오고 나갈 때 각각 실행됩니다. 마우스 포인터가 요소에 들어오고 나갈 때 실행되도록 일치하는 요소에 단일 이벤트 함수를 바인딩합니다.

.toggle() : 두 개 이상의 핸들러를 일치하는 요소에 바인딩하여 교대로 클릭할 때 수행합니다.

마우스 이벤트 매개변수

이벤트 공통 매개변수

• event.type: 이벤트 유형, 트리거 요소의 이벤트 유형

• event.pageX 및 event.pageY을 가져옵니다. : 마우스 가져오기 페이지에 대한 현재 좌표는 현재 페이지에 있는 요소의 좌표값을 결정할 수 있으며, 이는 페이지를 기준점으로 하며 슬라이더의 움직임에 따라 변하지 않습니다

• event.target: 이벤트를 트리거하는 요소 가져오기

this과 event.target의 차이점:

js의 이벤트는 버블링되므로 이는 변경될 수 있지만 event.target은 변경되지 않습니다. . 이벤트를 직접 받아들이는 대상 DOM 요소가 됩니다.

　　This와 event.target은 모두 jquery 객체로 변환될 수 있습니다: $(this) 및 $(event.target)

• event.which: 마우스 클릭 이벤트에서 마우스의 왼쪽, 중간, 중간 위치를 가져옵니다. 오른쪽 키(왼쪽 키 1, 가운데 키 2, 오른쪽 키 3), 키보드 이벤트에서 키보드의 키 코드 값
• event.currentTarget: 버블링 전에 현재 트리거 이벤트의 DOM 객체를 가져옵니다. 이는 this
• event .preventDefault(): 기본 동작 방지 event.isDefaultPrevented()를 사용하여 PreventDefault 여부를 확인할 수 있습니다.
• event.stopPropagation(): 이벤트가 버블링되는 것을 방지합니다. 이벤트를 방지하려면 이전 요소에서 이벤트 핸들러를 트리거하지 않고 DOM 트리를 버블링합니다. stopPropagation이 호출되었는지 여부 click 이벤트: 마우스 클릭 이벤트

<script>
    $('p').click(function(){
        alret('被点击一次')
    })
</script>

<script>
    $('p').mousedown(function(){
        alret('鼠标按下一次')
    })
</script>

<script>
    $('p').mousedown(function(){
        alret('鼠标进入一次')
    })
</script>

<script>
    $('p').mousedown(function(){
        alret('鼠标离开一次')
    })
</script>

<script>
    $('p').mousedown(function(){
        alret('鼠标移动了') // 注意这个事件是根据鼠标的位置发生变化，意思就是，你移动一次鼠标他就出触发一次
    })
</script>

$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4"); // 注：鼠标移开用户指定的某个元素的时候会触发这个事件
});

mousedown事件：鼠标按下事件

$("p").mouseout(function(){
  alret('鼠标升起'); // 注：用户在点击完左键之后，松开左键会触发此事件
});

mouseenter事件：鼠标进入事件

mouseleave事件：鼠标离开事件

mousemove事件：鼠标移动事件

mouseout事件：鼠标移开事件

mouseupmouseout 이벤트: 마우스 이동 이벤트

mouseup 이벤트: 마우스를 누른 후 왼쪽 버튼을 놓았을 때의 이벤트rrreee[추천 학습:

위 내용은 jquery의 마우스 이벤트 메서드는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!