浅谈Javascript事件对象


Posted in Javascript onFebruary 05, 2017

如果是事件处理函数绑定的函数,浏览器会默认传递一个参数,而这个参数就是事件对象。

document.onclick = function() {
 alert(arguments.length); //1
}

因为arguments[0]这样使用这个参数比较麻烦,所以我们可以传递一个参数evt来进行使用。

document.onmouseup = function(evt) {
 var e = evt || window.event;
 alert(e.button); //0为鼠标左键,1为滚轮,2为右键
 //基于浏览器可视区左上角的位置
 alert(e.clientX + ',' + e.clientY);
 //机器的分辨率
 alert(window.screen.width + ',' + window.screen.height);
 // 离屏幕左上角的位置
 alert(e.screenX + ',' + e.screenY);
}
//侦测按键
document.onclick = function(evt) {
 alert(getKey(evt));
}
function getKey(evt) {
 var e = evt || window.event;
 var keys = [];
 if (e.shiftKey) {
 keys.push('shift');
 }
 if (e.ctrlKey) {
 keys.push('ctrl');
 }
 if (e.altKey) {
 keys.push('alt');
 }
 return keys;
}
//键盘事件,keydown是按下任意键,keyup是弹起任意键,keypress按下字符键触发
//键码:键盘上任意键,全兼容
//字符编码:可以输出的字符的键,IE不兼容
document.onkeydown=function(evt){
 var e = evt || window.event;
 alert(e.keyCode); //keyCode返回键码
 }
document.onkeypress = function(evt) {
 var e = evt || window.event;
 alert(e.charCode);  //charCode返回字符键码
 }
document.onclick = function(evt) {
 var e = evt || window.event;
 alert(e.target.innerHTML);  //点到哪里target就选中哪个元素
 }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js 创建快捷方式的代码(fso)
Nov 19 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
js中创建对象的几种方式
Feb 05 #Javascript
js实现增加数字显示的环形进度条效果
Feb 05 #Javascript
JS实现复制内容到剪贴板功能
Feb 05 #Javascript
js实现适合新闻类图片的轮播效果
Feb 05 #Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 #Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 #Javascript
thinkjs之页面跳转同步异步操作
Feb 05 #Javascript
You might like
php生成短网址示例
2014/05/05 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
python3中eval函数用法使用简介
2019/08/02 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
用Python 执行cmd命令
2020/12/18 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
司法局火灾防控方案
2014/06/05 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
2015年试用期工作总结
2014/12/12 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
员工担保书范本
2015/09/22 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
如何使用PyCharm及常用配置详解
2021/06/03 Python
python 多态 协议 鸭子类型详解
2021/11/27 Python