js事件委托 jQuery写法
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写法的更多相关文章
- JS事件委托学习(转)
JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件 <</</</</li></ ...
- JS事件委托的原理和应用
js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...
- 原生js事件委托(事件代理)方法扩展
原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...
- js事件委托篇(附js一般写法和js、jq事件委托写法)
参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...
- js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
- js事件委托
什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...
- 原生js事件和jquery事件的执行顺序问题
场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...
- js事件委托的方式绑定详解
js事件绑定 事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能. ...
- 彻底弄懂JS事件委托的概念和作用
一.写在前头 接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...
随机推荐
- geoserver 开发1
打开项目,会看见下面这些包(其实还有很多插件之类的包,我都删除了) 5)可以从Eclipse启动GeoServer了. 如果你已经安装了GeoServer,现在也可以打开它的登陆页面进行操作. 三 结 ...
- [SoapUI] 配置默认环境的properties
<Envs> <Env id="Live,Default environment"> <Project> <CusProperty nam ...
- centos6.5 redis 安装配置及java调用
1.安装gcc 执行命令 yum install gcc 2. 安装ruby环境 yum install ruby yum install rubygems gem install redis 下载 ...
- C语言点滴
static修饰的变量和函数不可以在其他文件extern引用该变量或者函数. static变量放在静态内存区. static变量赋值只生效一次,再无法调用赋值语句.但是可以运算,例如++等. exte ...
- word-break:break-all; 和 word-wrap:break-word 换行
word-break:break-all; 和 word-wrap:break-word;两种写法都是让英文句子在父级宽度不够的情况下换行. 两个属性都同样是让文字换行,但存在着细微的区别,大部分时候 ...
- 2018.08.20 loj#117. 有源汇有上下界最小流(模板)
传送门 这题真有意思... 先是有一个点T的我怀疑人生. 然后学大佬们封装了我的dinic就莫名其妙的过了??? 所以说锅给谁好呢? 给dinic吧... 解法就是先求出一段可行流,然后从t到s加一条 ...
- hdu-1087(动态规划)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1087 思路:每确定一个数,后面一个数肯定比它大.所以可以先从最后一个数开始,不断向前确定前面的状态,推 ...
- hdu-1176(动态规划)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1176 思路:类似数塔问题, 从最后一秒开始考虑,每次这一秒的状态确定意味着前一秒的状态也已经确定,所以 ...
- flask_login
一.配置 对于登录系统,我们将会使用到两个扩展,Flask-Login 和 Flask-OpenID.在microblog.py中配置: Flask-OpenID 扩展需要一个存储文件的临时文件夹的路 ...
- 20155302 2016-2017-2 《Java程序设计》第六周学习总结
20155302 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 Java中的流分为两种,一种是字节流,另一种是字符流,分别由四个抽象类来表示(每种流包括输入 ...