zoukankan      html  css  js  c++  java
  • jQuery事件委托

    一、事件委托简介

    1、什么是事件委托

     事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件。

    通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。

    2、为什么要用事件委托

     (1)考虑一个ul,在li的数量非常少的时候,为每一个li添加事件当然会使用for循环;但是数量多的时候这样做太浪费内存,长到上百上千上万的时候,为每个li添加事件就会对页面性能产生很大的影响。

     (2)给一个ul里面的几个li添加了事件但是如果动态又生成了li则刚生成的li不具备事件这时就需要用到委托。

    3、作用:

    1.性能要好
    2.针对新创建的元素,直接可以拥有事件

    4、事件委托原理

    事件委托就是利用事件冒泡原理实现的!
    事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件;
    例:页面上有一个节点树,div > ul  > li  >  a
    比如给最里面的a 加一个click 事件,那么事件就会一层一层的往外执行,执行顺序 a > li > ul > div,  有这样一个机制,当我们给最外层的div 添加点击事件,那么里面的ul , li  , a  做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托他们父集代为执行事件;

    二、使用场景

      •为DOM中的很多元素绑定相同事件;
      •为DOM中尚不存在的元素绑定事件;

    实例:

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
     $(function () {
            $("ul").on("click","li",function () {
                alert(1);
            })
        });
  • 相关阅读:
    关于<?php exit;?>"的绕过问题
    机器学习--DIY笔记与感悟--②决策树(1)
    机器学习--DIY笔记与感悟--①K-临近算法(2)
    js 一些基础的理解
    js switch判断 三目运算 while 及 属性操作
    数据类型 数据类型转换 运算符
    数组的一些常用方法分析 介绍
    js常用的字符串方法分析
    js 的作用域 域解析 分析
    js 函数 作用域 全局作用域 局部作用域 闭包
  • 原文地址:https://www.cnblogs.com/zwq-/p/10187210.html
Copyright © 2011-2022 走看看