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 相关文章推荐
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
原生js实现放大镜特效
Mar 08 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 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将数据库导出成excel的方法
2010/05/07 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
Document 对象的常用方法
2009/07/31 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
javascript常用方法总结
2015/05/14 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
利用Python实现图书超期提醒
2016/08/02 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
python基于property()函数定义属性
2020/01/22 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
表彰先进的通报
2014/01/31 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
golang中的并发和并行
2021/05/08 Golang