[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 ...
随机推荐
- javascript中15种原生对象类型系统综述
前面的话 在编程语言中,能够表示并操作的值的类型称做数据类型,编程语言最基本的特性就是能够支持多种数据类型.javascript拥有强大的类型系统,主要包括原生对象.宿主对象和浏览器拓展对象,本文主要 ...
- Easyui 让DataGrid适应浏览器宽度
DataGrid有100%宽度的设置,但是有时不是很让人满意,比如你你放大或者拉放你的浏览器,那么DataGrid只维持第一次加载的宽高,非常难看 $('#List').datagrid({ url: ...
- ASP.NET Core的配置（4）：多样性的配置来源[上篇]
较之传统通过App.config和Web.config这两个XML文件承载的配置系统,ASP.NET Core采用的这个全新的配置模型的最大一个优势就是针对多种不同配置源的支持.我们可以将内存变量.命 ...
- MongoDB学习系列(3)--解决MongoDB Unexpected Shutdown问题
晚上准备继续学习PHP+MongoDB,点击Run_MongoDB_Service.bat文件,这个文件是我写的bat文件,就是快速启动MongoDB.但是命令行一闪而过,我很奇怪.昨天晚上写代码还是 ...
- 你所不知道的15个Axure使用技巧
你有用原型开发工具吗?如果有,那你用的是Axure还是别的? 从以前就喜欢使用Axure,主要是觉得它能清楚的表达设计的思路,还有交互的真实再现,能让看的人一目了然,昨天看了这篇博文,便更加确定Axu ...
- Oracle并行添加主键的方法
环境:Oracle 11.2.0.3 需求:生产一张表由于前期设计不当,没有主键.现需要添加主键,数据量很大,想并行建立. 1.直接添加,提示ora-3001:未实施的功能;只能单线程建立主键 S ...
- 解析ActionResult子类JsonResult
前言 MVC我是11开始使用的,当时还是在上地软件园一小型互联网公司,当时是MVC2.0+Linq to sql.后来接着学习MVC3,MVC3的出现确实让我有种眼前一亮的感觉,期间我不断的写各种de ...
- Android AlertDialog去除黑边白边自定义布局(转)
LayoutInflater inflater = this.getLayoutInflater(); View view = inflater.inflate(R.layout.test_alert ...
- Kafka到Hdfs的数据Pipeline整理
作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 找时间总结整理了下数据从Kafka到Hdfs的一些pipeline,如下 1> Kafka ...
- WebApp上滑加载数据...
$(window).bind("scroll", function () { if ($(document).scrollTop() + $(window).height() &g ...