javaScript事件事件流
Posted 早晨de风景
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScript事件事件流相关的知识，希望对你有一定的参考价值。
事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。
事件是javascript和DOM之间的桥梁。
你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。
典型的例子有：页面加载完毕触发load事件；用户单击元素，触发click事件。
二、事件流
1、事件流感性认识
问题：单击页面元素，什么样的元素能感应到这样一个事件？
答案：单击元素的同时，也单击了元素的容器元素，甚至整个页面。
例子：有三个同心圆， 给每个圆添加对应的事件处理函数，弹出对应的文字。单击最里面的圆，同时也单击了外面的圆，所以外面圆的click事件也会被触发。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></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 id="outer"> <div id="middle"> <div id="inner"> click me! </div> </div> </div> <script> var innerCircle= document.getElementById("inner"); innerCircle.onclick= function () { alert("innerCircle"); }; var middleCircle= document.getElementById("middle"); middleCircle.onclick=function(){ alert("middleCircle"); } var outerCircle= document.getElementById("outer"); outerCircle.onclick= function () { alert("outerCircle"); } </script> </body> </html>
以上是关于javaScript事件事件流的主要内容，如果未能解决你的问题，请参考以下文章