本文章是本人在学习js时候的知识总结，涉及到学习过程中的一些知识点，代码练习以及新手常犯的错误与解决方法，希望对js的爱好者有帮助。
event对象
- Event代表事件状态，用来获取事件的详细信息，如事件发生的元素，键盘按键，鼠标位置和鼠标按钮状态。一旦事件发生,便会生成Event对象，如单击一个按钮，浏览器的内存中就产生相应的 event对象。
event对象只在事件发生的过程中才有效。
event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。
- 获取event对象的兼容性写法：var oEvent = ev || event；
- 事件冒泡：一个对象触发了某类事件，该事件程序被执行了之后，这个事件还会向这个对象的父级元素传播，从而会触发父级的事件程序。
一般来说会造成困扰，解决方法：oEvent.cancelBubble = true;
练习代码
1.弹出菜单
*取消事件冒泡*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| <style>
*{
margin: 0;
padding:0;
}
ul{
background-color: #1457dd;
padding:5px 10px;
display:none ;
list-style: none;
width: 150px;
}
div{
position: absolute;
left:45%;
top:10%;
}
</style>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
oBtn.onclick =function (ev){
var oEvent = ev || event;
oUl.style.display = 'block';
oEvent.cancelBubble = 'true'
}
document.onclick = function(){
oUl.style.display = 'none';
}
}
</script>
</head>
<body>
<div>
<button id="btn1">显示</button>
<ul id="ul1">
<li>收藏</li>
<li>刷新</li>
<li>注销</li>
<li>登陆</li>
<li>注册</li>
</ul>
</div>
</body
|
2.跟随鼠标移动的div
*注意：消除滚动条的影响*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <style>
#div1{
width: 100px;
height: 100px;
background-color: #120047;
position: absolute;
}
</style>
<script>
document.onmousemove = function(ev){
var oDiv = document.getElementById('div1');
var oEvent = ev || event;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
oDiv.style.left = oEvent.clientX +scrollLeft+'px';
oDiv.style.top = oEvent.clientY + scrollTop+'px' ;
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
|
3.获取鼠标在页面的绝对位置（一串跟随鼠标的div）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <style>
div{
width: 10px;
height: 10px;
background-color: #124888;
position: absolute;
}
</style>
<script>
window.onload = function(){
var aDiv = document.getElementsByTagName('div');
var i = 0;
document.onmousemove =function (ev){
var oEvent = ev || event;
for(i=aDiv.length-1; i>0; i--){
aDiv[i].style.left = aDiv[i-1].style.left;
aDiv[i].style.top = aDiv[i-1].style.top;
}
aDiv[0].style.left = oEvent.clientX + 'px';
aDiv[0].style.top = oEvent.clientY + 'px';
}
}
</script>
</head>
<body>
Div*50
</body>
|
本文标题: JS之事件详解（一）
文章作者: 劳土铸
许可协议: 
?署名-非商用-相同方式共享 4.0