前端随心记---------Javascript系列(第十一节.事件event)

事件对象(event)

事件 : 对某个元素的某种操作
事件对象: 当触发某个事件,产生的对象。就是事件对象,event使用的前提,必须有事件操作 var e=e || event ;

坐标属性:
pageX /pageY 相对于文档顶部和左侧的坐标 ie8为undefined;
clientX /clientY 相对于document窗口的顶部和左侧的坐标,如果出现滚动条,pageY=clienY+页面滚动的距离
offsetX /offsetY 相对于操作的元素内部偏移量
var disx=e.offsetX || e.layerX//layerX:火狐
var disx=e.offsetY || e.layerY//layerY:火狐使用

鼠标事件对象的button属性
button 控制用户按键
左键:0
滚轮:1
右键:2
ie下的按键
左键:1
滚轮:4
右键:2

鼠标的兼容:

document.onmousedown = function(eve){
            var e = eve || event;
            var button = getButton(eve);
            console.log(button);
                }
     function getButton(eve){
            //如何判断是ie8浏览器
            //根据事件对象来判断
            if(eve){
                return eve.button;
            }else{
                //这里是ie8执行
                var button = window.event.button;
                switch(button){
                    case 1:
                      return 0;
                    case 4:
                      return 1;
                    case 2:
                      return 2;
                }
            }
        }

键盘事件对象属性

keyCode
ctrlKey shiftKey altKey 功能按键,当键盘按下时会返回布尔值
默认回车键的keyCode值是13,

例如用法:

  document.onkeydown = function(eve){
            var e = eve || event;
            var code = e.keyCode || e.which || e.charCode;
            var cVal = content.value;
            if(e.altKey && e.ctrlKey && code == 13){
                box.innerHTML += cVal + "<br>";}
                }

在onkeypress事件中,如果功能键ctrl+回车键,回车键的keyCode值为10在onkeypress事件中的ctrlKey和enter的组合键设置,.功能键属性一般不用于onkeypress。onkeypress这个事件下除了空格和回车键以外的其它功能键都不触发。
e.keyCode的兼容:
低版本的火弧中,onkeypress事件中e.keyCode值都为的0
火弧中使用e.which e.charCode
var code = e.keyCode || e.which || e.charCode;

例如用法:

  document.onkeypress = function(eve){
                    var e = eve || event;
                    var code = e.keyCode || e.which || e.charCode;
                    var cVal = content.value;
                    if(e.ctrlKey && code == 10){
                        box.innerHTML += cVal + "<br>";
                        //alert(1)
                    }
                }

原文地址:https://www.cnblogs.com/hudunyu/p/11684182.html

时间: 2024-10-19 05:49:45

前端随心记---------Javascript系列(第十一节.事件event)的相关文章

前端随心记---------Javascript系列(第九节.DOM)

DOM document object model 对象: 属性 .事件 .方法节点: html : 是dom模型的根节点 所有的html标签都叫 元素节点 nodeType=1 所有的标签的属性叫做 属性节点 nodeType=2 所有的标签内容叫做 文本节点 nodeType=3 注:: 8表示的注释节点 9表示的根节点 一切都是节点 tagName 标签名称 nodeName 节点名称 nodeType 节点类型 nodeValue 节点对象的文本内容,是一个字符串. 节点关系 obj.o

前端随心记---------Javascript系列(第八节.BOM)

BOM: browser object model 浏览器对象模型 window 对象的子对象,也是属性 window document:浏览器是代表html的文档对象. history location: url对象 screen navigator window对象的常见属性和方法: 三个弹出框(内置方法,特点: 都会阻塞浏览器代码执行); alert( ); 弹出框 confirm( ); 确认框 prompt( ); 输入框 两个定时器; setInterval( ); setTimeo

前端随心记---------RPA系列(一)

RPA Robotic Process Automation 机器流程自动化 简而言之:就是虚拟劳动力 概念: RPA是智能化软件,可以理解为自动化机器人.只要预先设计好使用规则,RPA就可以模拟人工,进行复制.粘贴.点击.输入等行为,协助人类完成大量“规则较为固定.重复性较高.附加值较低”的事情. RPA产品形态: 当下的市场上存在三种RPA产品形态: 第一种是企业定制化的独立RPA软件,打开电脑点击即可使用: 第二种是应用于财会.金融等行业场景的平台化RPA产品,客户端包括图形化设计器.执行

火云开发课堂 - 《使用Cocos2d-x 开发3D游戏》系列 第二十一节:地表漫游与寻路

<使用Cocos2d-x 开发3D游戏>系列在线课程 第二十一节:地表漫游与寻路 视频地址:http://edu.csdn.net/course/detail/1330/20822?auto_start=1 交流论坛:http://www.firestonegames.com/bbs/forum.php 工程下载地址:请成为正式学员获取工程 课程截图: ?? 版权声明:本文为博主原创文章,未经博主允许不得转载.

火云开发课堂 - 《Shader从入门到精通》系列 第二十一节:在Shader中对3D模型进行区域遮罩

<Shader从入门到精通>系列在线课程 优惠链接:http://edu.csdn.net/combo/detail/90 第二十一节:在Shader中对3D模型进行区域遮罩 视频地址: http://edu.csdn.net/course/detail/1441/22685?auto_start=1 交流论坛:http://www.firestonegames.com/bbs/forum.php 工程下载地址:请成为正式学员获取工程 课程截图: 版权声明:本文为博主原创文章,未经博主允许不得

火云开发课堂 - 《使用Cocos2d-x 开发3D游戏》系列 第十一节:骨骼动画模型播放控制

?? <使用Cocos2d-x 开发3D游戏>系列在线课程 第十一节:骨骼动画模型播放控制 视频地址:http://edu.csdn.net/course/attend/1330/20811 交流论坛:http://www.firestonegames.com/bbs/forum.php 工程下载地址:明天放出 课程截图: 实例工程演示: ?? ?? 版权声明:本文为博主原创文章,未经博主允许不得转载.

javascript系列之DOM(三)---事件

事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定元素,按下某些按键,改变窗口.当然还可能是浏览器上某个页面加载完毕.通过 javascript你可以监听特定事件的发生,为事件绑定处理函数. DOM事件流 在DOM中,当某一个特定的HTNL元素产生事件时,该事件会在该元素节点与根节点之间按特定的顺序传播,所经过的节点都会监听到该事件(但不一定执行该 事件对应的动作,因为未绑定事件处理函数),这个传播过程

前端随心记---------HTML5+CSS系列3.0

表单 u 表单的作用:用来收集用户的信息的; 表单框 : 表单 ?表单的作用:用来收集用户的信息的; 表单框 : <form name="表单名称" method="post/get" action="提交地址"> </form> <input type="text" value="默认值"/> 文本框 <input type="password"

前端随心记---------HTML5+CSS系列2.0

超链接的应用: 语法:    <a href="连接地址" title="提示信息" target=”属性值”> 链接文本/图片</a> 属性(名):target:页面打开方式 默认属性值:_self. I当前窗口 属性值:_blank 新窗口打开  <a href="#">空链接</a>  HTML标记的语法是 1.双标记: <标记(签)名称 属性1名="属性1值" 属性