jQuery의 이벤트

1. DOM 로드

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

Window.onload = Function() {}

$(document) READY(function() {}) 실행 메커니즘이 필요합니다. 웹페이지의 모든 콘텐츠(그림 포함)가 로드될 때까지 기다립니다.웹페이지의 모든 DOM 구조가 그려진 후에 실행됩니다. 아마도 DOM 요소와 관련된 항목이 로드되지 않았을 수 있습니다.쓰기 횟수 동시에 여러 개의 을 쓸 수 없습니다. 간체 쓰기 None$(document)는 $()로 축약될 수 있으므로 기본값은 document입니다. 다음과 같이 축약될 수 있습니다: 해당 속도를 크게 향상시킵니다. 웹 애플리케이션단점요소의 관련 파일이 다운로드되지 않아 일부 속성이 유효하지 않게 되었습니다.해결 방법페이지 로딩에 대한 다른 방법인 로드를 사용하세요. () 방법additional : handler 기능이 바인딩되면 Load () 메소드가 핸들러 함수를 바인딩합니다 window 개체는 모든 콘텐츠(창, 프레임, 개체, 이미지 등 포함)가 로드된 후에 트리거됩니다. 핸들러 함수가 요소에 바인딩된 경우 요소의 콘텐츠가 로드된 후에 트리거됩니다. ㅋㅋㅋ , scroll, click, dblclick, mousedown, mouseover, mouseup, mousemove, mouseout, mouseenter, mouseleave,change, select, submit, keydown, keypress, keyup, error

두 번째 매개변수는 데이터 속성과 마찬가지로 선택적 매개변수입니다. 값은 이벤트 객체의 추가 데이터 객체로 전달됩니다

세 번째 식사는 바인딩에 사용되는 처리 함수입니다

보충: 요소 표시 여부를 확인하려면 jQuery

에서 요소 표시 여부를 확인하려면

is() 메서드를 사용하세요.

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

bind() 메서드 기타 용도:

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

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

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

3. 합성 이벤트

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.stopPropagation()

이벤트 버블링 중지

event.target

이벤트를 트리거한 요소 가져오기

event.관련Target

현재 이벤트와 관련된 다른 DOM 요소 반환

event.pageX 및 이벤트 .pageY

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

event.which

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

event.metaKey

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

①$(document).ready(function(){})	②$(function(){})	Comparison

补充：（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 중국어 웹사이트의 기타 관련 기사를 참조하세요!