DOM基础教程之事件类型


Posted in Javascript onJanuary 20, 2015

对于用户事件类型而言,最常用的是鼠标、键盘、浏览器。

1.鼠标事件:

DOM基础教程之事件类型

鼠标的事件都频繁使用,下面例子就测试各种鼠标事件

<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测试(附对照表)

DOM基础教程之事件类型

<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事件如下:

DOM基础教程之事件类型

load事件是常用的事件之一,因为在页面载入完成之前,dom的框架还没有搭建完成,因此任何相关操作都不能发生。

给window对象分配load,unload事件等同于<body>标记的onload和onunload方法。

Javascript 相关文章推荐
jQuery 使用手册(三)
Sep 23 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
JS实现的自定义map方法示例
May 17 Javascript
layui原生表单验证的实例
Sep 09 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 #Javascript
DOM基础教程之事件对象
Jan 20 #Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 #Javascript
js实现的捐赠管理完整实例
Jan 20 #Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 #Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 #Javascript
DOM基础教程之使用DOM + Css
Jan 20 #Javascript
You might like
Php部分常见问题总结
2006/10/09 PHP
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
Python 功能和特点(新手必学)
2015/12/30 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
python 异或加密字符串的实例
2018/10/14 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
Python的log日志功能及设置方法
2019/07/11 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
python @classmethod 的使用场合详解
2019/08/23 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
企业法人代表授权委托书
2014/10/02 职场文书
党支部四风整改方案
2014/10/25 职场文书
重阳节慰问信
2015/02/15 职场文书
导游词之介休绵山
2019/12/31 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技