[JS]笔记14之事件委托
-->什么是事件委托
-->事件委托原理
-->事件委托优点
-->事件源 / 目标源
一、什么是事件委托
通俗的讲，onclick，onmouseover，onmouseout等这些就是事件
委托，就是这个事件本来应该加在某些元素上的，而你却加到其他元素上来完成这个事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托1</title>
<style> </style>
</head>
<body>
<div id="parent">
<h3>我是h3标签</h3>
<p>我是p标签</p>
</div>
<script>
var parent=document.getElementById('parent');
var h3=parent.getElementsByTagName('h3')[0];
document.onclick=function(ev){//点击事件委托给document
var e=ev||window.event;
console.log(e);
if (e.target.nodeName=='H3') {//设置为h3的点击事件
alert('h3');
}
}
</script>
</body>
</html>
二、事件委托原理
利用事件传播（冒泡）机制，就可以实现事件委托 。
具体来说，事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）来完成。
三、事件委托优点
1、提高性能、效率高
2、新添加的元素也会有之前的事件(给未来元素添加事件)
3、代码量少
可以给未来元素添加事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托优2-target</title>
<style>
*{margin:0;padding:0;list-style: none;}
#list{overflow: hidden;}
#box li{width:100px;height:100px;line-height:100px;font-size:20px;color:#fff;text-align:center;float: left;margin:10px;background: #ccc;}
</style>
</head>
<body>
<div id="box">
<button id="btn">创建</button>
<ul id="list1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<ul id="list2">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</div>
<script>
var btn=document.getElementById('btn');
var box=document.getElementById('box');
var list1=document.getElementById('list1');
var lis=box.children;
btn.onclick=function(){
var oli=document.createElement('li');
oli.innerHTML='新建li';
list1.appendChild(oli);
}
box.onclick=function(ev){
var e=ev||window.event;
var target=e.target||e.srcElement;//获取事件源兼容写法
if (e.target.nodeName=='LI'&&e.target.parentNode.id=='list1') {
e.target.style.background='green';//此事件可以添加给未来新创建元素
}
if (e.target.nodeName=='LI'&&e.target.parentNode.id=='list2') {
e.target.style.background='red';
}
}
</script>
</body>
</html>
<!-- 事件委托、获取事件源兼容写法、e.target.nodeName=='LI' -->
<!-- 事件委托给父级可以解决未来元素问题 -->
四、获取当前事件源
在火狐中获得触发事件的元素（事件源）可以用：event.target
在IE中获得触发事件的元素（事件源）可以用：event.srcElement
var Target = event.target||event.srcElement;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托2</title>
<style>
*{margin:0;padding:0;list-style: none;}
div{
background: pink;
}
h3,p,span,h4,h5,var,strong,em{
display: inline-block;
width:230px;
height:40px;
line-height: 40px;
text-align: center;
font-size: 30px;
background: #ccc;
margin:10px;
}
</style>
</head>
<body>
<div id="parent">
<h3>我是h3标签</h3>
<p>我是p标签</p>
<span>我是span标签</span>
<em>我是em标签</em>
<h4>我是h4标签</h4>
<strong>我是strong标签</strong>
<var>我是var标签</var>
<h5>我是h5标签</h5>
<span>我是span标签</span>
<p>我是p标签</p>
</div>
<script>
var parent=document.getElementById('parent');
var tags=parent.children;
parent.onmouseover=function(ev){
var e=ev||window.event;
console.log(e);
var target=e.target||e.srcElement;//事件源
if (target.id!='parent') {
target.style.background='green';
}
}
parent.onmouseout=function(ev){
var e=ev||window.event;
var target=e.target||e.srcElement;//事件源
if (target.id!='parent') {
target.style.background='#ccc';
}
}
</script>
</body>
</html>
五、获取目标源
1、在mouseover事件中，它指向鼠标来自哪个元素
event.relatedTarget火狐获取触发事件的目标源，与target相反，也是事件委托类型
fromElement IE获取触发事件的目标源，与srcElement相反，也是事件委托类型
var from=event.relatedTarget||event.fromElement;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托4-from</title>
<style>
*{margin:0;padding:0;list-style: none;}
#box{
width:200px;
height:200px;
margin:10px auto;
border:1px solid #666;
position: relative;
overflow: hidden;
}
#box img{
width:140px;
height:140px;
position:absolute;
top:10px;
left:30px;
}
#box h3{
width:200px;
height:40px;
line-height: 40px;
position: absolute;
top:160px;
left:0;
text-align: center;
background: #ccc;
}
</style>
</head>
<body>
<div id="box">
<img src="005.jpg" alt="">
<h3>风景名胜</h3>
</div>
<script>
var box=document.getElementById('box');
var img=box.getElementsByTagName('img')[0];
var timer=null,t=0;;
box.onmouseover=function(ev){
var e=ev||window.event;
var from=e.relatedTarget||e.fromElement;//鼠标来自哪里
while (from) {//阻止动画反复执行
if (from==this) {
49 return false;
50 }
51 from=from.parentNode;
52 }
t=-150;
clearInterval(timer);
timer=setInterval(function(){
t+=2;
if(t>=10){
t=10;
}
img.style.top=t+'px';
},10)
}
</script>
</body>
</html>
<!-- 获取目标源 var from=event.relatedTarget||event.fromElement -->
<!-- 在mouseover事件中，它指向鼠标来自哪个元素 -->
2、在mouseout事件中，它指向鼠标去往的那个元素
event.relatedTarget火狐获取触发事件的目标源，与target相反，也是事件委托类型
event.toElement IE获取触发事件的目标源，与srcElement相反，也是事件委托类型
var to=event.relatedTarget||event.toElement;
六、事件监听-不覆盖
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="con">我是h1标签</h1>
<script>
var con=document.getElementById('con');
con.onclick=function (){
alert(1);
}
con.onclick=function (){
alert(2);
}
con.onclick=function (){
alert(3);
}
con.addEventListener('click',function (){
alert(4);
},false);
con.addEventListener('click',function (){
alert(5);
},false);
con.addEventListener('click',function (){
alert(6);
},false);
</script>
</body>
</html>
<!-- 弹出结果：3,4,5,6 -->
[JS]笔记14之事件委托的更多相关文章
- JS与Jquery的事件委托——解决了绑定相同事件的问题
概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完 ...
- JS性能优化 之 事件委托
面试中2次被问到过这个知识点,实际开发中,应用事件委托也比较常见.JS中事件委托的实现主要依赖于 事件冒泡 .那什么是事件冒泡?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一 ...
- JS与Jquery的事件委托
参考:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...
- JS与Jquery的事件委托机制
传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- Js笔记 14
<script> // <!-- 课 对象 // //对象的创建方法 // 1.var obj = {} plainobject 对象字面量 对象直接量 // 2.构造函数 ...
- js笔记14
1.作用域面试题 画图分析 2.DOM document object model 节点树状图 document>documentElement>body>tagname 3.我们常 ...
- 事件处理& 事件委托& 区别mouseover与mouseenter
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
随机推荐
- 在UWP中页面滑动导航栏置顶
最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...
- Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
- nodejs+easyui(抽奖活动后台)增删改查
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfAAAAJACAIAAAD97KNZAAAgAElEQVR4nO2daXxb5Z2o7w+dO1/ufL ...
- c语言表白程序代码
双十一要到了,好激动啊!!! 是时候准备出手了! 花了一天的时间写的表白代码. 表示自己弱弱的..... 看了网上好多都是js写的,感觉碉堡了!js用的不熟,前端不好,java,Python写起来 ...
- 应用程序框架实战十一:创建VS解决方案与程序集
上一篇,介绍了开发环境需要的工具和版本,本篇将动手创建VS解决方案. 对于本系列文章提供的示例,我想通过两种途径来演示,一种是单元测试,另外为了能更直观的看到效果,还会提供一个用户界面来展示.为了不分 ...
- 排名前 8 的 PHP 调试工具
Web 开发并不是一项轻松的任务,有超级多服务端脚本语言提供给开发者,但是当前 PHP 因为具有额外的一些强大的功能而越来越流行.PHP 是最强大的服务端脚本语言之一,同时也是 web 开发者和设计者 ...
- C语言 第七章 数组与字符串
一.数组 1.1.数组的概念 用来存储一组相同类型数据的数据结构.有点像班上放手机的手机袋,超市的储物柜. 特点:只能存放一种类型的数据,如全部是int型或者全部是char型,数组里的数据成为元素. ...
- 「UI 测试自动化selenium」汇总
<selenium 基础之java实现> selenium RC 环境配置 菜鸟学自动化测试(一)----selenium IDE 菜鸟学自动化测试(二)----selenium IDE ...
- 【集合框架】JDK1.8源码分析之TreeMap（五）
一.前言 当我们需要把插入的元素进行排序的时候,就是时候考虑TreeMap了,从名字上来看,TreeMap肯定是和树是脱不了干系的,它是一个排序了的Map,下面我们来着重分析其源码,理解其底层如何实现 ...
- Command and Query Responsibility Segregation (CQRS) Pattern 命令和查询职责分离（CQRS）模式
Segregate operations that read data from operations that update data by using separate interfaces. T ...