展开

关键词

首页关键词js事件委托兼容

js事件委托兼容

相关内容

  • js事件委托

    概念事件委托也叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。动态绑定: 新生dom节点如果用原来的方式是无法绑定事件的,用委托的方式这方面可以轻松实现,保证父元素存在即可。原理利用事件冒泡,而冒泡指的就是事件从向上传递事件,如果事件有相应的函数绑定就会执行其绑定函数。举例:ul下的li元素有绑定事件,我们通过ul绑定委托之后,委托的源码部分会在其执行函数内针对事件源进行筛选判定是否符合筛选条件(是否是li),然后针对的获取属性或者内容,进行相关的操作。从这里可以看到没有直接针对特定元素绑定事件,而是对事件源进行匹配,所以不存在新生元素无事件的问题。
    来自:
    浏览:375
  • JS 事件绑定、事件监听、事件委托详细介绍 转

    在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等。这些名词是什么意思呢,有什么作用呢?IE8以前IE一直坚持自己的事件机制(前端人员一直头痛的兼容性问题),IE9以后IE也支持了W3C规范。hello1addEventHandler(btn5,click,hello2);添加事件hello2removeEventHandler(btn5,click,hello1);移除事件hello1事件委托事件委托就是利用冒泡的原理事件委托优点1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度,减少内存的占用。 实例分析JavaScript中的事件委托和事件绑定 ,这篇文章写得还不错。item1);}item2.onclick = function(){ alert(hello item2);}item3.onclick = function(){ alert(hello item3);}事件委托
    来自:
    浏览:2079
  • 广告
    关闭

    腾讯「技术创作101训练营」第三季上线!

    快来报名!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到
  • JavaScript事件对象与事件的委托

    事件对象包含事件相关的信息,如鼠标、时间、触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下:document.getElementsByTagName(div).onclick = function(e){  e = window.event || e; 兼容IE低版本(事件对象绑定在window的event上)  console.log(e);这里e就是事件对象} 事件的属性和方法type:获取事件类型(click、mouseover等等)target:获取发生的所在元素(在低版本IE下用srcElement属性)stopPropagation() 阻止事件冒泡(IE用cancelBubble属性为false阻止冒泡)preventDefault() 阻止事件默认行为(IE用returnValue属性为false阻止默认行为)事件委托利用target属性,获取时间发生的所在对象,避免全体子元素加事件,对比如下: var tbs=document.getElementsByTagName(td); for(var i=0;i
    来自:
    浏览:386
  • js事件委托的理解 转

    今日看下拉列表时用到事件委托,特意在网上搜查了一些资料,http:www.cnblogs.comliugang-vipp5616484.html  这篇文章写的很详细,非常感谢作者。事件委托也叫事件代理,事件委托就是利用事件冒泡,指定一个事件处理程序,就可以管理某一类型的所有事件,何为事件冒泡呢,就是从事件最深的节点开始,然后逐步向上传播事件,最大的优点是提高性能一般的做法 111
    来自:
    浏览:163
  • JavaScript 事件委托 以及jQuery对事件委托的支持

    现在单独把事件委托 拿出来和大家探讨一下。什么是委托? 所谓的委托,现实意义上讲是指将自己的事务嘱托他人代为处理。比如说甲委托乙去做某些事儿,那么,甲则是委托人,乙是被委托人。事件委托        事件委托  允许我们不必为某些特定的节点添加事件监听器,而是将事件监听器添加到(这些节点的)某个 parent节点上。另外,如果在实际的应用中,很有可能同过js在 div1下动态生成p 元素,这时候,我们相应地还要添加事件处理函数,像这种动态添加的动作很有可能分散在我们 应用的很多个角落,这样动态添加处理函数将是一个非常蛋疼的事儿jquery 对事件委托的支持 在jQuery里对事件委托的支持,有以下几个函数:?如果我们在js中动态地给box1 增加子元素P,相应的处理函数也会对其有效。
    来自:
    浏览:207
  • 事件的捕获、冒泡、委托

    原声JavaScript中,事件是不可缺少的,HTML就是通过事件才能与JavaScript进行交互。stopPropagation既可以阻止事件的捕获还能阻止事件的冒泡,如果我在test冒泡阻止了事件的冒泡,那么就不会输出body冒泡。事件委托是什么,我相信很多用jQuery添加元素的时候(append),,都遇见过添加的元素点击事件无法响应,其实这就是事件的委托。一般我们给li添加点击事件是这样的?但其实我们可以用事件委托?这就是事件委托,事件委托好处就是添加进来的元素也能绑定事件。对于事件,在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分,但是由于事件冒泡被所有主流的浏览器兼容,从兼容性角度来说还是建议大家使用事件冒泡模型。这就是事件的捕获、冒泡、委托。
    来自:
    浏览:106
  • javaScript事件委托

    2、DOM 事件流:冒泡事件流、捕获事件流。3、DOM 事件模型:捕获、目标、冒泡。那什么是事件委托呢?事件委托:即是,一个事件本来是要绑定到某个元素上,然而却绑定到了该元素的父(或祖先)元素上,利用事件冒泡原理,触发执行效果。二、事件委托的优点:那为什么要使用事件委托?事件委托有什么好处,以及使用时要注意什么?事件委托大概有两个优点:1、提高网页性能。2、通过事件委托添加的事件,对后期生成的元素依然有效。上面提到的第二点如何理解呢?举个例子:现在页面上有个 ul,ul 里有三个 li,通过循环给每个 li 添加点击事件,发现三个 li 到可以正常触发点击事件了,然后通过 js 代码在 ul 里插入(append)两个 li,再试着点击所有三、事件委托的使用方法:使用上面 ul 的例子进行事件委托给每个 li 绑定事件,示例代码:var ul = document.querySelector(ul); ul.onclick = function
    来自:
    浏览:219
  • 事件委托和this

    它将我们从对特定元素的事件监听中释放出来,如果没有事件冒泡,我们需要监听很多不同的元素来确保捕获到想要的事件。事件委托事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。有多种方法来处理事件委托。标准方法来源于原生浏览器的功能。浏览器以一种特定的工作流程来处理事件,并支持事件捕获和事件冒泡。W3C关于浏览器怎么支持事件的文档:W3C DOM Level 3 Events。一些JS库和框架公开了其它方式,如发布订阅模型(将在后文提及)。订阅发布模式  还有其它实现事件委托的方法可以考虑,其中值得一提的就是发布订阅模型。发布订阅模型也称为了广播模型,牵涉到两个参与者。
    来自:
    浏览:192
  • JavaScript-事件委托(事件代理)

    今天给自己的知识结构填个坑,再复习下JS的事件代理。事件代理可以给JS批量生成的DOM元素添加事件,并且还可以提高效率,因为你确实不用给每个DOM节点添加事件监听了。事件的监听器,是被添加到了它们的父元素上,监听器会分析从新生成的子元素上冒泡上来的事件,并找到是哪个子元素的事件。现在,有一个ul、li的列表了,, li 1 li 2 li 3 li 4 li 5 li 6 那么,当每个子元素被点击的时候,会发生不同的事件。那么这时,你需要把事件监听器放在它们的父容器 ulId 上面。这时,当子元素被点击的事件,冒泡到父元素Li上的时候,你就可以通过检查事实的target,从而获取真正被点击的节点元素的引用。现在大部分JS都会使用jQuery等工具库来处理DOM事件,但对于事件委托的背后原理,我们还是要了解的。 浅谈数据结构 - 字典
    来自:
    浏览:354
  • 委托与事件-委托事件案例(三)

    前言  这两天一直在想如何结合实际案例来结束委托与事件的讲解,下面讲解两个事例,用来加深对委托及事件的理解。事例一(分页功能)  本场景是用来讲解使用的,具体内容功能需自行填补实现。用委托加事件来实现分页功能的通用。按上一节讲解中的逻辑处理,分为订阅者和发布者,一样的可以先定义订阅者感兴趣的对象,然后发布者,订阅者。再就是主程序调用。public delegate void PageActionEventHandler(object sender, PageChangeEventArgs e); 定义委托类型的事件 public; } }} 谨记,事件基于委托,为委托提供了一种发布订阅机制。理解发布订阅机制就会容易多了。一旦理清楚,发现好像也并不是很难的。多多消化一下,自己动手去想一下实例。去写一下。很快能掌握的。总结  委托与事件到这里就大结局了。一些列的问题也解决了。心中的疑惑也揭开了。下面我们就接着基础系列写其他的了。  曾经,我们懵懵懂懂地看完了狮子王,知道有个勇敢坚强的小狮子叫辛巴。  
    来自:
    浏览:177
  • 委托与事件-委托详解(一)

    前言  说起委托和事件,我就想起了再学校的时候,当时死记硬背去记什么是委托什么是事件。记得当时蝼某人问我,委托是什么?但是只知道一点点,就跟他说:打个比方,我要喝水,但是我不去买,我委托你去帮我买水。在这个例子中都是返回的string,都是无参数的委托链(多播委托)  上面我们简单的介绍了下委托及其用法,这里我们可以了解一下委托链,顾名思义,委托链也就是委托连续,啥意思呢?注意,委托链(多播委托)--委托的签名必须返回void,否则就只能得到委托调用的最后一个方法的结果。Func buyWater = LouBuy.LouBuyWater;表示返回string类型,参数也是string类型的一个方法总结  以前总在说委托与事件,都没有一次去了解熟悉它,现在得好好巩固一下了到这里就介绍完了委托,看上去也挺简单的。我们下一节继续看Event事件。然后结合委托一起看看委托加事件如何运用的。
    来自:
    浏览:212
  • 委托与事件-事件详解(二)

    理解委托的一种好的方式是把委托视为是给方法的签名和返回类型指定名称。  今天我们继续来了解委托和事件,现在我们来了解学习一下事件详解。事件  事件基于委托,为委托提供了一种发布订阅机制,在.Net中随处可见到这种事件,例如在应用程序中,Button类提供了Click事件,这类事件就是委托。  到底事件的一个怎么运行过程呢?在介绍此过程中我们先看下委托与事件的微软编码规范吧。发布者:    一、声明一个委托    二、基于委托声明一个事件    三、一个判断事件是否为空,然后开始执行处理事件    四、一个调用用来触发事件的方法 先定义委托 public delegate总结  我们仔细考虑下这整个委托与事件,事件的本质也就是对委托的一种使用。看我们事件注册绑定和多播委托的用法是一样的,事件的声明也是使用的委托类。  大家好好想想其中的奥妙,然后理解消化下。
    来自:
    浏览:147
  • 云数据库 Tendis

    产品概述,应用场景,产品性能,命令兼容性,地域和可用区,相关概念,相关产品,词汇表,联系我们,服务等级协议,服务条款,混合存储版,计费概述,续费说明,欠费说明,退费说明,创建 Tendis 实例,产品定价,连接 Tendis 实例,iptable 转发,使用常见问题,购买相关问题,连接登录问题,.Net 连接示例,C 连接示例,Go 连接示例,Java 连接示例,Node.js 连接示例,PHP 连接示例,Python 连接示例,为实例指定项目,扩容实例规格,销毁实例,配置安全组,禁用命令,监控功能,产品优势,产品动态,产品简介,产品概述,应用场景,产品系列,产品性能,命令兼容性,地域和可用区,相关概念实例,产品定价,连接 Tendis 实例,iptable 转发,使用常见问题,购买相关问题,连接登录问题,多语言连接,.Net 连接示例,C 连接示例,Go 连接示例,Java 连接示例,Node.js
    来自:
  • 委托和事件

    现在你已经对委托有了初步了解,是时候对上面的例子做个改进了。程序一如预料地那样输出了:Morning, Jimmy Zhang早上好, 张子阳现在,假设我们需要使用上一节学到的知识,将多个方法绑定到同一个委托变量,该如何做呢?此时,轮到Event出场了,C# 中可以使用事件来专门完成这项工作,我们改写GreetingManager类,它变成了这个样子:很容易注意到:MakeGreet 事件的声明与之前委托变量delegate1看到这里,你差不多明白到:事件其实没什么不好理解的,声明一个事件不过类似于声明一个委托类型的变量而已。我们想当然地改写Main方法:这次,你会得到编译错误:事件“Delegate.GreetingManager.MakeGreet”只能出现在 += 或 -= 的左边(从类型“Delegate.GreetingManager
    来自:
    浏览:148
  • 事件委托与阻止冒泡

    简单说下事件委托与阻止冒泡html: 全部 纽约 洛杉矶 拉斯维加斯 夏威夷 旧金山 奥兰多 西雅图 js:$(ul).on(click,function(){ alert(父元素ul被点击);});$(ul).on(click,li,function(){ alert(子元素li被点击);}); 当点击具体的li元素时,发现ul的事件也被触发了,这是我们不想看到的。
    来自:
    浏览:465
  • Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)

    研发加了ajax事件后,我的交互效果有部分受了影响!一个小姑娘,在一群大老爷们研发堆里,对着昏暗的电脑和看不太懂的后台代码,改了半天。最后没解决。我就回来了。所以一开始事件找不到“接头人”就没有执行。扫噶,定位到问题,就好解决了。之所以整理成随笔,是因为我之前没遇到过这个问题,听过事件委托机制,但是根本没研究过不知道适用于什么样的bug场景。,是通过获取元素的类名被点击后执行对应方法,但是研发套完模板,他会把所有的结构先清空,导致jq根本找不到那个元素,所以事件就不得执行了。正规点的说:JS异步加载,JQ事件不被执行解决方法(百度的标题,hah)jquery中动态新增的元素节点无法触发事件问题(同上)解决方法:??但是缺点是:给一个元素添加多个事件委托机制时,他就挂了。 王者方法:on?模拟多个事件!
    来自:
    浏览:693
  • jquery 事件委托 - delegate()

    事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。事件委托的写法$(function(){ $list = $(#list); $list.delegate(li, click, function() { $(this).css({background:red}); });})... 1 2 3 4 5 这种写法是绑定#list节点,用于监听从子节点li的事件冒泡事件。因为这个最后第6个li标签是在绑定click()事件之后创建的,所以这种写法,怎么点击第6个li标签都不会触发click()事件。改写使用事件委托的方式,则第6个li标签可以触发click事件?采用父节点#list使用事件委托的方法,可以绑定新增的click()节点事件。因为这个是利用事件冒泡的原来来实现的。
    来自:
    浏览:709
  • 云函数

    创建 Thumbnail 函数并测试,最佳实践概述,Node.js 说明,CMQ Topic 触发器,示例说明,配额限制说明,Java 说明,POJO 类型参数使用示例,使用 Gradle 创建 zip,使用 AI 接口实现身份证识别,Node.js ,PHP,Python,私有网络通信,函数概述,创建及更新函数,删除函数,查询函数,查询函数运行日志,配置告警,环境变量,创建触发器,删除触发器,启停触发器查看运行日志,别名管理相关操作,服务等级协议,插件更新日志,Python SDK,更新命名空间,列出命名空间列表,删除命名空间,创建命名空间,发布新版本,查询函数版本,获取函数代码下载地址,Node.js,使用 SCF 上报自定义监控数据(Python),使用 SCF 上报自定义监控数据(Node.js),发布层版本,返回层列表,获取层版本列表,获取层版本详细信息,删除层版本,云函数状态码,日志检索实践,终止函数异步事件,拉取函数异步事件列表,日志管理,CLB 触发器说明,日志检索教程,日志投递配置,Serverless 多文件上传处理,获取账户信息,更新函数异步重试配置,获取函数异步重试配置,代码开发
    来自:
  • 庖丁解牛——深入解析委托和事件

    这篇博文我不讲委托和事件的概念,因为大段的文字概念没有任何意义。 具体想了解,委托和事件的概念可以MSDN查阅。我这篇文章的主题思路是委托如何一步步进化成事件: 何为委托--->委托来实现事件--->用方法对委托的封装--->Event的 add,remove方法的引入--->标准事件写法--->反编译探究竟。用几个例子以及Reflector反编译探究委托和事件的关系。不足之处,还望多多指教... 何为委托:首先,委托是一种类型,是一种定义了方法签名的类型。看了上面这个例子,我们再举一个例子来演示委托怎么替做什么: 委托是一种定义方法签名的类型。 当实例化委托时,可以将其实例与任何具有兼容签名的方法相关联。 可以通过委托实例调用方法。FilterDelegate(int i); 所以,static List Filter(int args) { Counter c = new Counter(); c.onCount = Count;相当于订阅了一个事件
    来自:
    浏览:580
  • js事件对象相关随记

    2.事件的三种写法 在HTML中把事件处理函数作为属性执行JS函数 执行与脚本分离 分离的脚本 var input = document.getElementsByTagName(input); input.onclick在非IE浏览器下,事件对象作为事件的参数,在IE下是window.event实现跨浏览器兼容获取event对象 input.onclick = function (evt) { var e = evt= function(e){ if(e.ctrlKey){ alert(e.keyCode)按下ctrl键弹出17 } } } 4.阻止浏览器默认行为 参考下一节内容5.阻止冒泡 参考下一节内容6.事件委托一般来说,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能; 每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率就越大,自然性能就越差了,比如上面的100个li,就要占用100个内存空间,如果是1000个,10000个呢,那只能说呵呵了,如果用事件委托,那么我们就可以只对它的父级
    来自:
    浏览:285

扫码关注云+社区

领取腾讯云代金券