jQuery의 이벤트

1. DOM 로드

페이지가 로드된 후 JS는 window.onload를 사용하여 DOM 요소에 이벤트를 추가합니다. jQuery에서는 $(document).ready()를 사용하여 DOM 요소에 이벤트를 로드합니다. DOM 준비가 되면 이를 조작하고 바인딩된 함수를 호출합니다. Window.Onload 및 $(docume)에서 READY() 비교

Window.onload = Function() {}

약어: .mouseover(function(){})

bind() 메서드 기타 용도:

(1) 여러 이벤트 유형을 한 번에 요소에 바인딩

1 $(window).load(function(){2 //编写代码3 })

(2) 손쉬운 관리를 위한 이벤트 네임스페이스 추가

hover() 메소드: 커서 호버 이벤트 시뮬레이션

형식: hover(입력, 나가기);

언제 커서가 요소로 이동하면 지정된 첫 번째 기능이 실행됩니다. 커서가 요소를 제거하면 지정된 두 번째 기능이 실행됩니다. 대체 이벤트: 바인딩("mouseenter") 및 바인딩("mouseleave" ")

toggle() 메서드: 지속적인 마우스 클릭 이벤트 시뮬레이션

형식:ggle(fn1,fn3...fnN);

 
$("p").bind("mouseover mouseout",
function
(){};);

$(function()){
      $("#panel").toggle(function(){
               $(this).next().show();
       },function(){
                $(this).next().hide();
       })
})

4. 이벤트 버블링

버블: 중첩된 요소는 동일한 이벤트의 실행 순서에 해당하며 이벤트는 DOM 계층 구조를 따릅니다. top 이벤트 버블링으로 인한 문제점:

(1) 이벤트 객체: event이벤트 객체를 생성하려면 이벤트 처리 함수에 이벤트 매개변수만 추가하면 됩니다. 이벤트 객체는 이벤트 처리 함수에만 접근할 수 있습니다. 이벤트 처리 함수가 실행된 후에는 이벤트 객체가 소멸됩니다

(2) 이벤트 버블링 중지: event.stopPropagation() 메서드(3 ) 기본 동작 방지: event.preventDefault() 메서드

예: 양식 유효성 검사가 제출 조건을 충족하지 않을 때 양식 제출 방지(기본 동작)

$(function()){
       $("#panel").toggle(function(){
                $(this).next().toggle();
        },function(){
                 $(this).next().toggle();
        })
})

버블링을 중지하고 이벤트 개체의 기본 동작과 동시에 이벤트 핸들러 함수에서 false를 반환할 수 있습니다

5. 이벤트 캡처

모든 브라우저가 이벤트 캡처를 지원하는 것은 아니며 jQuery도 이를 지원하지 않습니다. of event

event.preventDefault()

event.pageX 및 이벤트 .pageY

페이지를 기준으로 x 및 y 좌표 가져오기

event.which

왼쪽 가져오기 마우스 이벤트의 , 가운데 및 오른쪽 마우스 버튼; 키보드 이벤트에서 키보드 키 가져오기

event.metaKey

키보드 이벤트에서 키 가져오기

补充：（1）JS中的stopPropagation()方法不兼容IE浏览器

（2）在标准DOM中，mouseover和mouseout所发生的元素都可以通过event.target访问，相关元素是通过event.relatedTarget来访问的。event.relatedTarget相当于IE浏览器的event.fromElement，在mouseout中相当于IE的event.toElement。

（3）在JS中，IE用event.x和event.y；Firefox用event.pageX/event.pageY。如果页面有滚动条，还要加上滚动条的宽度和高度。

6.移除事件

（1）移除按钮元素上已有的事件：$("#btn").unbind();

格式：unbind([type],[data]);

第一个参数是事件类型，第二个参数是将要移除的函数

①如果没有参数，删除所有绑定的事件。

②有参数只删除参数类型的绑定事件。

③如果把在绑定时传递的处理函数作为第二个参数，只有特定的事件处理函数会被删除。

（2）移除元素中的其中一个事件

在绑定时要给匿名函数指定一个变量

$(function(){
      $("#btn").bind("click",myFun1=function(){
           //代码1
      }).bind("click",myFun1=function(){
           //代码2
      }）
})

로그인 후 복사

单独移除某个绑定事件

$("#del1").click(function(){
      $("#btn").unbind("click",myFun2);
 })

로그인 후 복사

注意：对于只需要触发一次就要立即解除绑定的情况，使用one()方法。one()方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除。即：在每个对象上，事件处理函数都只会被执行一次。one()方法的使用和bind()方法一样。

 

위 내용은 jQuery의 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!