访问事件对象和常用的鼠标、键盘、html事件

技术2023-11-25 96

访问事件对象

事件对象封装了事件发生的详细信息，尤其是鼠标、键盘事件。如鼠标事件发生的位置、键盘事件的键盘键等。

IE中的事件对象

在标准DOM浏览器检测到发生了某个事件时，将自动创建一个Event对象，并隐式的将该对象作为事件处理函数的一个参数传入。 // ie 中得到事件对象 op.onclick = function() { var oEvent = window.event; } // 标准DOM中得到事件对象 op.onclick = function(oEvent) { //作为参数传进来 } // 为了兼容不同的浏览器，通常采用下面的方法得到事件对象。 op.onclick = function(oEvent) { if(window.event) {oEvent = window.event;} }

Event 事件对象常用属性：

IE 标准DOM 描述 altKey,shiftKey,ctrlKey 同IE 按下alt、shift、ctrl为true，否则> 为false cancelBubble stopPropagation 可用来阻止事件冒泡 button 同IE 对应按下鼠标键的值 clienX,clientY 同IE 鼠标指针在客户区域的坐标，不包括工> 具栏等。 screenX,screenY 同IE 鼠标指针相对于整个计算机屏幕的坐标> 值 keyCode 同IE 按键的代号 returnValue 同IE 设置false 时取消元素的默认行为 srcElement target 引起事件的元素/对象 type 同IE 事件的名称实例： <div> 我的div <br> <span>我的span</span> <p>我的p元素</p> </div> <script> function handle(oEvent) { if(window.event) { // window.event 存在于IE 浏览器中标准DOM 浏览器不适用 oEvent = window.event; } var oTarget; if(oEvent.srcElement) { // srcElement 存在于IE浏览器中 oTarget = oEvent.srcElement; }else{ oTarget = oEvent.target; // target } alert(oTarget.tagName); } window.onload = function() { var oDiv = document.getElementsByTagName("div")[0]; oDiv.onclick = handle; } </script>

常见的鼠标事件：

onclick 单击鼠标左键触发 ondbclick 双击鼠标左键触发 onmousedown 单击任意鼠标键触发 onmouseout 鼠标指针移出一个元素边界时触发 onmousemove 鼠标在某一个元素上移动时持续触发 onmouseup 松开鼠标任意一个按键时触发 onmouseover 鼠标指针移到一个元素上时触发

实例： <div id="test" style=" width: 200px; height: 200px; cursor: pointer; background-color: lightblue;"> </div> <span id="display"></span> <script> function handle(oEvent) { if(window.event) { // 处理兼容问题，获取事件对象 oEvent = window.event; } var oSpan = document.getElementById("display"); oSpan.innerHTML += oEvent.type + "<br>"; // 输出事件名称 } window.onload = function() { var test = document.getElementById("test"); test.onmousedown = handle; test.onmouseup = handle; test.onmouseover = handle; test.onmouseout = handle; test.onclick = handle; test.ondblclick = handle; } </script>

常用的键盘事件

onkeydown 按下键盘上某个按键时触发，一直按会持续触发 onkeyup 释放某个按键时触发 onkeypress 按下某个按键并产生字符时触发，忽略shift等功能键

实例： <textarea name="" id="test" cols="50" rows="4"></textarea><br> <span id="display"></span> <script> function handle(oEvent) { if(window.event) { // 处理兼容问题，获取事件对象 oEvent = window.event; } var oSpan = document.getElementById("display"); oSpan.innerHTML += oEvent.type + " &nbsp"; // 输出事件名称 } window.onload = function() { var test = document.getElementById("test"); test.onkeydown = handle; test.onkeyup = handle; test.onkeypress = handle; } </script>

HTML 事件

onload 页面完全加载后在window对象上触发 onunload 页面完全卸载后在window对象上触发 onselect 选择了文本框的一个或多个字符时触发 onchange 文本框失去焦点时，并且在它获取焦点后内容发生过改变时触发 onsubmit 单击“提交”按钮时在表单form上触发 onfocus 任何元素或窗口获得焦点时触发 onblur 任何元素或窗口失去焦点时触发 **注意：**载入事件onload 是最常用得事件之一，因为在页面载入完成之前，DOM的框架还没有搭建完毕，因此任何想过操作都不能发生。给window 对象分配onload、onunload事件等同于body 元素的onload、onunload方法

实例： <body onload="alert('hello')" onunload="alert('88')"> <form action="http://www.baidu.com" onsubmit="alert('已提交！')">   <input type="text" value="b" onblur="alert('失去焦点') "><br> <input type="text" value="c" onchange="alert('内容改变啦') " onselect="alert('内容选中了')"><br> <select name="city" id="" onchange="alert('选项改变啦') "> <option value="shanghai">上海</option> <option value="wuhan" selected>武汉</option> </select><br> <button type="submit">提交</button> </form> </body>

Processed: 0.012, SQL: 9

访问事件对象和 常用的鼠标、键盘、html事件