表白视频制作网站,公众号助手,挺好的网页链接,莱阳建设局网站一、事件 事件是文档或者浏览器窗口中发生的#xff0c;特定的交互瞬间。 事件是用户或浏览器自身执行的某种动作#xff0c;如click,load和mouseover都是事件的名字。 事件是javaScript和DOM之间交互的桥梁。 你若触发#xff0c;我便执行——事件发生#xff0c;调用它的…一、事件 事件是文档或者浏览器窗口中发生的特定的交互瞬间。 事件是用户或浏览器自身执行的某种动作如click,load和mouseover都是事件的名字。 事件是javaScript和DOM之间交互的桥梁。 你若触发我便执行——事件发生调用它的处理函数执行相应的JavaScript代码给出响应。 典型的例子有页面加载完毕触发load事件用户单击元素触发click事件。 二、事件流 事件流描述的是从页面中接收事件的顺序。 1、事件流感性认识 问题单击页面元素什么样的元素能感应到这样一个事件 答案单击元素的同时也单击了元素的容器元素甚至整个页面。 例子有三个同心圆 给每个圆添加对应的事件处理函数弹出对应的文字。单击最里面的圆同时也单击了外面的圆所以外面圆的click事件也会被触发。 !DOCTYPE html
html
head langenmeta charsetUTF-8title/title
/head
style#outer{position: absolute;width: 400px;height: 400px;top:0;left: 0;bottom:0;right: 0;margin: auto;background-color: deeppink;}#middle{position: absolute;width: 300px;height:300px;top:50%;left: 50%;margin-left: -150px;margin-top: -150px;background-color: deepskyblue;}#inner{position: absolute;width: 100px;height:100px;top:50%;left:50%;margin-left: -50px;margin-top: -50px;;background-color: darkgreen;text-align: center;line-height: 100px;color:white;}#outer,#middle,#inner{
border-radius:100%;}
/style
body
div idouterdiv idmiddlediv idinnerclick me!/div/div
/div
scriptvar innerCircle document.getElementById(inner);innerCircle.onclick function () {alert(innerCircle);};var middleCircle document.getElementById(middle);middleCircle.onclickfunction(){alert(middleCircle);}var outerCircle document.getElementById(outer);outerCircle.onclick function () {alert(outerCircle);}
/script
/body
/html View Code 效果如下 2、事件流 事件发生时会在元素节点与根节点之间按照特定的顺序传播路径所经过的所有节点都会收到该事件这个传播过程即DOM事件流。 1、两种事件流模型 事件传播的顺序对应浏览器的两种事件流模型捕获型事件流和冒泡型事件流。 冒泡型事件流事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】 捕获型事件流事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。 事件捕获的思想就是不太具体的节点应该更早接收到事件而最具体的节点最后接收到事件。 !DOCTYPE html
html
head langenmeta charsetUTF-8title/title
/head
body
div idmyDivClick me!/div
/body
/html 上面这段html代码中单击了页面中的div元素 在冒泡型事件流中click事件传播顺序为div—》body—》html—》document 在捕获型事件流中click事件传播顺序为document—》html—》body—》div note: 1、所有现代浏览器都支持事件冒泡但在具体实现中略有差别 IE5.5及更早版本中事件冒泡会跳过html元素(从body直接跳到document)。 IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。 2、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播但这些浏览器都是从window对象开始捕获事件的。 3、由于老版本浏览器不支持很少有人使用事件捕获。建议使用事件冒泡。 2、DOM事件流 DOM标准采用捕获冒泡。两种事件流都会触发DOM的所有对象从document对象开始也在document对象结束。 DOM标准规定事件流包括三个阶段事件捕获阶段、处于目标阶段和事件冒泡阶段。 事件捕获阶段实际目标div在捕获阶段不会接收事件。也就是在捕获阶段事件从document到html再到body就停止了。上图中为1~3.处于目标阶段事件在div上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。冒泡阶段事件又传播回文档。note: 1、尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果就是有两次机会在目标对象上面操作事件。 2、并非所有的事件都会经过冒泡阶段 。所有的事件都要经过捕获阶段和处于目标阶段但是有些事件会跳过冒泡阶段如获得输入焦点的focus事件和失去输入焦点的blur事件。 两次机会在目标对象上面操作事件例子 !DOCTYPE html
html
head langenmeta charsetUTF-8title/title
/head
style#outer{position: absolute;width: 400px;height: 400px;top:0;left: 0;bottom:0;right: 0;margin: auto;background-color: deeppink;}#middle{position: absolute;width: 300px;height:300px;top:50%;left: 50%;margin-left: -150px;margin-top: -150px;background-color: deepskyblue;}#inner{position: absolute;width: 100px;height:100px;top:50%;left:50%;margin-left: -50px;margin-top: -50px;;background-color: darkgreen;text-align: center;line-height: 100px;color:white;}#outer,#middle,#inner{border-radius:100%;}
/style
body
div idouterdiv idmiddlediv idinnerclick me!/div/div
/div
scriptvar innerCircle document.getElementById(inner);innerCircle.addEventListener(click, function () {alert(innerCircle的click事件在捕获阶段被触发);},true);innerCircle.addEventListener(click, function () {alert(innerCircle的click事件在冒泡阶段被触发);},false);var middleCircle document.getElementById(middle);middleCircle.addEventListener(click, function () {alert(middleCircle的click事件在捕获阶段被触发);},true);middleCircle.addEventListener(click, function () {alert(middleCircle的click事件在冒泡阶段被触发);},false);var outerCircle document.getElementById(outer);outerCircle.addEventListener(click, function () {alert(outerCircle的click事件在捕获阶段被触发);},true);outerCircle.addEventListener(click, function () {alert(outerCircle的click事件在冒泡阶段被触发);},false);
/script
/body
/html View Code 运行效果就是会陆续弹出6个框为说明原理我整合成了一个图 3、事件流的典型应用事件代理 传统的事件处理中需要为每个元素添加事件处理器。js事件代理则是一种简单有效的技巧通过它可以把事件处理器添加到一个父级元素上从而避免把事件处理器添加到多个子级元素上。 1、事件代理 事件代理的原理用到的就是事件冒泡和目标元素把事件处理器添加到父元素等待子元素事件冒泡并且父元素能够通过targetIE为srcElement判断是哪个子元素从而做相应处理。关于target更多内容请参考javaScript事件四event的公共成员属性和方法 下面举例来说明。 传统事件处理为每个元素添加事件处理器代码如下 body
ul idcolor-list
lired/li
liorange/li
liyellow/li
ligreen/li
liblue/li
liindigo/li
lipurple/li
/ul
script
(function(){var colorListdocument.getElementById(color-list);var colorscolorList.getElementsByTagName(li);for(var i0;icolors.length;i){colors[i].addEventListener(click,showColor,false);};function showColor(e){ee||window.event;var targetElemente.target||e.srcElement;alert(targetElement.innerHTML);}
})();
/script
/body View Code 事件代理的处理方式代码如下 body
ul idcolor-list
lired/li
liorange/li
liyellow/li
ligreen/li
liblue/li
liindigo/li
lipurple/li
/ul
script
(function(){var colorListdocument.getElementById(color-list);colorList.addEventListener(click,showColor,false);function showColor(e){ee||window.event;var targetElemente.target||e.srcElement;if(targetElement.nodeName.toLowerCase()li){alert(targetElement.innerHTML);}}
})();
/script
/body 2、事件代理的好处 总结一下事件代理的好处 将多个事件处理器减少到一个因为事件处理器要驻留内存这样就提高了性能。想象如果有一个100行的表格对比传统的为每个单元格绑定事件处理器的方式和事件代理即table上添加一个事件处理器不难得出结论事件代理确实避免了一些潜在的风险提高了性能。DOM更新无需重新绑定事件处理器因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素a,span,div等直接修改事件代理的事件处理函数即可不需要重新绑定处理器不需要再次循环遍历。3、事件代理的问题【update20170502】 代码如下事件代理同时绑定了li和span当点击span的时候li和span都会冒泡。 lispanli中的span的内容/span/liscript$(document).on(click, li, function(e){alert(li li);});$(document).on(click, span, function(e){alert(li span);})
/script 解决办法 方法一span的事件处理程序中阻止冒泡 $(document).on(click, span, function(e){alert(li span);e.stopPropagation();}) 方法二li的事件处理程序中检测target元素 $(document).on(click, li, function (e) {if (e.target.nodeName SPAN) {e.stopPropagation();return;}alert(li li);}); 4、事件代理的一个有趣应用【update20170502】 点击一个列表时输出对应的索引 scriptvar uldocument.querySelector(ul);var lisul.querySelectorAll(ul li);ul.addEventListener(click, function (e) {var target e.target;if(target.nodeName.toUpperCase()LI){alert([].indexOf.call(lis,target));}},false)
/script 扩展阅读 三、事件处理程序 四、IE事件处理程序 这两部分内容见javaScript事件二事件处理程序 五、事件对象 这部分内容见javaScript事件三事件对象 六、事件对象的公共成员 这部分内容见javaScript事件四event的公共成员属性和方法 七、鼠标事件 这部分内容见javaScript事件五事件类型之鼠标事件 本文作者starof,因知识本身在变化作者也在不断学习成长文章内容也不定时更新为避免误导读者方便追根溯源请诸位转载注明出处http://www.cnblogs.com/starof/p/4066381.html有问题欢迎与我讨论共同进步。 转载于:https://www.cnblogs.com/starof/p/4066381.html
