jquery 바인딩 이벤트의 기능은 무엇입니까?

jquery 바인딩 이벤트 기능: 일반 이벤트를 DOM 노드에 바인딩합니다. DOM 노드가 선택되면 이벤트를 바인딩하여 사용자가 해당 작업을 제공할 수 있도록 합니다. jQuery는 바인딩, 라이브, 위임 및 켜기라는 네 가지 이벤트 바인딩 방법을 제공하며 해당 비수신 기능은 바인딩 해제, 다이, 위임 취소 및 끄입니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6 버전, Dell G3 컴퓨터.

이벤트란 무엇인가요?

다양한 방문자에 대한 페이지의 반응을 이벤트라고 합니다.

이벤트 핸들러는 HTML에서 특정 이벤트가 발생할 때 호출되는 메서드를 참조합니다.

예:

• 요소 위로 마우스를 이동하세요.

• 라디오 버튼 선택

• 요소 클릭

"트리거"(또는 "실행")라는 용어는 "키를 누를 때 키 누르기 이벤트가 발생합니다"와 같은 이벤트에서 자주 사용됩니다.

jquery 이벤트 바인딩

일반적으로 버튼 클릭과 같은 특정 노드와 관련된 이벤트를 처리해야 합니다. 하지만 여기에는 문제가 있습니다. 특정 노드를 얻을 수 있다면 당연히 말할 것도 없습니다. 하지만 처리하려는 노드가 아직 존재하지 않는 경우 이벤트 처리를 미리 정의해야 하는 경우도 있습니다. 예를 들어 UL에서는 LI를 클릭할 때마다 함수가 실행되어야 한다고 말합니다. 그러나 UL의 콘텐츠 자체는 변경될 수 있습니다. 처음에는 LI가 2개뿐이었지만 이후에는 LI가 3개가 되었습니다. 추가 LI도 이벤트에 응답할 수 있어야 합니다.

위의 상황은 일반적인 요구 사항입니다. 목표를 달성하기 위해 이벤트 버블링 메커니즘을 사용할 수 있습니다. 이벤트 처리를 UL에 바인딩하여 LI를 클릭하면 상위 UL로 버블링됩니다. 이러한 방식으로 이벤트를 처리할 때 이벤트가 다음 단계에 대한 노드를 결정할 수 있습니다.

이벤트 바인딩은 dom 요소에 대한 이벤트이며 dom 요소에 바인딩되어 요소에서 동일한 이벤트를 여러 번 모니터링할 수 있습니다. 기능: DOM 노드에 일반 이벤트를 바인딩합니다. DOM 노드가 선택되면 이벤트를 바인딩하여 사용자가 해당 작업을 쉽게 제공할 수 있습니다.

jQuery는 바인딩, 라이브, 위임 및 켜기의 네 가지 이벤트 바인딩 방법을 제공합니다. 해당 비청취 기능은 바인딩 해제, 다이, 위임 취소 및 끄기입니다.

이러한 방법의 차이점은 다음과 같습니다.

1.bind() 함수는 기존 요소에 대해서만 이벤트를 설정할 수 있지만 live(), on() 및 Delegate()는 모두 향후에 새로운 추가 이벤트를 지원합니다.

2. jquery 버전 1.7 이전에는 바인딩() 함수가 상대적으로 인기가 있었지만 버전 1.7이 나온 이후에는 더 이상 공식적으로 권장되지 않으며 대체 함수인 on()도 새로 추가되었습니다. 버전 1.7. 함수는 live() 함수를 대체하는 데에도 사용할 수 있습니다.

3에서는 live() 함수가 삭제되었습니다. () 함수는 실행 속도가 더 빠릅니다. 유연성과 CSS 선택기 지원 측면에서 더 나쁩니다. 4. 바인딩()은 모든 버전의 Jquery를 지원합니다. jquery1.9를 지원합니다. 4.2+; on()은 jquery1을 지원합니다. + 선택한 요소는 특정 이벤트 유형의 청취 기능에 바인딩됩니다.

유형: 클릭, 변경, 마우스 오버 등의 이벤트 유형입니다. .;

데이터: event.data를 통해 얻은 청취 함수에 전달된 매개변수가 도착합니다. 선택 사항, 기능: 이벤트 객체를 전달할 수 있습니다. 여기의 이벤트는 jQuery로 캡슐화된 이벤트 객체로, 사용 시 주의가 필요합니다. code of bind:

  bind: function( types, data, fn ) {

  return this.on( types, null, data, fn );

  }

$('#myol li').bind('click',getHtml);

바인드의 특징 리스너가 대상 요소에 일대일로 바인딩된다는 의미입니다. 페이지의 요소가 동적으로 추가되지 않는 경우 사용에는 문제가 없습니다. 그러나 "목록 요소 5"가 목록에 동적으로 추가되면 해당 항목을 클릭해도 응답이 없으므로 다시 바인딩해야 합니다. 이 문제를 피하기 위해 라이브를 사용할 수 있습니다. jQuery에는 a.click(function(){});, a.change(function(){}); 등과 같은 이벤트 바인딩에 대한 약어도 있습니다. 해당 기능은 바인딩과 동일하며 단지 약어.

2.live(type, [data], fn)

live의 매개변수는 바인드와 동일합니다. 무엇이 문제인가요? 먼저 소스 코드를 살펴보겠습니다.

live: function( types, data, fn ) {

jQuery( this.context ).on( types, this.selector, data, fn );

return this;

}

보시죠? 라이브 메소드는 리스너가 자체(this)에 바인딩되지 않고 this.context에 바인딩됩니다. 실제로 이 컨텍스트는 요소의 제한된 범위입니다.

$('#myol li').context; //document

$('#myol li','#myol').context; //document

$('#myol li',$('#myol')[0]); //ol

通常情况下，我们都不会像第三种方式那样使用选择器，所以也就认为这个context通常就是document了，即live方法把监听器绑定到了 document上了。不把监听器直接绑定在元素上，你是不是想起事件委托机制来了呢?若没有，可以点击这里回忆一下。live正是利用了事件委托机制来 完成事件的监听处理，把节点的处理委托给了document。在监听函数中，我们可以用event.currentTarget来获取到当前捕捉到事件的 节点。下面的例子来揭晓：

$('#myol li').live('click',getHtml);

3、delegate和on

live存在那样的缺点，所以我们就思考，既然老爷子负担那么重，可不可以别把监听器绑定在document上呢，绑定在就近的父级元素上不就好了。顺应正常逻辑，delegate诞生了。

参数多了一个selector，用来指定触发事件的目标元素，监听器将被绑定在调用此方法的元素上。看看源码：

delegate: function( selector, types, data, fn ) {

return this.on( types, selector, data, fn );

}

又是调用了on，并且把selector传给了on。看来这个on真的是举足轻重的东西。照样先不管它。看看示例先：

$('#myol').delegate('li','click',getHtml);

看了这么多，你是不是迫不及待想看看这个on的真实面目了呢，这就来：

on(type,[selector],[data],fn)

参数与delegate差不多但还是有细微的差别，首先type与selector换位置了，其次selector变为了可选项。交换位置的原因不好查证，应该是为了让视觉上更舒服一些吧。

我们先不传selector来看一个例子：

$('#myol li').on('click',getHtml);

可以看到event.currentTarget是li自己，与bind的效果一样。至于传selector进去，就是跟delegate一样的意义了，除了参数顺序不同，其他完全一样。

终于看到on的真实作用了，那么，这么多的事件绑定方式，我们该如何进行选择呢?

其实这个问题是完全不必纠结的，因为你已经知道他们之间的区别了不是么?根据实际情况斟酌使用就行。不过官方有一个推荐就是尽量使用on，因为其他 方法都是内部调用on来完成的，直接使用on可以提高效率，而且你完全可以用on来代替其他三种写法。至于如何代替我想就不必这么直白的写出来了，真正理 解它们的区别之后自然而然也就不是难事了。

【推荐学习：jQuery视频教程、web前端视频】

위 내용은 jquery 바인딩 이벤트의 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!