JavaScript事件学习小结(一)事件流事件学习小结(一)事件流
相关阅读:相关阅读:
JavaScript事件学习小结(五)js中事件类型之鼠标事件
//www.jb51.net/article/86259.htm
JavaScript事件学习小结(一)事件流
//www.jb51.net/article/86261.htm
javaScript事件学习小结(四)event的公共成员(属性和方法)
//www.jb51.net/article/86262.htm
JavaScript事件学习小结(二)js事件处理程序
//www.jb51.net/article/86264.htm
JavaScript事件学习小结(三)js事件对象
一、事件一、事件
事件是用户或浏览器自身执行的某种动作,如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;