jQuery를 이벤트
jQuery를이 이벤트 핸들러를 위해 특별히 설계되었습니다.
jQuery의 이벤트 메커니즘, 즉 : 이벤트 바인딩, 개별화 이벤트, 이벤트 트리거 : 포함한 DOM 이벤트 작업에 대한 jQuery를 자바 스크립트 패키지.
개발 과정 간단한 이벤트의 jQuery 이벤트 바인딩 >> 바인딩 바인딩 이벤트 >> 바인딩 위임 이벤트 >>에
이벤트가 무엇입니까?
페이지는 다른 방문자에 대한 응답 사건을했다.
이벤트 처리기 메서드 수단 특정 이벤트가 HTML 호출에 발생하는 때.
예 :
1) 요소 위에 마우스 포인터를 이동합니다.
2) 라디오 버튼을 선택
3) 요소를 클릭합니다.
종종 이벤트 "트리거"(또는 "여기") 예에서 용어를 사용합니다. "당신이 키를 누를 때 키 입력 이벤트를 트리거"
공통 DOM 이벤트 :
| 이벤트 기능 | 설명 |
|---|---|
| 클릭 (핸들러) | Click 이벤트 |
| 흐림 (핸들러) | 이벤트는 포커스를 잃을 |
| mouseenter (핸들러) | 마우스 이벤트를 입력 |
| 하는 MouseLeave (핸들러) | 마우스 휴가 이벤트 |
| dbclick (거래) | 이벤트를 두 번 클릭 |
| 변화 (핸들러) | 등 값 변화의 다운 목록에 텍스트 상자 값이 변경 : 같은 변경 이벤트 |
| 초점 (핸들러) | 초점 이벤트를 받기 |
| 를 keyDown (핸들러) | 이벤트 아래로 키보드 |
jQuery를 이벤트 방법 구문
jQuery를에서 가장 DOM 이벤트는 jQuery를 법의 동등한 있습니다.
페이지는 클릭 이벤트를 지정합니다 :
$("p").click();
다음 단계는 어떤 시간 트리거 이벤트를 정의하는 것입니다. 당신은 이벤트 기능에 의해 달성 될 수있다 :
$("p").click(function(){
// 动作触发后执行的代码!!
});
일반적으로 사용되는 jQuery를 이벤트 방법
.ready 1. $ (문서) ()
$ (문서) .ready () 메소드는 문서가 완전히로드 된 후 우리가 기능을 수행 할 수 있습니다. 이벤트 방법 JQuery와 신택스 부분에서 언급되어왔다.
2.Click ()
버튼을 클릭 이벤트가 호출하는 함수 트리거되는 클릭 () 메소드.
사용자가 HTML 요소를 클릭 할 때이 기능이 실행됩니다.
다음 예에서, 때 클릭 이벤트
트리거 할 때, 현재의 요소를 숨겨
요소 :
//实例
$("p").click(function(){
$(this).hide();
});
3.dblclick ()
는 요소를 두 번 클릭하면 이벤트를 dblclick 것입니다.
dblclick () 메소드 dblclick 트리거 이벤트, 기능 또는 동작은 특정 이벤트 발생시 dblclick :
//实例
$("p").dblclick(function(){
$(this).hide();
});
4.mouseenter ()
요소를 통해 마우스 포인터 이벤트를 mouseenter 때.
mouseenter () 메소드는 트리거 이벤트가 발생 mouseenter 이벤트 함수 또는 mouseenter의 규정의 동작 :
//实例
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
5.mouseleave ()
마우스 포인터 잎 요소가 이벤트를하는 MouseLeave 때.
이벤트가 발생할 때하는 MouseLeave () 메서드하는 MouseLeave 트리거 이벤트는, 또는 때 기능하는 MouseLeave 실행을 지정 :
//实例
$("#p1").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
6.mousedown ()
마우스 포인터 요소 위에 이동하고, 마우스 버튼을 누를 때, mouseDown 이벤트가 발생한다.
mousedown ()는 MouseDown 이벤트의 규정 방법 mousedown 트리거 이벤트, 기능 또는 동작시 발생
//实例
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
7.mouseup ()
이 요소에 마우스 단추를 놓을 때 이벤트와 mouseUp 것입니다.
와 mouseUp () 메소드와 mouseUp 트리거 이벤트와 mouseUp 또는 함수의 규정 동작 이벤트가 발생했을 때
//实例
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
8.hover ()
커서 호버 이벤트를 시뮬레이션 호버 () 메소드.
소자 위에 마우스 이동 (MouseEnter) 지정된 제 기능을 트리거 할 때, 요소의 아웃 마우스는, 제 지정된 기능 (하는 MouseLeave)를 트리거 할 때.
//实例
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
);
9.focus ()
요소에 포커스, 포커스 이벤트를 얻을 때.
선택한 요소 또는 탭 키 탐색을 통해 요소에 마우스 클릭, 요소가 초점을 맞출 것이다 때.
포커스 () 메소드는 포커스 이벤트 기능이나 동작이 지정된 이벤트시에 포커스를 발생하는 트리거 :
//实例
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
10.blur ()
요소가 포커스를 잃을 때, 블러 이벤트가 발생한다.
흐림 () 메소드 blur 이벤트, 기능 또는 동작을 특정 이벤트가 발생할 때 트리거 흐림 :
//实例
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
이벤트 바인딩
1.bind 방법의
역할 : 바인드 직접 이벤트 요소에 맞게 (권장하지 않음을, jQuery를 버전 1.7에 교체 후)
// 绑定单击事件处理程序
第一个参数：事件类型
第二个参数：事件处理程序
$("p").bind("click mouseenter", function(e){
//事件响应方法
});
장점 : 예컨대 동시에 결합 할 수있는 이벤트의 복수 : 바인드 ( "mouseenter하는 MouseLeave"함수 () {})
단점 : 동적 요소 바인딩 이벤트를 만들 아직 없습니다
2.delegate 방법
역할 : 정합 소자가 동적으로 생성 요소 (특성 : 동적으로 생성 된 고성능의지지 부재)에 대한 이벤트 효과 지지체에 결합되는
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
처음 두 가지 방법의 가장 큰 장점은 : 요소 바인딩 이벤트에서 동적 생성을위한 효율성, 지원을 개선하기 위해 이벤트를 바인딩의 수를 줄일 수
참고 : 마우스 오버와 mouseenter의 차이 :
마우스 오버 버블 링, mouseenter하지 거품
3.on 방법
(가장 현대적인 방법, 호환 zepto (비슷한 말 모바일 라이브러리 jQuery의), 강력 방법을 사용 권장)
jQuery1.7 버전 후 jQuery를 모든 이벤트 처리를위한 통합 된 방법에서 사용되는
함수 : 상기 방법은 결합 사건의 모든 장점을 포함하는 바인딩 이벤트의 요소를, 일치
// 파라미터 1 이벤트 공간 // 파라미터 (2)에 의해 분리 될 수 바인딩 이벤트의 여러 이벤트 명 : 선택기 이벤트 하위 요소 수행
// 파라미터 3 : 데이터가, 데이터 처리 기능에 전달되고 이벤트 트리거 4 개 @ event.data 파라미터로 사용했을 때 처리기 이벤트 핸들러
$ (선택기) CSTE 연구진 (이벤트 [ 선택기], 데이터, 핸들러);
//表示给$(selector)绑定事件，但必须是它的内部元素span才能执行这个事件
$(selector).on( "click",“span”, function() {});
// 绑定多个事件
// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
$(selector).on(“click mouseenter”, function(){});
개별적으로 가격을 매기는 이벤트
1.unbind 모드 ()
개별적으로 가격을 매기 바인딩 바인딩 이벤트 : 역할
$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件
2.undelegate 모드 ()
역할 : 개별적으로 가격을 매기는 방식으로 이벤트 대리자를 바인딩
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
3.off 방법 바인딩 이벤트를 개별화
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$(selector).off( “click”, “**” );
이벤트 트리거
간단한 이벤트 트리거
$(selector).click(); //触发 click事件
방법은 트리거 이벤트를 트리거
$(selector).trigger(“click”);
triggerHandler 트리거 이벤트 응답 방법, 브라우저 동작을 트리거하지 않습니다
예를 들어 텍스트 상자의 기본 동작은 포커스를 취득하기
$(selector).triggerHandler(“focus”);
jQuery를 이벤트 객체 설명
| 행사 | 설명 |
|---|---|
| event.pageX | 받는 사람 마우스의 상대적인 위치는 페이지의 왼쪽 |
| event.target | 요소 이벤트를 트리거 (이벤트 대상) |
| event.currentTarget | 객체의 요소되는 이벤트 |
| event.keyCode | 키보드 키 코드 |
| event.stopPropagation (); | 정지 이벤트 버블 링 |
| 에서는 event.preventDefault (); | 기본 동작을 방지 |
| event.type | 이벤트 종류 : 클릭, dbclick ... |
| event.which | 버튼 타입의 마우스 : 왼쪽과 오른쪽 3 (12) |
| event.data | 이벤트 핸들러에 전달 된 추가 데이터 |
false를 반환; // 또한 버블 링 방지 기능의 기본 동작 방지
이 : 어떤 요소 객체에 대한 이벤트 핸들러를, 이것은 어떤 요소 객체를 가리키는 것
