1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <script type="text/javascript">
6
7 /*
8 1. --------------- Event DOM 事件DOM 用户交互 ------------------
9 当事件发生时, 执行JS功能代码
10
11 常用事件
12 onload: 当网页加载完成时(只能用于body)
13 onclick: 当点击时
14 onscroll: 当拖动滚动条时
15 onmouserover: 当鼠标放上时
16 onmouseout: 当鼠标移开时
17 onsubmit: 当提交表单时
18 onreset: 当重置表单时
19 onfocus: 当获得焦点时(光标定位到文本框)
20 onblur: 当失去焦点时(光标移开文本框)
21 onchange: 当下拉列表内容改变时
22 onselect: 当选中文本时
23 onresize: 当改变窗口大小时
24
25 每个HTML标记都有相应的事件属性
26 每个HTML标记都对应一个元素对象, 每个元素对象也有相应的事件属性
27 元素对象的事件属性应该是全小写
28 */
29 // 函数: 图片变大2倍
30 function changeBig() {
31
32 // 获取img
33 var imgObj = document.getElementById("img01");
34
35 // 变大2倍
36 imgObj.width = imgObj.width * 2;
37 }
38
39 /*
40 2. --------------------- Event对象 事件对象 ---------------------
41 当事件发生时, 向调用函数传递一个Event参数, 它就是一个事件对象
42 事件对象记录了事件发生时的环境信息, 如: 点击的坐标, 事件类型等
43 事件对象的存在是很短暂的, 新的事件发生, 新的事件对象产生, 原来的事件对象消失
44 */
45
46 window.onload = function () {
47
48 // 获取img元素对象
49 var imgObj = document.getElementById("img01");
50
51 // 添加点击事件
52 // 不能传递参数, 默认传过去
53 imgObj.onclick = get_xy;
54 }
55
56 // 这里必须接收
57 // 在HTML中, 通过事件来传递事件对象参数
58 // 第一个形参必须是事件对象
59 /*
60 3. ------------------------------ Event对象属性 ------------------------
61 type: 当前事件类型
62 clientX, clientY 距离窗口左边和上边的距离
63 pageX, pageY 距离网页左边和上边的距离
64 screenX, screenY 距离屏幕左边和上边的距离
65 */
66 function get_xy(e) {
67
68 // 获取点击时坐标信息
69 var str = "窗口左边距离: " + e.clientX + ", 窗口上边距离: " + e.clientY;
70 str += "\n网页左边距离: " + e.pageX + ", 网页上边距离: " + e.pageY;
71 str += "\n屏幕左边距离: " + e.screenX + ", 屏幕上边距离: " + e.screenY;
72 str += "\n事件类型: " + e.type;
73 alert(str);
74 }
75
76 // 在IE中, Event对象是window对象的一个属性, 可以直接在函数中使用, 不需要传参数
77 function get_xy2() {
78
79 // 获取点击时坐标信息
80 var str = "窗口左边距离: " + event.clientX + ", 窗口上边距离: " + event.clientY;
81 str += "\n网页左边距离: " + event.x + ", 网页上边距离: " + event.y;
82 str += "\n屏幕左边距离: " + event.screenX + ", 屏幕上边距离: " + event.screenY;
83 str += "\n事件类型: " + event.type;
84 alert(str);
85
86 }
87
88 </script>
89 </head>
90 <body>
91
92 <!-- 图片变大 -->
93 <!-- <img id="img01" src="images/003.png" onclick="changeBig()" width="100"> -->
94
95 <!-- 事件对象 -->
96 <!-- <img src="images/003.png" width="200" onclick="get_xy(event)"> -->
97 <img src="images/003.png" width="200" id="img01">
98
99 </body>
100 </html>
