What is the function of jquery binding event

The function of jquery binding event: Bind ordinary events to DOM nodes. When the DOM node is selected, bind the event to it to facilitate users to provide corresponding operations. jQuery provides four event binding methods, namely bind, live, delegate, and on, and the corresponding unlistening functions are unbind, die, undelegate, and off.

The operating environment of this tutorial: windows7 system, jquery3.6 version, Dell G3 computer.

What is an event?

The response of the page to different visitors is called an event.

Event handlers refer to methods that are called when certain events occur in HTML.

Example:

• Move the mouse on the element.

• Select the radio button

• Click on the element

The term "trigger" is often used in events "(or "fire") For example: "The keypress event fires when you press a key."

jquery event binding

Usually, we need to process related events of specific nodes, such as a button being clicked some type of. But there is a problem here. If we can get the specific nodes, of course there is nothing to say. But sometimes, the node we want to process does not exist yet, but we need to predefine its event processing. For example, we say that in a UL, when each LI is clicked, a function must be executed. However, the content itself in UL may change. At first it only had two LIs, and then it became three LIs. The extra LI must also be able to respond to events.

The above situation is a common requirement. We can use the event bubbling mechanism to achieve our goal. We bind the event processing to UL, so that when LI is clicked, it will bubble up to the superior UL. In this way, when processing the event, we can determine which node the event is for the next step.

Event binding is an event for the dom element. It is bound to the dom element and can monitor the same event multiple times on an element. Function:Bind ordinary events to DOM nodes. When the DOM node is selected, bind the event to it to facilitate users to provide corresponding operations.

jQuery provides four event binding methods, namely bind, live, delegate, and on. The corresponding functions to unlisten are unbind, die, undelegate, and off.

The difference between these methods:

1. The bind() function can only set events for existing elements; but live(), Both on() and delegate() support event settings for newly added elements in the future;

2. The bind() function was relatively popular before jquery version 1.7. After the release of version 1.7, the official use of bind is no longer recommended. (), the replacement function is on(), which is also a newly added function in version 1.7. Similarly, it can be used to replace the live() function. The live() function has been deleted in version 1.9;

3. live( ) function is similar to the delegate() function, but the live() function is worse than delegate() in terms of execution speed, flexibility and CSS selector support

4. bind() supports all versions of Jquery; live() supports jquery1.9-; delegate() supports jquery1.4.2; on() supports jquery1.7;

The following will introduce these methods in detail:

1. bind(type,[data],function(eventObject))

Bind is a more frequently used type. Its function is to bind a specific element to the selected element. The meaning of the event type listening function is as follows:

type: event type, such as click, change, mouseover, etc.;

data: the parameters passed in to the listening function, obtained through event.data arrive. Optional;

function: Listening function, you can pass in the event object. The event here is the event object encapsulated by jQuery, which is different from the native event object. You need to pay attention when using it

bind Source code:

  bind: function( types, data, fn ) {

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

  }

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

The characteristic of bind is that it will bind the listener to the target element, one to one. There is no problem in using it when the elements on the page will not be added dynamically. But if a "list element 5" is dynamically added to the list, there will be no response when clicking on it, and you must bind it again. To avoid this trouble, we can use live.

jQuery also has a shorthand way of event binding, such as a.click(function(){});, a.change(function(){});, etc. Their functions are the same as bind, but It's just an abbreviation.

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

The parameters of live are the same as bind. What’s weird about it? Let’s take a look at the source code first. :

live: function( types, data, fn ) {

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

return this;

}

You can see that the live method does not bind the listener to itself (this), but to this.context. What is this context? In fact, it is the limited range of the element. It will be clear after reading the following code:

$('#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前端视频】

The above is the detailed content of What is the function of jquery binding event. For more information, please follow other related articles on the PHP Chinese website!