简简单单学习js事件代理

liujs 发布于2019-08-22 10:53 / 2273人阅读

摘要：事件代理事件委托简述事件代理就是在我们为一批元素添加事件的时候，可以将事件委托给父元素来触发事件。代码如下新添加所以我们需要利用到事件代理因为我们需要兼容，所以我们需要这种兼容的写法这样我们就解决了上面的问题。

事件代理（事件委托）

简述 事件代理就是在我们为一批元素添加事件的时候，可以将事件委托给父元素来触发事件。 优点

节省内存

可以对所有父元素下的子元素添加事件（包括原有的和后来添加的）

实例


    
        我是第一个li
        我是第二个li
        我是第三个li
        我是第四个li
        我是第五个li

当我们想为 li标签添加一个鼠标划上某一个 li 时改变背景颜色这一事件的时候，我们有许多种方法，我们可以利用css的hover可以实现：

    li{
        background:yellow;
        border-bottom:3px solid blue;
    }
    li:hover{
        background:red;
    }

但是此方法在 ie6 并不适用，由于我们需要兼容所有浏览器，所以我们将其弃用，然后我们可以采用 js 方法进行实现：

我们利用 js 为 li标签添加事件


    var lis = document.getElementsByTagName("li");

    for(var i=0,l=lis.length;i

GPU云服务器云服务器事件代理 Javascript事件代理表单单选框 js 事件分发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91397.html

jQuery入门笔记之（三）事件详解

摘要：可以传递三个参数表示一个或多个事件类型，比如。表示绑定到指定元素的处理函数。我们称它为简写事件。必须在中，并且使用作为事件触发元素，不然无效。和表示鼠标移入和移出的时候触发。按下返回按下返回和分别表示光标激活和丢失，事件触发时机是当前元素。转自个人博客在JavaScript 有一个非常重要的功能，就是事件驱动。如果你的网页需要与用户进行交互的话，就不可能不用到事件。它在页面完全加...

GitCafe 2019-08-19 17:17 评论0 收藏0
2018年腾讯前端一面总结（面向2019届学生）

摘要：前言腾讯一面，相比阿里一面来说，腾讯一面先给打电话预定时间，这也给了我们这些面试者去准备的时间。其实闭包也就是指有权访问另一个函数作用域的函数而已。常用的创建闭包的方法就是在函数内部创建另一个函数。前言腾讯一面，相比阿里一面来说，腾讯一面先给打电话预定时间，这也给了我们这些面试者去准备的时间。但是也正是因为这种确定性，也有在等待电话的时候的心情的忐忑。背景我是一名大三学生，大一...

Kosmos 2019-08-22 15:17 评论0 收藏0
简简单单认识js里的Bom对象

摘要：里面的对象是什么是浏览器对象，全拼为都有什么对象是中的顶级对象，所有定义在全局作用域中的变量函数都会变成对象的属性和方法，在调用的时候可以省略。 js里面的Bom对象 showImg(https://segmentfault.com/img/remote/1460000010691602); Bom是什么？ Bom是浏览器对象，全拼为Browser Object Model Bom都有...

CoffeX 2019-08-20 18:53 评论0 收藏0
简简单单学习gulp的入门与使用

摘要：的使用首先，我们需要在官网下载插件，地址如下在这个网站我们可以寻找到自己需要的插件以为例，然后在项目下打开命令提示行，输入以下命令然后我们在里输入一下代码引入插件调用插件输出位置 gulp的入门与使用安装使用 gulp的入门安装安装gulp需要使用到nodo.js,安装链接如下：http://jingyan.baidu.com/arti... 安装完成之后我们以全局安装gu...

meteor199 2019-08-22 10:54 评论0 收藏0
React 导读（三）

摘要：场景为了更清晰的安排年前年后的工作和值班，现在要对过年期间人员请假的情况进行统计，并且进行一个简单的管理。我们现在来订阅一个名为的事件，用来表示表格中需要展示每条数据。前言 React 导读（一）React 导读（二）在之前 2 篇文章中中学习到了写第一个 Web 组件以及常用的生命周期函数的使用，这篇文章将继续之前的目录，开始新的知识点补充： [x] React 如何编写 He...

zzir 2019-08-22 15:35 评论0 收藏0