jQuery의 이벤트에 대한 자세한 설명

일반 소개

jQuery는 기본 이벤트 처리 메커니즘을 추가하고 확장하여 보다 우아한 이벤트 처리 구문을 제공할 뿐만 아니라 이벤트 처리 기능을 크게 향상시킵니다

jQuery 이벤트

DOM 로딩

은 JavaScript의 window.onload 메소드를 대체하기 위해 jQuery의 $(document).ready() 메소드를 사용하지만 약간의 차이점도 있습니다

1. 실행 타이밍

예를 들어, 사진이 많은 웹페이지가 있습니다

$(document).ready() 메소드는 이 웹페이지에 있습니다. DOM 트리가 로드되고 DOM 트리와 이미지가 로드된 후에 window.onload 메서드를 실행해야 합니다.

jQuery를 사용하고 전체 페이지가 로드된 후에 실행하려면 load( ) 메소드

다음 두 코드의 기능은 동일합니다

// jQuery
$(window).load(function(){
  // 代码1
});
// JavaScript
window.onload = function(){
  // 代码2
};

2. 여러 번 사용하세요

JavaScript의 onload 이벤트는 참조만 저장할 수 있습니다. 한 번에 하나의 함수, $(document).ready()는 여러 개를 저장할 수 있습니다

function one(){
  alert('1');
}
function two(){
  alert('2');
}
// JavaScript
window.onload = one;
window.onload = two;//只执行two()
// jQuery
$(document).ready(function(){
  one();
});
$(document).ready(function(){
  two();
});//one() 和 two()都会执行

3. 약어

$(document).ready(function(){}); $(function(){});

이벤트 바인딩

bind() 함수 구문: 바인딩(type,[.data],fn)

먼저 첫 번째 매개변수는 이벤트 유형입니다.

두 번째 매개변수는 선택적 매개변수로, event.data 속성 값으로 이벤트 객체에 전달되는 추가 데이터 객체입니다.

세 번째 매개변수는 바인딩에 사용되는 처리 기능

은 두 개의 div가 있습니다. 첫 번째 div를 클릭하면 두 번째 div가 표시됩니다. 추가된 기능: div1을 클릭하면 div2가 표시되면 숨기고 그렇지 않으면 표시합니다

<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
$(function(){
  $(&#39;#div1&#39;).bind(&#39;click&#39;,function(){
    $(this).next().show();
  });
   
});

약어:

$(function(){
  $('#div1').bind('click',function(){
    if($(this).next().is(':visible')){
      $(this).next().hide();
    }else{
      $(this).next().show();
    }
  });
});

합성 이벤트

$('#div1').click(function(){
  if($(this).next().is(':visible')){
     $(this).next().hide();
   }else{
     $(this).next().show();
   }
})

hover( ) 메서드

는 커서 호버 이벤트를 시뮬레이션하는 데 사용됩니다. 첫 번째 함수는 커서가 요소 위로 이동할 때 실행되고, 두 번째 함수는 커서가 요소 밖으로 이동할 때 실행됩니다.

2.toggle() 메서드는

$('#div1').hover(function(){
  $(this).next().show();
},function(){
  $(this).next().hide();
});

입니다. 마우스 연속 클릭 이벤트를 시뮬레이션하는 데 사용됩니다. 마우스가 요소를 처음 클릭하면 첫 번째 기능이 트리거되고, 마우스가 동일한 기능을 클릭하면 두 번째 기능이 트리거됩니다.

방지 이벤트 버블링 및 기본 동작 방지

$('#div1').toggle(function(){
  $(this).next().show();
},function(){
  $(this).next().hide();
});

1. 이벤트 버블링 방지

stopPropagation() 메서드

2. 기본 동작 방지

preventDefault() 메서드

참고: 1, jQuery에서 false를 반환하는 것은 이벤트 버블링을 방지하고 기본 동작을 방지하기 위한 것입니다

　2. jQuery는 이벤트 캡처를 지원하지 않습니다

이벤트 객체의 속성

1.event.type

수정된 메소드의 목적은 이벤트 유형을 가져오는 것입니다

2. event.target

$('#div1').click(function(ev){
   alert(ev.type);//click
 })

이벤트 트리거

3. event.관련Target

$('#div1').click(function(ev){
  alert(ev.target.id);//div1
 })

관련 요소 가져오기

4. event.pageX 및 event.pageY

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

5. event.which

$('#div1').click(function(ev){
 alert(ev.pageX + ',' + ev.pageY);//275,181
 })

이 메소드의 기능은 페이지에서 왼쪽, 가운데 및 오른쪽 마우스 버튼을 얻는 것입니다. 마우스 클릭 이벤트; 키보드 이벤트에서 키보드 키를 얻으려면

이벤트 제거

$('#div1').click(function(ev){
 alert(ev.which);//1是鼠标左键，2是鼠标中见，3是鼠标右键
})

unbind() 메서드 구문: unbind([type],[data]);

첫 번째 매개변수는 이벤트 유형, 두 번째 매개변수는 제거할 함수

예시를 보면 다음 이벤트를 div1에 바인딩합니다

1 .매개변수가 없으면 바인딩된 이벤트 모두 삭제

< > $ ('#Div1'). // 모든 이벤트 삭제

$('#div1').bind('click',function(){
  alert('1');
}).bind('click',function(){
  alert('2');
}).bind('mouseover',function(){
  alert('3');
})

2. 이벤트 유형이 매개변수로 제공되는 경우 , 이 유형의 바인딩 이벤트만

$('#div1').unbind('mouseover');//마우스 오버 이벤트 삭제

3. 바인딩 시 전달된 처리 기능이 다음과 같은 경우 두 번째 매개변수로 사용하면 이 특정 시간만 처리됩니다. 함수는 삭제됩니다

시뮬레이션 연산

1. 일반적으로 사용되는 시뮬레이션

jQuery에서는 Trigger() 메서드를 사용하여 시뮬레이션 작업을 완료할 수 있습니다. 예를 들어 다음 코드를 사용하여 btn 버튼

$('#btn').trigger('click')의 클릭 이벤트에 대한 ID를 트리거할 수 있습니다. ;

2. 사용자 정의 이벤트 트리거

trigger() 메소드 브라우저에서 지원하는 동일한 이름의 이벤트를 트리거할 수 있을 뿐만 아니라 사용자 정의 이름을 가진 이벤트도 트리거할 수 있습니다.

3. 데이터 전달

$('#btn').bind('myclick',function(){
  alert('1');
});
$('#btn').trigger('myclick');

4. 기본 작업 수행

$('input').trigger('focus');

$('#btn').bind('myclick',function(event,message1,message2){
 alert(message1 + message2);
});
$('#btn').trigger('myclick',["1","2"]);

위 코드는 입력 요소의 포커스 이벤트를 트리거하고 요소 자체도 포커스를 얻도록 합니다.

< input> 요소, 동시에 브라우저 취소 이 이벤트의 기본 작업은 TriggerHandler() 메서드를 사용할 수 있습니다.

다른 사용법

관리를 용이하게 하기 위해 이벤트 네임스페이스 추가

예를 들어 여러 이벤트 유형을 요소에 바인딩할 수 있습니다. 네임스페이스를 사용하여 표준화합니다.

위 내용은 이 기사의 전체 내용입니다. 이 기사의 내용이 모든 사람의 연구 또는 학습에 도움이 되기를 바랍니다. 나는 또한 PHP 중국어 웹사이트를 지원하고 싶습니다!

jQuery 이벤트와 관련된 더 자세한 글은 PHP 중국어 홈페이지를 참고해주세요!

$('div').bind('click.plugin',function(){
  alert('1');
});
$('div').bind('mouseover.plugin',function(){
  alert('2');
});
$('div').bind('dbclick.plugin',function(){
  alert('3');
});
$('button').click(function(){
  $('div').unbind('.plugin');
})