JavaScript 学习笔记(十六) js事件


Posted in Javascript onFebruary 01, 2010

回顾
事件对象里包含三个方面的信息····回看上一篇内容!

事件对象里的属性和方法,主要是鼠标和键盘的信息。

1. 获取事件类型

事件对象属性type

2. 获取按键代码

事件对象属性keyCode:回车为13,空格为32,后退键为8

3. 检测Shift、Alt、Ctrl键

事件对象属性是否被按下:shiftKey、altKey、ctrlKey

4. 获取客户端坐标

事件对象属性clientX和clientY

5. 获取屏幕坐标

事件对象属性screenX和screenY

事件的类型
根据触发事件的事物和事件发生的对象,可将浏览器中发生的事件分为几个类型:

一、 鼠标事件

每个鼠标事件都会给以下event对象的属性填入值:

1.坐标属性(如clientX 和 client 等)

2.Type属性

3.Targer(DOM)或serElement(IE)属性(目标对象属性)

4.shiftKey、ctrlKey、altKey和metaKey(DOM)属性

5.button属性(只在mouse事件中)

(oEvent.target || oEvent.srcElement).id逻辑符或操作符作用于两个对象时,第一个对象非空,返回第一个对象,否则返回第二个对象,这里表示的是引起事件的元素的ID。

二、 键盘事件

Keydown --- 在键盘上按下某按键时发生。一直按着某键,它则会不断触发。

Keypress --- 按下一个按键,并产生一个字符时产生(也就是不管类似Shit ctrl alt之类的键。)一直按键时,它会持续发生。

Keyup --- 释放按着的按键时发生

1. 事件的属性

对每个键盘事件,会填入以下的事件属性:

keyCode属性(键位的ASC码值)

charCode属性(仅DOM)

target(DOM)与srcElement(IE)属性

shiftKey、ctrlKey、altKey和metaKey(DOM)属性

2.顺序

当用户按一次某字符按键时,会按以下顺序发生事件:

(1)、keydown;

(2)、keypress;

(3)、keyup;

如果用户按一次某非字符按键(例如shift),会按以下顺序发生事件:

(1)、keydown;

(2)、keyup;

三、 HTML事件

onload、unload、resize、scroll等事件。

四、 突变事件

文档或元素元素的子树的添加删除节点,目前还没有任何主流浏览器实现了它。

Javascript 相关文章推荐
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
js左侧多级菜单动态的解决方案
Feb 01 #Javascript
javascript 三种编解码方式
Feb 01 #Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 #Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 #Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 #Javascript
详细讲解JS节点知识
Jan 31 #Javascript
javascript中的array数组使用技巧
Jan 31 #Javascript
You might like
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
javascript动画浅析
2012/08/30 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Python中pygame安装方法图文详解
2015/11/11 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
英国办公用品商店:Office Outlet
2018/04/04 全球购物
J2EE中常用的名词进行解释
2015/11/09 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
关于保护环境的建议书
2014/05/13 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
团代会开幕词
2015/01/28 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
Java 关于String字符串原理上的问题
2022/04/07 Java/Android