http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的，这篇文章写的细

这是js 事件委托写法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件获取目标元素</title>

    <style>

        li{width: 499px;height: 50px;border: 1px solid #000;}

        ul{height: 300px;}

    </style>

</head>

<body>

    <ul id="ul1">

        <li>a</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

</body>

<script>

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

    var ul1 = document.getElementById("ul1");

    ul1.onclick = function(e){

        var events = e || event;

        var target = e.target || e.srcElement;

        console.log(events.target.nodeName)

    }

</script>

</html>

下面是jQuery 写法：(用on)

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>事件获取目标元素</title>

     <style>

         li{width: 499px;height: 50px;border: 1px solid #000;}

         ul{height: 300px;}

     </style>

 </head>

 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

 <body>

     <ul id="ul1">

         <li>a</li>

         <li>2</li>

         <li>3</li>

         <li>4</li>

     </ul>

 </body>

 <script>

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

     // var ul1 = document.getElementById("ul1");

     // ul1.onclick = function(e){

     //     var events = e || event;

     //     var target = e.target || e.srcElement;

     //     console.log(events.target.nodeName)

     // }

     $('#ul1').on('click','li',function(){

         $(this).css('background','red')

     })

 </script>

 </html>

js事件委托 jQuery写法的更多相关文章

  1. JS事件委托学习（转）

    JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件     <</</</</li></ ...

  2. JS事件委托的原理和应用

    js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...

  3. 原生js事件委托（事件代理）方法扩展

    原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...

  4. js事件委托篇(附js一般写法和js、jq事件委托写法)

    参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...

  5. js事件委托和jQuery事件绑定on , off , one , bind , unbind , die

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  6. js事件委托

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

  7. 原生js事件和jquery事件的执行顺序问题

    场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...

  8. js事件委托的方式绑定详解

    js事件绑定 事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能. ...

  9. 彻底弄懂JS事件委托的概念和作用

    一.写在前头    接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...

随机推荐

  1. 中介者模式（QQ聊天室我觉得是个很生动的例子简单易懂）

    设计模式之中介者模式(Mediator) 一.初识中介者模式 那些年,我们一起上过的大学,班级里有班长,有团书记.想一想如果没有QQ这种通讯工具的话,那么班长或者团支书该怎样下达消息呢??同时,班级上 ...

  2. webapp的优化总结

    1. 最先加载本地数据,下拉刷新再取最新数据. 2. 图片延后加载.一种方法先<div data-url="xx.png"></div>,先加载一个div, ...

  3. 编译HBase1.0.0-cdh5.4.2版本

    1. 编译环境准备 Jdk:1.7.0_x Maven : 3.3.9 hbase: cdh5.4.2-release 2. 用idea打开项目 使用git clone得到HBase源码.打开git: ...

  4. KbmMW 服务器架构简介

    kbmmw 由于文档比较少,很多同学开始用时很难理解.一直准备写一个关于kbmmw 架构的东西. 这几天与红鱼儿(blog)研究服务器线程时,整理了一下,大概画了一下kbmmw (版本4.5)服务器的 ...

  5. 2018.09.21 atcoder An Invisible Hand（贪心）

    传送门 简单贪心啊. 这题显然跟t并没有关系,取差量最大的几组买入卖出就行了. 于是我们统计一下有几组差量是最大的就行了. 代码: #include<bits/stdc++.h> #def ...

  6. UVa 12003 Array Transformer (分块)

    题意:给定一个序列,然后有 m 个修改,问你最后的序列是什么,修改是这样的 l r v p 先算出从 l 到 r 这个区间内的 小于 v 的个数k,然后把第 p 个的值改成 k * u / (r - ...

  7. Linux将程序添加到服务的方法（通用）

    一:咱们通过这篇文章来演示怎么将某个程序作为服务(就类似Windows服务可以开机自动启动),这里以tomcat为例,已经亲测过: 二:步骤(最好用root用户来做这种事情,切换root用户记得su ...

  8. generate

    一:generate Verilog-2001添加了generate循环,允许产生module和primitive的多个实例化,同时也可以产生多个variable,net,task,function, ...

  9. MemCache 安全使用原则（自己整理，仅供参考）

    // 触发器:作用是检查缓存时否可用(不用add做触发器),避免缓存不可用时add返回false按非首次登陆处理,导致不能增加成长值. memCachedClient.get(memCacheKey) ...

  10. VUE（现代库） VS jquery（传统库）

      众所周知最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .webpack以及 前端上 ...