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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 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下获取客户端ip地址的函数
2010/03/15 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
JScript中的"this"关键字使用方式补充材料
2007/03/08 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
python pygame实现2048游戏
2018/11/20 Python
Python小进度条显示代码
2019/03/05 Python
python实现月食效果实例代码
2019/06/18 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
python asyncio 协程库的使用
2021/01/21 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
《尊严》教学反思
2014/02/11 职场文书
煤矿安全生产标语
2014/06/06 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
小学班主任评语
2014/12/29 职场文书
PyTorch中permute的使用方法
2022/04/26 Python