DOM事件

最新推荐文章于 2024-10-06 10:25:19 发布

weixin_30650039

最新推荐文章于 2024-10-06 10:25:19 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zoe233/p/7507463.html

版权

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

属性	此事件发生在何时...
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

鼠标 / 键盘属性

属性	描述
altKey	返回当事件被触发时，"ALT" 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。
metaKey	返回当事件被触发时，"meta" 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。

绑定方式

绑定事件的三种方式：
　　a.直接标签绑定 οnclick='func();'

1 第一种绑定方式
2 <input type='button' οnclick='ClickOn(this)'/>
3 <script>
4     function ClickOn(self){
5     // self 当前点击的标签
6     }
7 </script>

View Code

　　b.先获取DOM对象，然后再进行绑定；

　　　　var obj = document.getElementById('XX').onclick
　　　　var obj = document.getElementById('XX').onfocus

1 <input type='button'/>
2 <script>
3 document.getElementsByTagName('input').οnclick=function(){
4     // this代指当前点击的标签
5     }
6 </script>

View Code

　　两种绑定方式不同，this的传入方式也不同。

　　this，当前触发事件的标签。-->谁调用这个函数，this就指向谁.

　　c.第三种绑定方法：通过addEventListener方法对一个DOM对象绑定多个同样的事件。

　　语法：element.addEventListener(event, function, useCapture)

　　实例1：用第二种绑定方法对一个DOM对象绑定两个onclick事件。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #i1{
 8             background-color:red;
 9             width:300px;
10             height:400px;
11         }
12     </style>
13 </head>
14 <body>
15     <div id="i1">
16         我是DOM 0样式
17     </div>
18     <script>
19         var mydiv=document.getElementById('i1');
20         mydiv.οnclick=function(){
21             console.log('mydiv');
22         }
23         mydiv.οnclick=function(){
24             console.log('append2');
25         }
26     </script>
27 
28 </body>
29 </html>

View Code

　　解析：

　　上面的代码中，第二个function将第一个function进行了覆盖，所以在调用时返回的仅仅是“append2”，未能实现上面要求的对一个DOM对象绑定两个同样的事件。

　　我们通过第三种绑定方式可以进行实现，下面是实现的案例。

　　实例2：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #i1{
 8             background-color:red;
 9             width:300px;
10             height:400px;
11         }
12     </style>
13 </head>
14 <body>
15     <div id="i1">
16         我是DOM 0样式
17     </div>
18     <script>
19         var mydiv=document.getElementById('i1');
20         mydiv.addEventListener('click',function(){console.log(1)},false);
21         mydiv.addEventListener('click',function(){console.log(2)},false);
22     </script>
23 
24 </body>
25 </html>

View Code

　　通过上面的实例，我们成功实现了对一个DOM对象绑定了两个同一个事件。

　　　　Q：element.addEventListener(event, function, useCapture)中useCapture指的是什么？

　　　在W3C中标准模型中，事件分为捕获和冒泡。useCapture中是布尔值（true 或 false），分别代表的是：

- - 　　　　true - 事件句柄在捕获阶段执行
  - false- false- 默认。事件句柄在冒泡阶段执行

　　　　实例1：冒泡阶段。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #main{
 8             background-color:red;
 9             width:980px;
10             height:500px;
11             position:relative;
12             font-size: 38px;
13         }
14         #content{
15             background-color:green;
16             width:400px;
17             height:250px;
18             position:absolute;
19             top:100px;
20             left:300px;
21             font-size:38px;
22         }
23     </style>
24 </head>
25 <body>
26     <div id="main"> main
27         <div id="content">
28         content
29         </div>
30 
31     </div>
32     <script>
33         var main = document.getElementById('main');
34         var content = document.getElementById('content');
35         main.addEventListener('click',function(){console.log(main)},false)
36         content.addEventListener('click',function(){console.log(content)},false)
37 
38     </script>
39 
40 </body>
41 </html>

View Code

　　　　从上面执行返回的结果来看，在冒泡阶段执行的顺序，是先抓取最内部的content，再逐层抓取外层的main。第二步，仅click main的区域，与content内容不交叉，因此仅返回main的内容。

　　　　实例2：捕获阶段。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #main{
 8             background-color:red;
 9             width:980px;
10             height:500px;
11             position:relative;
12             font-size: 38px;
13         }
14         #content{
15             background-color:green;
16             width:400px;
17             height:250px;
18             position:absolute;
19             top:100px;
20             left:300px;
21             font-size:38px;
22         }
23     </style>
24 </head>
25 <body>
26     <div id="main"> main
27         <div id="content">
28         content
29         </div>
30 
31     </div>
32     <script>
33         var main = document.getElementById('main');
34         var content = document.getElementById('content');
35         main.addEventListener('click',function(){console.log(main)},true)
36         content.addEventListener('click',function(){console.log(content)},true)
37 
38     </script>
39 
40 </body>
41 </html>

View Code

　　　　从上面执行返回的结果来看，在捕获阶段执行的顺序，是先抓取最外部的main，再逐层抓取内层的content。第二步，仅click main的区域，与content内容不交叉，因此仅返回main的内容。

　　　　Q：如何实现行为、样式和结构相分离的页面？

　　　　　　答：用DOM 1的方式去实现页面，并且推荐在工作和项目中使用DOM 1。更易维护更易检查。

　　　　　　　　下面我们通过用DOM 0和 DOM 1 写的不同的实例来比较区分两者的区别：

实例1：DOM 0

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #i1{
 8             background-color:red;
 9             width:300px;
10             height:400px;
11         }
12     </style>
13 </head>
14 <body>
15     <div id="i1" οnclick="t1();">
16         我是DOM 0样式
17     </div>
18     <script>
19         function t1(){
20             var tag = document.getElementById('i1');
21             console.log(tag);
22         }
23     </script>
24 
25 </body>
26 </html>

View Code

实例2：DOM 1

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #i1{
 8             background-color:red;
 9             width:300px;
10             height:400px;
11         }
12     </style>
13 </head>
14 <body>
15     <div id="i1">
16         我是DOM 0样式
17     </div>
18     <script>
19         var mydiv=document.getElementById('i1');
20         mydiv.οnclick=function(){
21             console.log('mydiv');
22         }
23     </script>
24 
25 </body>
26 </html>

View Code

实例3：鼠标移到表格上整行变色，移除则恢复；DOM 0实现方式。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         table{
 8             border:1px;
 9             width:300px;
10 
11         }
12     </style>
13 </head>
14 <body>
15     <table>
16         <tr οnmοuseοver="t1(0);" οnmοuseοut="t2(0);"><td>1</td><td>2</td><td>3</td></tr>
17         <tr οnmοuseοver="t1(1);" οnmοuseοut="t2(1);"><td>1</td><td>2</td><td>3</td></tr>
18         <tr οnmοuseοver="t1(2);" οnmοuseοut="t2(2);"><td>1</td><td>2</td><td>3</td></tr>
19     </table>
20     <script>
21         function t1(n){
22             var myTrs = document.getElementsByTagName('tr')[n];
23             myTrs.style.backgroundColor='red';
24         }
25         function t2(n){
26             var myTrs = document.getElementsByTagName('tr')[n];
27             myTrs.style.backgroundColor='';
28         }
29     </script>
30 
31 </body>
32 </html>

View Code

实例4：鼠标移到表格上整行变色，移除则恢复；DOM 1实现方式。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         table{
 8             border:1px;
 9             width:300px;
10 
11         }
12     </style>
13 </head>
14 <body>
15     <table>
16         <tr><td>1</td><td>2</td><td>3</td></tr>
17         <tr><td>1</td><td>2</td><td>3</td></tr>
18         <tr><td>1</td><td>2</td><td>3</td></tr>
19     </table>
20     <script>
21         var myTrs=document.getElementsByTagName('tr');
22         for(var i=0;i<myTrs.length;i++){
23             myTrs[i].οnmοuseοver=function(){
24                 this.style.backgroundColor='red';
25             }
26             myTrs[i].οnmοuseοut=function(){
27                 this.style.backgroundColor='';
28             }
29         }
30     </script>
31 
32 </body>
33 </html>