DOM基础教程之事件类型
对于用户事件类型而言，最常用的是鼠标、键盘、浏览器。
1.鼠标事件：
鼠标的事件都频繁使用，下面例子就测试各种鼠标事件
<script language="javascript">
function handle(oEvent) {
var disp = document.getElementById("display");
if (window.event) oEvent = window.event; //处理兼容性，获得对象
disp.innerHTML += "鼠标事件名称：" + oEvent.type + "<br>";
}
window.onload = function() {
var oP = document.getElementById("box");
oP.onmousedown = handle;
oP.onmouseover = handle;
oP.onmouseup = handle;
oP.onmouseout = handle;
oP.onclick = handle;
oP.ondblclick = handle;
}
</script>
<div>
<div id="box" style="width:100px;height:100px;background:#ddd;">
box内容
</div>
<p id="display"></p>
</div>
鼠标的键值button测试（附对照表）
<script language="javascript">
function TestClick(oEvent) {
var oDiv = document.getElementById("display");
if (window.event)
oEvent = window.event;
oDiv.innerHTML += oEvent.button; //输出button的值
}
document.onmousedown = TestClick;
window.onload = TestClick; //测试未按下任何键
</script>
<div>
<p id="display"></p>
</div>
2.键盘事件
键盘事件种类不多，仅三种事件。
keydown（按下某键，一直按住会持续触发）
keypress（按下某键并产生字符时触发，即忽略Shift、Alt，ctrl等功能键）
keyup（释放某个键时触发）
键盘监听示例：
<script language="javascript">
function handle(oEvent) {
if (window.event) oEvent = window.event; //处理兼容性，获得事件对象
var oDiv = document.getElementById("display");
oDiv.innerHTML += oEvent.type + " "; //输出事件名称
}
window.onload = function() {
var oTextArea = document.getElementById("textin");
oTextArea.onkeydown = handle; //监听所有键盘事件
oTextArea.onkeyup = handle;
oTextArea.onkeypress = handle;
}
</script>
<div>
<textarea rows="4" cols="50" id="textin">
</textarea>
<p id="display"></p>
</div>
对于键盘而言，最重要的不是事件的名称，而是所按的是什么键。由于ie没有charCode属性，而keyCode只有在keydown、keyup事件发生的时才与标准dom的keycode相同，
在keypress事件中等同于keycode，因此采用以下方法。
oEvent.charCode = (oEvent.type == "keypress")?oEvent.keycode:();
之所以不采用keyCode是因为它表示键盘按键，而不是输出的字符，因此，输出“a”和“A”，keycode是等值的，charcode则以字符区分。
另外在keypress中，标准dom的keycode值始终为0；
例子：键盘事件的相关属性：
<script language="javascript">
function handle(oEvent) {
var oDiv = document.getElementById("display");
if (window.event) oEvent = window.event; //处理兼容性，获得事件对象
//设置ie charcode的值
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
oDiv.innerHTML += oEvent.type + "：charCode" + oEvent.charCode + "keyCode" + oEvent.keyCode + "<br>"; //输出测试
}
window.onload = function() {
var oTextArea = document.getElementById("textin");
oTextArea.onkeydown = handle; //监听所有键盘事件
oTextArea.onkeypress = handle;
}
</script>
<div>
<textarea rows="4" cols="50" id="textin">
</textarea>
<p id="display"></p>
</div>
3.htm事件
对于浏览器而言，各种html有着自己的事件，有一些也是用户常常接触到的，比如load，error，select等，常用的html事件如下：
load事件是常用的事件之一，因为在页面载入完成之前，dom的框架还没有搭建完成，因此任何相关操作都不能发生。
给window对象分配load，unload事件等同于<body>标记的onload和onunload方法。
相关推荐
-
java开发gui教程之jframe监听窗体大小变化事件和jframe创建窗体
复制代码 代码如下: import java.awt.event.WindowEvent;import java.awt.event.WindowStateListener; import javax.swing.JFrame; public class WinFrame extends JFrame { public WinFrame(){ this.setName("Window 窗口状态"); this.setSize(300,300); this.setDefaultCl
-
JQuery Easyui Tree的oncheck事件实现代码
用firebug查看其生成html,发现其checkobx是假的,只是一个span,来回的变样式而已,汗 复制代码 代码如下: $(".tree-checkbox", tree).unbind(".tree").bind("click.tree", function() { if ($(this).hasClass("tree-checkbox0")) { $(this).removeClass("tree-chec
-
JavaScript事件类型中UI事件详解
"DOM3级事件"规定了一下几类事件 UI事件,当用户与页面上的元素交互时除法: 焦点事件,元素获得或失去焦点: 鼠标事件,通过鼠标在页面上执行操作: 滚轮事件,使用鼠标滚轮或类似设备: 文本事件,当用户在文档中输入文本: 键盘事件,通过键盘在页面上执行操作: 合成事件,当为IME(Input Method Editor,输入法编辑器)输入字符时除法: 变动事件(mutation),底层DOM结构发生变化: 变动名称事件,当元素或属性名变动时,此类事件已被废弃. 下文着重说明UI事件的
-
DOM基础教程之事件类型
对于用户事件类型而言,最常用的是鼠标.键盘.浏览器. 1.鼠标事件: 鼠标的事件都频繁使用,下面例子就测试各种鼠标事件 复制代码 代码如下: <script language="javascript"> function handle(oEvent) { var disp = document.getElementById("display"); if (window
-
DOM基础教程之事件对象
浏览器中的事件都是以对象的形式存在的,同样ie浏览器与标准dom浏览器之间存在获取事件对象上也存在差别.在ie浏览器中事件对象是windows对象的一个属性event,访问通常采用如下方法. 复制代码 代码如下: oP.onclick = function(){ var oEvent = window.event; } 尽管它是window对象属性,但event对象还是只能在事件发生时被访问,所有的事件处理函数执行完之后,该对象就消失了. 而标准的dom规定event对象必须作为唯一的参数传给事
-
DOM基础教程之使用DOM控制表单
1.表单简介 表单<form>是网页中交互最多的形式之一,它通过各种形式接收用户的数据,包括下拉列表框,单选按钮,复选框和文本框,本篇主要介绍表单中常用的属性和方法 javascript中可以很方便的操作表单,例如获得表单数据进行有效验证,自动给表单域赋值,处理表单事件等. 此时每个form都解析为一个对象,即form对象,可以通过document.forms集合来引用这些对象,例如一个nama属性为form1的表单可以使用 复制代码 代码如下: document.forms["fo
-
DOM基础教程之使用DOM
在了解DOM(文本对象模型)的框架和节点后,最重要的是使用这些节点处理html网页 对于一个DOM节点node,都有一系列的属性和方法可以使用.常用的有下表. 完善:http://www.w3school.com.cn/xmldom/dom_element.asp 1.访问节点 BOM提供了一些边界的方法访问节点,常用的就是getElementsByTagName(),和getElementById() 复制代码 代码如下: <script type="text/javascript&qu
-
Java基础教程之基本类型数据类型、包装类及自动拆装箱
前言 我们知道基本数据类型包括byte, short, int, long, float, double, char, boolean,对应的包装类分别是Byte, Short, Integer, Long, Float, Double, Character, Boolean.关于基本数据类型的介绍可参考Java基础(一) 八大基本数据类型 那么为什么需要包装类? JAVA是面向对象的语言,很多类和方法中的参数都需使用对象,但基本数据类型却不是面向对象的,这就造成了很多不便. 如:List<in
-
DOM基础教程之使用DOM控制表格
表格的css控制就先不说了,首先分享下表格常用的DOM 表格添加操作的方法常用的为insertRow()和insertCell()方法. row是从零开始计算起的,例如: 复制代码 代码如下: var oTr = document.getElementById("member").insertRow(2) 是指将新行添加到第二行. 复制代码 代码如下: var aText = new Array(); aText[0] = document.createTextNode("f
-
DOM基础教程之模型中的模型节点
<html>位于网页的顶端 它没有父辈,称之为根节点 1.元素节点(element node) 可以说,整个DOM模型都是由元素节点(element node)组成 比如文本段落元素"<p>",无序清单的名称"<ul>",元素节点包含其他元素. 2.文本节点(text node) 例如<h2>中的文本"标题1",<li>中的文字内容,这些具体文本在DOM称为(text node) 3.属
-
DOM基础教程之使用DOM设置文本框
1.控制用户输入的字符个数 对于单行文本框和密码输入框,可以利用maxlength属性控制用户输入的字符个数. 对于多行文本,maxlength为自定义属性,其值最多输入的字符的个数,在onkeypress事件发生时则调运返回LessThan()函数返回值,函数如下 <textarea name="comments" id="comments" cols="40" rows="4" maxlength="50&
-
DOM基础教程之使用DOM + Css
1.使用getElementsByTagName修改class类别或者追加类别 复制代码 代码如下: <ul class="name1" onclick="clickz()"> <p>第一个</p> <p>第一个</p> <p>第一个</p> <p>第一个</p> </ul> <script type=&quo
-
Jquery ajax基础教程
jQuery的Ajax带来了无需刷新的web页面革命.这里就详细介绍一下jQuery所涉及到的Ajax操作.(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat 7) 1.基于请求加载文件数据 这里的请求通常都是网页的某些操作,如点击等. 而其加载数据的类型归类为以下四种:a.加载HTML文件:b.加载JSON文件:c.加载Javascript文件:d.加载XML文件. 其对应的四种加载方法分别是:load.getJSON.getScript.get. a.加载HTML文件 把编写好的