jquery 绑定事件方式(可能出错处)

傷城~ 2022-10-01 00:44 163阅读 0赞

## jquery 绑定事件的方式？ ##

#### \- 其实大体可以分为能不能绑定动态加载出来的节点事件来分类 ####

#### 1.直接在标签上绑定 ####

<button onclick='btn()'></button>

#### 2. 事件名绑定 ####

<button id='btn'></button>
    <script> $("#btn").click(function(){ console.log(); }) </script>

#### 3. bind()绑定，与直接事件绑定类似（无法动态绑定，） ####

源码：  
`bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }`

#### 4. live,on动态绑定 ####

jquery 1.7版本以前使用live 动态绑定  
jquery 1.7版本以后使用on 动态绑定

#### 5.live,delegate,on动态绑定 ####

先看这三者的源码：  
live:

live: function( types, data, fn ) { 
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
    }

delegate:

delegate: function( selector, types, data, fn ) { 
    return this.on( types, selector, data, fn );
    }

on:

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

*  首先是Live：  
    绑定的是this.context，

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

大多数情况下this.context 绑定的document,  
故可推断事件的委托交给了doucment。

*  然后就是delegate,

$("#btn").delegate('li','click',function(){ })

相当于返回的时候调用了一次on

*  最后介绍on ，  
    on 经过测试，事件委托并不是交给document,而是绑定到父元素上，如果不绑定到父元素上的时候，事件绑定会失效。

$('#father').on('click','#son',function(){ })

— 请大家谨慎使用，最好使用on绑定，而且把事件委托交给父元素.

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery事件绑定方式

JQuery事件绑定方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

谁践踏了优雅/ 2022年12月18日 05:59/ 0 赞/ 250 阅读

相关 JQuery-事件绑定详解

目录定义元素监听事件 on() 绑定事件 -------------------- 定义元素监听事件语法：$(选择器).监听事件名称(处理函数); 说明

一时失言乱红尘/ 2022年11月29日 12:20/ 0 赞/ 219 阅读

相关 jquery 绑定事件方式(可能出错处)

jquery 绑定事件的方式？ \- 其实大体可以分为能不能绑定动态加载出来的节点事件来分类 1.直接在标签上绑定 <button onclick='

傷城~/ 2022年10月01日 00:44/ 0 赞/ 164 阅读

相关 jQuery动态绑定事件

jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8

水深无声/ 2022年09月30日 12:57/ 0 赞/ 275 阅读

相关 jquery绑定事件

bind()向匹配元素添加一个或多个事件处理器。 $(selector).bind(event,data,function) live() 向当前或未来的匹配元素添加一个

左手的ㄟ右手/ 2022年06月17日 01:27/ 0 赞/ 334 阅读

相关 jQuery绑定事件的四种方式

jQuery提供了多种绑定事件的方式，每种方式各有其特点，明白了它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出优雅而容易维护的代码。下面我们来看下jQuer

以你之姓@/ 2022年06月16日 04:52/ 0 赞/ 212 阅读

相关 JQuery_绑定事件

绑定：绑定事件：一.如何给元素同时绑定两个事件？方法一：链式编程 $('button').click(function(){ a

ゞ浴缸里的玫瑰/ 2022年05月20日 23:42/ 0 赞/ 373 阅读

相关 jQuery基础事件绑定

学习要点： 1.绑定事件 2.简写事件 3.复合事件 JavaScript有一个非常重要的功能，就是事件驱动。当页面完全加载后，用户通过鼠标或键盘触发页面中绑定事件的

分手后的思念是犯贱/ 2022年05月13日 11:36/ 0 赞/ 302 阅读

相关 jQuery事件绑定与解绑的方式

jQuery绑定事件的方式很简单，有两种。其优异点都在下面的注释中做好了，请看下面的代码吧。 <!DOCTYPE html> <html lang="en">

逃离我推掉我的手/ 2022年03月12日 10:56/ 0 赞/ 285 阅读

相关 jQuery--解除事件绑定

解除事件绑定在元素绑定事件之后，当在某个时刻不再需要该事件处理时，可以解除所绑定的事件。在jQuery中提供了unbind()和undelegate()方法，分别用于解

叁歲伎倆/ 2021年08月13日 18:59/ 0 赞/ 554 阅读