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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
Javascript动画效果(3)
Oct 11 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
js 颜色选择插件
Jan 23 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 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面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
php cli换行示例
2014/04/22 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP中的session安全吗?
2016/01/22 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
更正确的asp冒泡排序
2007/05/24 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
BootStrap入门学习第一篇
2017/08/28 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
Python常用的日期时间处理方法示例
2015/02/08 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
python集合的新增元素方法整理
2020/12/07 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
Linux常见面试题
2016/10/04 面试题
高职教师先进事迹材料
2014/08/24 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
劳动模范获奖感言
2015/07/31 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python