js事件委托详解

1、每个函数都是对象，占用内存。内存中的对象越多，性能越差。解决事件处理过多问题的办法是事件委托。

2、事件委托冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

实例

<ul id="myLinks">
    <li id="myLi1">text1</li>
    <li id="myLi2">text2</li>
    <li id="myLi3">text3</li>
</ul>

Ie9以下浏览器中的事件对象是放在全局中的window.event;

解决兼容性：event = event || window.event

事件委托（就是将事件绑定到父级/爷爷级对象上，通过事件对象的target属性来控制子级对象的改变）：

event.target（点击的目标对象）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    td{
      width: 100px;
      height: 100px;
      border:2px solid red;
    }
  </style>
</head>
<body>
<table >
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
</table>
</body>
<script>
  var tab = document.getElementsByTagName("table")[0];
  tab.onclick = function (event) {
    //点击子级对象改变颜色
    event.target.style.backgroundColor = "black";
  }
</script>
</html>

到此这篇关于js事件委托详解的文章就介绍到这了,更多相关js事件委托如何理解内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javascript事件委托的用法及其好处简析

    本文为大家简单介绍了javascript事件委托的用法及其好处,供大家参考,具体内容如下 事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果, 好处:提高性能,新添加的元素还会有之前的事件. event对象:事件源,不管在哪个事件中,只要你操作的那个元素就是事件源 获取事件源: IE:window.event.srcElement 标准下:event.target  target.nodeName来判断是哪个标签 代码应用如下: <!DOCTYPE html PUBLIC "-//W

  • 浅析JavaScript中的事件委托机制跟深浅拷贝

    浅析JavaScript中的事件委托机制跟深浅拷贝

    今天聊下JavaScript中的事件委托跟深浅拷贝 一.事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()">点击</button> <script> function clickEvent(){ alert("点击事件"); } </script> //方法二:通过addEventListener <button id="bt

  • JavaScript给事件委托批量添加事件监听详细流程

    JavaScript给事件委托批量添加事件监听详细流程

    1.什么是事件委托 事件委托:利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应.这样做的优势有: 减少DOM操作,提高性能. 随时可以添加子元素,添加的子元素会自动有相应的处理事件. 2.事件委托的原理 事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件. 举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那

  • JavaScript事件委托原理与用法实例分析

    本文实例分析了JavaScript事件委托原理与用法.分享给大家供大家参考,具体如下: 在日常中,我们可能会听到事件委托这样的概念,有些同学可能对事件委托已经很了解了,也有些同学可能只是听过事件委托,只是会简单的使用,但是对于事件委托的原理不怎么知道.所以该博文会解释一下原生js的事件委托的原理,为什么会有事件委托,为什么可以这样用事件委托等等问题. 1. js中的事件流 在解析事件委托之前,我们先回顾一下js中的事件流,即冒泡和捕获. ① .冒泡:当下级节点触发某个事件的时候,该事件会逐级向上

  • JavaScript事件委托实现原理及优点进行

    1.什么是事件委托? 事件委托就是利用冒泡的原理,将事件加到 父元素 或 祖先元素上,触发执行效果. 例:在 document 中绑定 click 事件,当 click 的对象为 按钮 btn 时,弹框显示 按钮 btn的值 <body> <button id="btn" value="嘿嘿">哈哈</button> <script> window.onload=function () { let btn=docume

  • javascript事件监听与事件委托实例详解

    本文实例讲述了javascript事件监听与事件委托.分享给大家供大家参考,具体如下: 事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托的方式来进行事件的监听. 每个事件都经历三个阶段 捕获 到达目标 冒泡 事件委托需要用到事件的冒泡,冒泡就是事件发生时,上层会一层一层的接收这个事件. 如下页面结构: <body> <div id=&qu

  • js事件委托详解

    1.每个函数都是对象,占用内存.内存中的对象越多,性能越差.解决事件处理过多问题的办法是事件委托. 2.事件委托冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 实例 <ul id="myLinks"> <li id="myLi1">text1</li> <li id="myLi2">text2</li> <li id="myLi3">text

  • Node.js 事件循环详解及实例

     Node.js  事件循环详解及实例 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现. Node.js 单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观察者,如果有事件发生就调用该回调函数. Node.js 有多个内置的事件,我们可以

  • Node.js  事件循环详解及实例

     Node.js  事件循环详解及实例 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现. Node.js 单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观察者,如果有事件发生就调用该回调函数. Node.js 有多个内置的事件,我们可以

  • javascript 中的事件委托详解

    javascript 中的事件委托详解

    这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是撤出了我们的事件冒泡和捕获机制,以及事件委托机制,对于上边这些,我们慢慢来看. 首先说一下事件冒泡和事件捕获机制,事件冒泡是有微软公司提出来的,事件捕获是有网景公司提出来的,当时两家是争论的不可开交,后来w3c也没办法,就采取了折中的方式,事件产生后先捕获后冒泡, 通常,在js中监听事件的方法共有三

  • jQuery动态追加页面数据以及事件委托详解

    jQuery动态追加页面数据以及事件委托详解

    我们要执行的任务是页面起初有一部分图片,我们在底下有一个More Photos的链接,点击后,向当前页面后加载一部分图片,再点击该链接,继续加载,直到将我们列出的页面加载完成,此时该链接也消失了. 首先效果图如下: 这个只截取了最底下的一部分页面.在鼠标悬停在图片上时,还会有文字出现,鼠标移出时文字消失. 我们现在要做的就是点击底下的MorePhotos链接时,再加载一部分数据,然后再点击在加载一部分数据,直到数据加载完. 首先body中代码如下: <div id = "container

  • 基于事件冒泡、事件捕获和事件委托详解

    基于事件冒泡、事件捕获和事件委托详解

    事件冒泡.事件捕获和事件委托 在javascript里,事件委托是很重要的一个东西,事件委托依靠的就是事件冒泡和捕获的机制,我先来解释一下事件冒泡和事件捕获: 事件冒泡会从当前触发的事件目标一级一级往上传递,依次触发,直到document为止. 事件捕获会从document开始触发,一级一级往下传递,依次触发,直到真正事件目标为止. 这么说是不是很抽象,其实就像我敲击了一下键盘,我在敲击键盘的同时,我是不是也敲击了这台电脑,我写个例子大家就明白了: <!DOCTYPE html> <ht

  • javascript事件冒泡,事件捕获和事件委托详解

    1.事件冒泡:在javascript事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止.并不是所有的事件都有冒泡现象,比如如下几个:blur事件 ,focus事件, load事件 2.事件委托:事件捕获恰好与事件冒泡相反,它从顶层祖先元素开始,直到事件触发元素. js事件捕获一般通过DOM2事件模型addEventListener来实现的: target.addEventListener(type, listener,

  • AngularJS中使用three.js的实例详解

    AngularJS中使用three.js的实例详解 一.轨迹球的引入问题 一开始我是用下面的方式引如轨迹球,但是会报Trackballcontrols is undefined的错. import * as THREE from 'three'; import * as Trackballcontrols from 'three'; 但其实我是能够在node_module下的threejs的包中找到Trackballcontrols的文件的,我一开始以为是引用的路径没对然后修改路径到对应包下Tr

  • jQuery.form.js的使用详解

    面临问题:form表单submit之后,后端会返回提示信息.但原生html无法获取后端返回的数据,就造成了这样一种局面:提交之后,页面发生跳转,在一个空白页面上显示了后端返回的json数据,用户体验0分. 解决办法:使用jquery.form.js 步骤 自定义控制提交函数 var submitChange=function () { $("form").ajaxSubmit(function (message) { alert(message.text); window.locati

  • JS 实现计算器详解及实例代码（一）

    JS 实现计算器详解及实例代码（一）

    Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器 自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板

随机推荐