索鸟网

  1. 首页
  2. 简简单单学习js事件代理

简简单单学习js事件代理


事件代理(事件委托)

简述

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

优点

  • 节省内存
  • 可以对所有父元素下的子元素添加事件(包括原有的和后来添加的)

实例

<body>
    <ul id="oul">
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
        <li>我是第四个li</li>
        <li>我是第五个li</li>
    </ul>

    <input type="button" value="添加" id="btn">
</body>

当我们想为 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<l;i++){
        lis[i].onmouseover = function () {     
            this.className = "oli";
        }
        lis[i].onmouseout = function () {     
            this.className = "";
        }
    }


我们可以这样将事件直接添加到 li标签 上,但是这样需要执行12次事件,对内存损耗较大。并且这样添加事件后,还有另外一种缺点,比如你需要在已有的 li标签 后添加新的 li标签 ;这样新添加的 li标签 并不能执行前面的事件。代码如下:

    var btn = document.getElementById("btn");
    var oul = document.getElementById("oul");
    btn.onclick = function (){
        var newli = document.createElement("li");
        newli.innerHTML="新添加li";
        oul.appendChild(newli);
    }

所以我们需要利用到事件代理

    oul.onmouseover = function (e) {
        var oEvent = e||window.event;
        var nodeli = oEvent.target||oEvent.srcElement;
        nodeli.className = "oli"
    }
    oul.onmouseout = function (e) {
        var oEvent = e||window.event;
        var nodeli = oEvent.target||oEvent.srcElement;
        nodeli.className = ""
    }
    
    因为我们需要兼容ie,所以我们需要这种兼容的写法
    var oEvent = e||window.event;
    var nodeli = oEvent.target||oEvent.srcElement; 

这样我们就解决了上面的问题。
你懂了吗?

javascript

来源地址:https://segmentfault.com/a/1190000010688797 版权归作者所有!

相关教程

  • 简简单单学习js事件代理

    事件代理(事件委托) 简述 事件代理就是在我们为一批元素添加事件的时候,可以将事件委托给父元素来触发事件。 优点 节省内存 可以对所有父元素下的子元素添加事件(包括原有的和后来添加的) 实例 <body> <ul id="oul"> <li>我是第一个li</li>
  • 简简单单学习js事件代理

    事件代理(事件委托) 简述 事件代理就是在我们为一批元素添加事件的时候,可以将事件委托给父元素来触发事件。 优点 节省内存 可以对所有父元素下的子元素添加事件(包括原有的和后来添加的) 实例 <body> <ul id="oul"> <li>我是第一个li</li>
  • 事件代理学习与总结

         事件代理(Event Delegation),又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。很容易理解这个名称,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。     事件代理的用处是?对于Javascript,添加到页面的事件程序数量会直接关系到页面的整
  • react js学习手记:react 事件

    事件 onClick={this.handleClick} handleClick不要加括号 括号是函数调用,会把函数结果返回,显然并不需要 触摸事件,只针对移动设备 onTouchCancel onTouchEnd onTouchMove onTouchStart 键盘事件 onKeyDown onKeyPress(仅仅是按下按钮) onKeyUp 剪切事件 o
  • 简简单单认识js里的Bom对象

    js里面的Bom对象 Bom是什么? Bom是浏览器对象,全拼为Browser Object Model Bom都有什么? window navigator location screen history document window window对象是js中的顶级对象,所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法,在调
  • 【笔记】事件委托(即事件代理)知识点

    事件委托原理 事件委托就是利用事件冒泡原理实现的! 事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件; 例:页面上有一个节点树,div > ul > li > a 比如给最里面的a 加一个click事件,那么事件就会一层一层的往外执行,执行顺序 a > li > ul > div, 有这样一个机制,当
  • 跨浏览器的事件代理

    我们知道,在主流的浏览器里面绑定事件处理程序和解绑分别是: 绑定:addEventListener(eventType, handler, useCapture); 解绑:removeEventListener(eventType, handler, useCapture); eventType: 事件的名字,string类型,例如‘click’ ha
  • 简简单单学习gulp的入门与使用

    gulp的入门与使用 安装 使用 gulp的入门 安装 安装gulp需要使用到nodo.js,安装链接如下:http://jingyan.baidu.com/arti... 安装完成之后我们以全局安装gulp打开命令提示行,输入以下命令: npm install gulp-cli -g 然后我们建立自己的项目在自己的项目目录下,打开命令提示行,因为我