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 相关文章推荐
脚本合并提升javascript性能示例
Feb 24 Javascript
Javascript基础教程之变量
Jan 18 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
JS实现瀑布流效果
Mar 07 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
python 代码运行时间获取方式详解
2020/09/18 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
艺术用品:Arteza
2018/11/25 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
linux面试题参考答案(9)
2016/01/29 面试题
简单的辞职信范文
2014/01/18 职场文书
学习十八大宣传标语
2014/10/09 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis