Jquery 바인딩 이벤트는 무엇을 의미합니까?-프런트엔드 Q&A-php.cn

Jquery 바인딩 이벤트는 무엇을 의미합니까?

WBOY

풀어 주다： 2022-06-24 17:30:36

원래의

1994명이 탐색했습니다.

Jquery에서 이벤트 바인딩은 DOM 노드가 선택되면 이벤트가 DOM 노드에 바인딩되어 사용자가 해당 작업을 제공할 수 있도록 하는 것을 의미합니다. 이벤트를 바인딩하려면 on을 사용하는 것이 좋습니다.

Jquery 바인딩 이벤트는 무엇을 의미합니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, jquery 버전 3.6.0, Dell G3 컴퓨터.

jquery 바인딩 이벤트는 무엇을 의미하나요?

이벤트 바인딩: 일반 이벤트를 DOM 노드에 바인딩합니다. DOM 노드가 선택되면 이벤트를 바인딩하여 사용자가 해당 작업을 쉽게 제공할 수 있습니다.

예: 버튼 버튼에 클릭 마우스 이벤트 바인딩, 입력에 포커스 이벤트 바인딩 등. 구체적인 예: 종종 $('.bn1').click(function(){. ..})이라고 쓰면 일반 이벤트 바인딩입니다. .

확장:

이벤트 위임: 이벤트 바인딩을 기반으로 이벤트 바인딩을 보완하고 확장하는 것을 의미합니다. 구체적으로는 이벤트 바인딩을 하위 노드 요소를 통해 상위 요소 DOM 노드(상위 노드)에 전달하는 것을 의미합니다. 모든 하위 하위 요소를 통합 관리합니다.

이렇게 하면 많은 이벤트에 바인딩해야 하는 하위 요소가 발생할 때 많은 문제를 피하고 이벤트 바인딩 작업을 반복할 수 있으며 액세스 효율성을 제공할 수 있습니다. 특정 코드 $('.div').on('click','.bn2',function(){...})

jquery에는 이벤트를 바인딩하는 네 가지 방법이 있습니다. 바인딩, 라이브, 위임, 켜기. 그 중 라이브가 제거되었으며 바인드 및 델리게이트의 하위 레이어가 구현되었습니다.

jquery에서는 이벤트 바인딩에 on을 사용할 것을 권장합니다. 기본 이벤트 외에도 jquery는 사용자 지정 이벤트 바인딩을 지원합니다.

가장 일반적으로 사용되는 방법

$("selector").이벤트 이름(익명 함수)

예제 1:

//这里的button为元素选择器，click为鼠标点击事件$("button").click(function(){
					//函数内容
				})

로그인 후 복사

예 2:

//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").mouseenter(function(){
					//函数内容
				})

로그인 후 복사

예 3:

//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").mouseleave(function(){
					//函数内容
				})

로그인 후 복사

바인딩 기능

$("selector").bind({"이벤트 이름": 익명 함수})

예 1:

//button为元素选择器，bind的中文意思为‘绑定’$("button").bind({"click":function(){
					//函数内容
				}})

로그인 후 복사

예 2:

//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").bind({"mouseenter":function(){
					//函数内容
				}})

로그인 후 복사

예 3:

//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").bind({"mouseleave":function(){
					//函数内容
				}})

로그인 후 복사

참고: 여기서 바인딩 함수 매개변수는 <code>중괄호로 묶인 사전이고, 키 값은 큰따옴표로 묶인 이벤트 이름이고, 값 값은 함수 내용이며, 확실해야 합니다 코드> 형식에 주의하세요. <code>注：这里的bind函数参数为一个大括号包裹的字典，key值为双引号下的事件名称，value值为函数内容，一定一定一定要注意格式。

on函数

两个形参

$(“选择器”).on(“事件名称”,匿名函数)

举例：

$("button").on("click",function(){
					//函数内容
				})

로그인 후 복사

注：含有两个形参的on函数，和bind函数使用方法类似，只是格式不同，可以一起记忆。

三个形参

含有三个参数，非常适合含有多个孩子的父节点使用，可以统一控制孩子节点事件

$(“父节点选择器”).on(“事件名称”,“孩子节点,即要绑定的元素”,匿名函数)

举例:

$("ul").on("click","li",function(){
					$(this).css("color","blue");    //this表明当前点中的对象，此语句表明，当点击li标签时候，将该li标签颜色变为blue
 				})

로그인 후 복사

注:一定要注意含有三个参数的使用场景，并且注意this关键字的使用

delegate函数

delegate函数有三个形参，和on函数有着相似之处，区别是参数位置不同。

$(“父节点选择器”).delegate(“孩子节点,即要绑定的元素”,“事件名称”,匿名函数)

$("ul").delegate("li","click",function(){
					$(this).css("color","blue");
				})

로그인 후 복사

注：一定要注意这里的参数排列顺序和on函数的参数排列顺序不同。

总结

纵观上面的绑定事件，可以发现，不同的绑定事件只是换了一个关键字以及相对应的参数列表；
它们共有的都是$("选择器").函数名(参数列表)
함수

두 개의 형식 매개변수예: rrreee3개의 형식 매개변수3개의 매개변수가 포함되어 있으며, 이는 여러 하위 노드가 있는 상위 노드에 매우 적합합니다. 하위 노드 이벤트를 균일하게 제어할 수 있습니다$("Parent Node Selector").on("Event Name" , "자식 노드, 즉 바인딩할 요소", 익명 함수)예:참고: 세 가지 매개 변수를 사용하는 사용 시나리오에 주의하세요. 키워드 사용에 주의하세요delegate 함수delegate 함수에는 세 가지 형식 매개변수가 있는데 on 함수와 유사하지만 차이점은 매개변수 위치가 다릅니다. $("상위 노드 선택기").delegate("하위 노드, 즉 바인딩할 요소", "이벤트 이름", 익명 함수)rrreee참고: 필수 여기서 매개변수의 순서는 on 함수의 순서와 다르다는 점에 유의해야 합니다.

	$("selector").on("이벤트 이름", 익명 함수)
`참고: 두 개의 형식 매개변수를 갖는 on 함수는 바인딩 함수와 유사하지만 형식이 다르며 함께 기억할 수 있습니다.`

	rrreee