JavaScript动态绑定详解


Posted in Javascript onSeptember 14, 2017

问题描述:

假设我们的网页中动态生成了一个按钮,在这个按钮生成之前我们按照一般的事件绑定方法为此按钮绑定了触发事件,但是问题是绑定的事件并没有生效(JavaScript中为元素绑定的事件失效)

分析

1.首先我们来看一下这个按钮是怎么回事:

问题中按钮有一个很关键的特性:动态生成,也就是说是在网页加载完成之后执行某些操作才产生的,它一开始是不存在的;

2.然后我们来分析一下事件的绑定

对于动态生成的元素,它不同于一般的网页既有元素,它的事件绑定不能通过普通的事件绑定实现。

3.关于JavaScript事件绑定的小解(针对本题盗图解析)

这里写图片描述

由图中我们可以看到事件冒泡即由最具体的元素(文档嵌套最深节点)接收,然后逐步上传至document

事件捕获会由最先接收到事件的元素然后传向最里边(我们可以将元素想象成一个盒子装一个盒子,而不是一个积木堆积)

然后我们进入dom事件流

DOM2级事件规定事件包括三个阶段:

① 事件捕获阶段

② 处于目标阶段

③ 事件冒泡阶段

我们分析一下第一阶段就可以知道为什么了,js中一般事件绑定是在网页生成的时候针对具体元素去绑定的,那么请问:网页初始生成时按钮存在吗?答:NOP。这就是为什么事件没有绑定上去,因为都没找到元素啊啊啊啊啊,绑个毛线

解决方法(jQuery on方法)

通过将事件绑定到存在的父元素上让子元素的事件有效

jQuery on用法格式:

$(selector).on(event,childSelector,data,function,map)

示例,比如说id为btn的元素为动态生成,它的父元素为btnParent(必须是网页加载时就有的元素,也可以直接绑定到body上去)那么我们可以这样为它绑定处理事件

$("#btnParent").on("click","#btn",function(){
  console.log('binded!');
 });

如果想要更深层次的理解,那么请跟我一起阅读一下jQuery.on()的源码实现

on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
  var type, origFn;

  // 类型可以使类型映射或者句柄映射
  if ( typeof types === "object" ) {
    // ( types-Object, selector, data )
    if ( typeof selector !== "string" ) {
      // ( types-Object, data )
      data = data || selector;
      selector = undefined;
    }
    // 遍历types对象,针对每一个属性绑定on()方法
    // 将types[type]作为fn传入
    for ( type in types ) {
      this.on( type, selector, data, types[ type ], one );
    }
    return this;
  }

  // 参数修正
  // jQuery这种参数修正的方法很好
  // 可以兼容多种参数形式
  // 可见在灵活调用的背后做了很多处理
  if ( data == null && fn == null ) {
    // ( types, fn )
    fn = selector;
    data = selector = undefined;
  } else if ( fn == null ) {
    if ( typeof selector === "string" ) {
      // ( types, selector, fn )
      fn = data;
      data = undefined;
    } else {
      // ( types, data, fn )
      fn = data;
      data = selector;
      selector = undefined;
    }
  }
  if ( fn === false ) {
    // fn传入false时,阻止该事件的默认行为
    // function returnFalse() {return false;}
    fn = returnFalse;
  } else if ( !fn ) {
    return this;
  }

  // one()调用on()
  if ( one === 1 ) {
    origFn = fn;
    fn = function( event ) {
      // Can use an empty set, since event contains the info
      // 用一个空jQuery对象,这样可以使用.off方法,
      // 并且event带有remove事件需要的信息
      jQuery().off( event );
      return origFn.apply( this, arguments );
    };
    // Use same guid so caller can remove using origFn
    // 事件删除依赖于guid
    fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
  }

  // 这里调用jQuery的each方法遍历调用on()方法的jQuery对象
  // 如$('li').on(...)则遍历每一个li传入add()
  // 推荐使用$(document).on()或者集合元素的父元素
  return this.each( function() {
    jQuery.event.add( this, types, fn, data, selector );
  });
},

关于jQuery还有很多其他的事件绑定方法,当然不一定适用,也提一下

.bind(), .live(), .delegate()

但是说到底.bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的

我们看一下jQuery的.bind(), .live(), .delegate()的实现源码就清楚了

jQuery.fn.extend( {

  bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
    //注意this.on()
  },
  unbind: function( types, fn ) {
    return this.off( types, null, fn );
    //注意this.off()
  },

  delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
  },
  undelegate: function( selector, types, fn ) {
    return arguments.length === 1 ?
      this.off( selector, "**" ) :
      this.off( types, selector || "**", fn );
  }
} );

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
浅谈js的异步执行
Oct 18 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 #Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 #Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 #Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 #Javascript
jQuery plugin animsition使用小结
Sep 14 #jQuery
angular.extend方法的具体使用
Sep 14 #Javascript
浅谈angular.copy() 深拷贝
Sep 14 #Javascript
You might like
一些常用的php简单命令代码集锦
2007/09/24 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
php实现的ping端口函数实例
2014/11/12 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
js实现日期级联效果
2014/01/23 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
python采集百度百科的方法
2015/06/05 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
戴森英国官网:Dyson英国
2019/05/07 全球购物
Android面试题及答案
2015/09/04 面试题
高中毕业自我鉴定
2013/12/16 职场文书
后进生转化工作制度
2014/01/17 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
Python中threading库实现线程锁与释放锁
2021/05/17 Python
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL