<JavaScript><DOM> 十四. Event DOM的属性 

  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>

 

posted @ 2017-02-07 10:00  云淡风轻我爱编程  阅读(262)  评论(0)    收藏  举报