js事件委托篇(附js一般写法和js、jq事件委托写法)
参考: jQuery代码优化:事件委托篇
使用该技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件。
现实当中,前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。(公司也不会容忍那么多员工站在门口就为了等快递);
这种事件委托还有个好处,就是即便公司又来很多员工,前台MM照样可以签收新员工的快递,新员工即便刚来但一样拥有拿自己快件的方法;
通俗来讲: 事件有:onclick、onmouseover、onmouseout等等;委托呢,就是让别人来做,这件事情本身是加在元素上,然而你却加载别人身上来做,完成事件;
原理:
利用冒泡原理,将事件加在父级上触发,执行效果;
好处:
- 提高性能
- 新添加元素,可以直接拥有事件;
事件源 :
跟this作用一样(他不用看指向问题,谁操作的就是谁),event对象下的
使用情景:
* 为DOM中的很多元素绑定相同事件;
* 为DOM中尚不存在的元素绑定事件;
栗子:
需要触发每个li来改变他们的背景颜色
<ul id="ul">
<li>111111111</li>
<li>22222222222</li>
<li>33333333</li>
<li>44444444444</li>
</ul>
js一般写法:
window.onload = function(){
var oUl = document.getElementById('ul');
var aLi = oUl.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover = function(){
this.style.background = 'red';
}
aLi[i].onmouseout = function(){
this.style.background = ' ';
}
}
}
事件委托的js写法:
window.onload = function(){
var oUl = document.getElementById('ul');
var aLi = oUl.getElementsByTagName('li');
/*这里用到事件源:event对象, 事件源,不管在哪个事件中,只要你操作的那个元素就是事件源
ie: window.event.srcElent
标准下: event.target
nodeName: 找到元素的标签名;
*/
oUl.onmouseover = function(ev) {
var ev = ev||window.event;
var target = ev.target || ev.srcElement;
// console.log(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = 'red';
}
}
oUl.onmouseout = function(ev) {
var ev = ev || window.event;
var target = ev.target|| ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = ' ';
}
}
}
事件委托的jq写法
$(function(){
$("#ul").on('click','li',function(){
if(!$(this).attr('s')){
$(this).css('background','red');
$(this).attr('s',true);
}else{
$(this).css('background','#fff');
$(this).removeAttr('s');
}
})
})
还有一种使用delegate()方法代替on() ; 现多不用 ,用法同on,只是参数顺序有变
...delegate('li','click',function(){...})...
js事件委托篇(附js一般写法和js、jq事件委托写法)的更多相关文章
- JQ写法和js写法 方法函数化
<script> $(function () { $('#head').click=function () { alert($(this).html()) } }) </script ...
- 鼠标放上时显示隐藏的div或者其他代码的“jquery”的三种写法和“JavaScript”的一种写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 手写Koa.js源码
用Node.js写一个web服务器,我前面已经写过两篇文章了: 第一篇是不使用任何框架也能搭建一个web服务器,主要是熟悉Node.js原生API的使用:使用Node.js原生API写一个web服务器 ...
- Backbone.js之model篇(一)
Backbone.js之model篇(一) Backbone 是一个前端 JS 代码 MVC 框架,它不可取代 Jquery,不可取代现有的 template 库.而是和这些结合起来构建复杂的 web ...
- 使用Xcode IDE写node.js
最近在玩node.js 但是发现很多IDE就是用不顺手 后来发现Xcode可以剖析java script 于是试着使用Xcode来当做node.js的编辑器 首先,在Mac上必须先安装node.js的 ...
- ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇
原文:ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇 第三章 为控件添加事件 好了,我们之前以前开发一个控件.而且也添加了属性,开发也很规范,但是那个控件还差最后一点:添加事件. 系列 ...
- ASP.NET自定义控件组件开发 第三章 为控件添加事件 后篇
原文:ASP.NET自定义控件组件开发 第三章 为控件添加事件 后篇 第三章 为控件添加事件 后篇 前一篇文章只是简单的说了下事件,但是大家应该方法,在ASP.NET自定义控件中只是简单那么定义事件是 ...
- JavaScript之事件委托(附原生js和jQuery代码)
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...
- Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)
最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...
随机推荐
- ipad4没有声音提示消息
打开『设置』-『通用』-侧边开关用于: 1:锁定屏幕旋转 2:静音 √ 把对号去掉 选择1即可
- jstree的checkbox实例+详解
jstree的checkbox实例较少,思索后决定进行一下整理,先上代码 $("#filtrate_row").on("loaded.jstree",funct ...
- libxml_disable_entity_loader
w避免加载外部实体字符. http://php.net/manual/en/function.libxml-disable-entity-loader.php libxml_disable_entit ...
- __destruct()析构函数的执行时刻 __construct()构造函数传入参数 构造函数与后台登录安全
<?php class test_construct_avg { function __construct($input = '') { $this->input = $input; } ...
- mysql数据库基本知识,简单框架
https://www.cnblogs.com/geaozhang/p/7347950.html
- react 组件积累
material-ui material-table ant-design https://ant.design/docs/react/getting-started-cn 定义组件(注意,组件的名称 ...
- Buy the souvenirs---hdu2126(01背包输出方案数)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2126 有n个物品每个物品的价格是v[i],现在有m元钱问最多买多少种物品,并求出有多少种选择方法: 如 ...
- python在处理CSV文件时,字符串和列表写入的区别
概述 Python在处理CSV文件时,如果writerow的对象是<type 'unicode'>字符串时,写入到CSV文件时将会出现一个字符占一个单元格的情况: 但是将字符串转换为列表类 ...
- ssm框架集成Quartz定时器
第一步:添加依赖 <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>qu ...
- areas表-省市区
不全,缺少台湾省.香港.澳门:新疆重复了 /* Navicat MySQL Data Transfer Source Server : win7_local Source Server Version ...