[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 ...
随机推荐
- jsp中头的导入两种方式区别
1.<jsp:include page="top.jsp">先将top.jsp中的java脚本和jsp指令执行完毕以后再讲top.jsp页面加入面中 2.<%@ ...
- ClickOnce部署（4）：下载多个安装包
有时候,我们可能会一次性发布多个安装包,当然在网页上多加几个链接让用户逐个安装也是可取的.不过,也可以弄得更方便些,即用户先安装一个,作为一个"引导程序",然后通过这个程序去下载安 ...
- 被嫌弃的eval和with
× 目录 [1]eval [2]with 前面的话 eval和with经常被嫌弃,好像它们的存在就是错误.在CSS中,表格被嫌弃,在网页中只是用表格来展示数据,而不是做布局,都可能被斥为不规范,矫枉过 ...
- 记一次ASP.NET MVC性能优化（实际项目中）
前言 在开发中为了紧赶项目进度而未去关注性能的问题,在项目逐渐稳定下来后发现性能令人感到有点忧伤,于是开始去关注这方面,本篇为记录在开发中遇到的问题并解决,不喜勿喷.注意:以下问题都是在移动端上出现, ...
- Windows 搭建 .NET 跨平台环境并运行应用程序
写在前面 阅读目录: Install .NET Version Manager (DNVM) Install .NET Core Execution Environment (DNX) Write t ...
- Oracle内存管理技术
1.Oracle内存管理技术 2.配置自动内存管理(AMM) 3.监视自动内存管理(AMM) 4.配置自动共享内存管理(ASMM) 5.配置自动PGA内存管理 Reference 1.Oracle内存 ...
- 【Java】记录一次代码优化
前不久的项目时间紧张,为了尽快完成原型开发,写了一段效率相当低的代码. 最近几天闲下来,主动把之前的代码优化了一下:) 标签:Java.Mybatis.MySQL 概况:本地系统从另外一个系统得到 ...
- 为.NET搭建Linux的开发环境,鄙视那些将简单事情复杂化的人
写在前面的吐槽 原本跨平台开发很容易的事情, 很多人把它弄得很麻烦,给外人的感觉:你们.NET跨平台开发好不成熟,好麻烦哦. ..................................... ...
- ActiveX（一）第一个简单的Demo
说道ActiveX,我的第一直觉就是Flash,利用ActiveX.我们可以创建丰富的可交互式应用程序.同时.利用ActiveX特性.我们可以实现Js 与 ActiveX 的无缝连接(包括数据共享.和 ...
- urlMappings与URL映射
此配置节的作用就是往Web程序中添加URL的映射,从而达到用户访问映射后的URL(如/Page/AAA)也能访问到源URL(如/Page/PageAAA.aspx)的效果.这也是URL映射本来的作用. ...