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" οnclick="changeBig()" width="100"> --> 94 95 <!-- 事件对象 --> 96 <!-- <img src="images/003.png" width="200" οnclick="get_xy(event)"> --> 97 <img src="images/003.png" width="200" id="img01"> 98 99 </body> 100 </html>
