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 相关文章推荐
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
javascript的console.log()用法小结
May 31 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
PHP新手上路(五)
2006/10/09 PHP
php SQL防注入代码集合
2008/04/25 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
vue实现分页栏效果
2019/06/28 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
【python】matplotlib动态显示详解
2019/04/11 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
《识字五》教学反思
2014/03/01 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
高中信息技术教学反思
2016/02/16 职场文书