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 相关文章推荐
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
Javascript实现单例模式
Jan 24 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
js实现图片粘贴到网页
Dec 06 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python动态性强类型用法实例
2015/05/09 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
Flask框架web开发之零基础入门
2018/12/10 Python
django2.0扩展用户字段示例
2019/02/13 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
新闻记者个人求职的自我评价
2013/11/28 职场文书
陈欧广告词
2014/03/14 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
师范生求职自荐信
2014/06/14 职场文书
公司授权委托书范本
2014/09/18 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
民间借贷借条如何写
2015/05/26 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
python字典的元素访问实例详解
2021/07/21 Python
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL