JavaScript中按键事件的e.keyCode e.which e.charCode
- 格式:docx
- 大小:49.92 KB
- 文档页数:4
JS事件的理解什么是事件?事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水。
当我们与浏览器中Web 页面进行某些类型的交互时,事件就发生了。
事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。
事件还可能是Web 浏览器中发生的事情,比如说某个Web 页面加载完成,或者是用户滚动窗口或改变窗口大小。
通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。
今天的事件在漫长的演变史,我们已经告别了内嵌式的事件处理方式(直接将事件处理器放在HTML 元素之内来使用)。
今天的事件,它已是DOM的重要组成部分,遗憾的是,IE继续保留它最早在IE4.0中实现的事件模型,以后的IE版本中也没有做太大的改变,这也就是说IE还是使用的是一种专有的事件模型(冒泡型),而其它的主流浏览器直到DOM 级别3 规定定案后,才陆陆续续支持DOM标准的事件处理模型—捕获型与冒泡型。
历史原因是:W3C 规范在DOM 级别1中并没有定义任何的事件,直到发布于2000 年11 月的DOM 级别2 才定义了一小部分子集,DOM 级别2中已经提供了提供了一种更详细的更细致的方式以控制Web 页面中的事件,最后,完整的事件是在2004年DOM 级别3的规定中才最终定案。
因为IE4是1995推出的并已实现了自己的事件模型(冒泡型),当时根本就没有DOM标准,不过在以后的DOM标准规范过程中已经把IE的事件模型吸收到了其中。
目前除IE浏览器外,其它主流的Firefox, Opera,Safari都支持标准的DOM事件处理模型。
IE仍然使用自己专有的事件模型,即冒泡型,它事件模型的一部份被DOM标准采用,这点对于开发者来说也是有好处的,只有使用DOM标准,IE都共有的事件处理方式才能有效的跨浏览器。
DOM事件流DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程可称为DOM事件流。
js keyboardevent 例子JS KeyboardEvent 是 JavaScript 中的一个事件对象,用于处理与键盘相关的事件。
它提供了许多属性和方法,以便我们可以获取和操作键盘事件的相关信息。
下面列举了10个关于JS KeyboardEvent 的例子,以帮助读者更好地理解和使用这个事件对象。
1. 获取键盘事件的键值```javascriptdocument.addEventListener('keydown', function(event) {console.log(event.key);});```这个例子展示了如何通过 KeyboardEvent 的 key 属性来获取键盘事件的键值。
当用户按下键盘上的任意键时,会在控制台输出对应的键值。
2. 判断是否按下了某个特定的键```javascriptdocument.addEventListener('keydown', function(event) {if (event.key === 'Enter') {console.log('Enter键被按下');}});```这个例子演示了如何使用 KeyboardEvent 的 key 属性来判断用户是否按下了 Enter 键。
当用户按下 Enter 键时,会在控制台输出相应的信息。
3. 获取键盘事件的修饰键状态```javascriptdocument.addEventListener('keydown', function(event) {console.log('Shift键是否按下:', event.shiftKey);console.log('Ctrl键是否按下:', event.ctrlKey);console.log('Alt键是否按下:', event.altKey);});```这个例子展示了如何使用 KeyboardEvent 的 shiftKey、ctrlKey 和 altKey 属性来获取键盘事件的修饰键状态。
JavaScript中事件列表收藏javascript事件列表解说事件浏览器支持解说一般事件onclick IE3、N2 鼠标点击时触发此事件ondblclick IE4、N4 鼠标双击时触发此事件onmousedown IE4、N4 按下鼠标时触发此事件onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件onmousemove IE4、N4 鼠标移动时触发此事件onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件onkeypress IE4、N4 当键盘上的某个键被按下并且释放时触发此事件.onkeydown IE4、N4 当键盘上某个按键被按下时触发此事件onkeyup IE4、N4 当键盘上某个按键被按放开时触发此事件页面相关事件onabort IE4、N3 图片在下载时被用户中断onbeforeunload IE4、N 当前页面的内容将要被改变时触发此事件onerror IE4、N3 出现错误时触发此事件onload IE3、N2 页面内容完成时触发此事件onmove IE、N4 浏览器的窗口被移动时触发此事件onresize IE4、N4 当浏览器的窗口大小被改变时触发此事件onscroll IE4、N 浏览器的滚动条位置发生变化时触发此事件onstop IE5、N 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断onunload IE3、N2 当前页面将被改变时触发此事件表单相关事件onblur IE3、N2 当前元素失去焦点时触发此事件onchange IE3、N2 当前元素失去焦点并且元素的内容发生改变而触发此事件onfocus IE3 、N2 当某个元素获得焦点时触发此事件onreset IE4 、N3 当表单中RESET的属性被激发时触发此事件onsubmit IE3 、N2 一个表单被递交时触发此事件滚动字幕事件onbounce IE4、N 在Marquee内的内容移动至Marquee显示范围之外时触发此事件onfinish IE4、N 当Marquee元素完成需要显示的内容后触发此事件onstart IE4、 N 当Marquee元素开始显示内容时触发此事件编辑事件onbeforecopy IE5、N 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件onbeforecut IE5、 N 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件onbeforeeditfocus IE5、N 当前元素将要进入编辑状态onbeforepaste IE5、 N 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件onbeforeupdate IE5、 N 当浏览者粘贴系统剪贴板中的内容时通知目标对象oncontextmenu IE5、N 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件oncopy IE5、N 当页面当前的被选择内容被复制后触发此事件oncut IE5、N 当页面当前的被选择内容被剪切时触发此事件ondrag IE5、N 当某个对象被拖动时触发此事件 [活动事件]ondragdrop IE、N4 一个外部对象被鼠标拖进当前窗口或者帧ondragend IE5、N 当鼠标拖动结束时触发此事件,即鼠标的按钮被释放了ondragenter IE5、N 当对象被鼠标拖动的对象进入其容器范围内时触发此事件ondragleave IE5、N 当对象被鼠标拖动的对象离开其容器范围内时触发此事件ondragover IE5、N 当某被拖动的对象在另一对象容器范围内拖动时触发此事件ondragstart IE4、N 当某对象将被拖动时触发此事件ondrop IE5、N 在一个拖动过程中,释放鼠标键时触发此事件onlosecapture IE5、N 当元素失去鼠标移动所形成的选择焦点时触发此事件onpaste IE5、N 当内容被粘贴时触发此事件onselect IE4、N 当文本内容被选择时的事件onselectstart IE4、N 当文本内容选择将开始发生时触发的事件数据绑定onafterupdate IE4、N 当数据完成由数据源到对象的传送时触发此事件oncellchange IE5、N 当数据来源发生变化时ondataavailable IE4、N 当数据接收完成时触发事件ondatasetchanged IE4、N 数据在数据源发生变化时触发的事件ondatasetcomplete IE4、N 当来子数据源的全部有效数据读取完毕时触发此事件onerrorupdate IE4、N 当使用onBeforeUpdate事件触发取消了数据传送时,代替onAfterUpdate事件onrowenter IE5、N 当前数据源的数据发生变化并且有新的有效数据时触发的事件onrowexit IE5、N 当前数据源的数据将要发生变化时触发的事件onrowsdelete IE5、N 当前数据记录将被删除时触发此事件onrowsinserted IE5、N 当前数据源将要插入新数据记录时触发此事件外部事件onafterprint IE5、N 当文档被打印后触发此事件onbeforeprint IE5、N 当文档即将打印时触发此事件onfilterchange IE4、N 当某个对象的滤镜效果发生变化时触发的事件onhelp IE4、N 当浏览者按下F1或者浏览器的帮助选择时触发此事件onpropertychange IE5、N 当对象的属性之一发生变化时触发此事件onreadystatechange IE4、N 当对象的初始化属性值发生变化时触发此事件另一列表,与上表类似:onabort 当用户中断下载图像时触发。
web前端培训教程:JavaScript 事件对象介绍JavaScript 在事件处理函数中默认传递了event 对象,也就是事件对象。
但由于浏览器的兼容性,开发者总是会做兼容方面的处理。
jQuery 在封装的时候,解决了这些问题,并且还创建了一些非常好用的属性和方法。
一.事件对象事件对象就是event 对象,通过处理函数默认传递接受。
之前处理函数的e 就是event事件对象,event 对象有很多可用的属性和方法,我们在JavaScript 课程中已经详细的了解过这些常用的属性和方法,这里,我们再一次演示一下。
//通过处理函数传递事件对象$('input').bind('click', function (e) { //接受事件对象参数alert(e);});//通过event.type 属性获取触发事件名$('input').click(function (e) {alert(e.type);});//通过event.target 获取绑定的DOM 元素$('input').click(function (e) {alert(e.target); });//通过event.data 获取额外数据,可以是数字、字符串、数组、对象$('input').bind('click', 123, function () { //传递data 数据alert(e.data); //获取数字数据});注意:如果字符串就传递:'123'、如果是数组就传递:[123,'abc'],如果是对象就传递:{user : 'Lee', age : 100}。
数组的调用方式是:e.data[1],对象的调用方式是:er。
//event.data 获取额外数据,对于封装的简写事件也可以使用$('input').click({user : 'Lee', age : 100},function (e) {alert(er);});注意:键值对的键可以加上引号,也可以不加;在调用的时候也可以使用数组的方式:alert(e.data['user']);//获取移入到div 之前的那个DOM 元素$('div').mouseover(function (e) {alert(e.relatedTarget);});//获取移出div 之后到达最近的那个DOM 元素$('div').mouseout(function (e) {alert(e.relatedTarget); });//获取绑定的那个DOM 元素,相当于this,区别与event.target$('div').click(function (e) {alert(e.currentTarget);});注意:event.target 得到的是触发元素的DOM,event.currentTarget 得到的是监听元素的DOM。
C#学习笔记——回车Enter使输⼊焦点⾃动跳到下⼀个TextBox在录⼊界⾯中,⽤户往往需要按回车键时光标⾃动跳⼊下⼀个⽂本框,以⽅便录⼊操作。
在C#中实现该功能有多种⽅法,以下是⼩编收集的不使⽤TAB键,⽽直接⽤回车键将光标转到下⼀个⽂本框的实现⽅法。
⼀、利⽤Windows消息模拟发送Tab键将各个TextBox的TabIndex属性按顺序编号1、2、3……,然后将TextBox的TabStop属性置为True,在每⼀个TextBox的键盘按下事件中,执⾏以下代码即可(各个TextBox可共⽤同⼀个键盘按下事件)。
/// <summary>/// ⿏标按键事件。
/// 如果检查到按下的是回车键,则发⼀个消息,模拟键盘按以下Tab键,以使输⼊焦点转移到下⼀个⽂本框(或其他焦点可停留的控件)/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void textBox_KeyPress(object sender, KeyPressEventArgs e){if (e.KeyChar == (char)Keys.Enter){SendKeys.Send("{tab}");}}⼆、⼿动置下⼀个需要获取焦点的⽂本框如果想让焦点跳到任意⽂本框或者其他地⽅, 在⽂本框的键盘按下事件中,将焦点放到⽬标⽂本框上。
private void textBox1_KeyPress(object sender, KeyPressEventArgs e){if (e.KeyChar == (char)Keys.Enter){textBox2.focus(); //当在⽂本框1中检查到回车键时,直接将焦点转⼊TextBox2}}三、利⽤控件的SelectNextControl函数按⽅法⼀中设置好TextBox的TabIndex和TabStop属性,在C# 回车Enter事件中,调⽤控件的SelectNextControl函数,是的输⼊焦点跳到下⼀个TextBox(⽂本框)。
测试结果:在IE下:>>支持keyCode>>不支持which和charCode,二者值为undefined在Firefox下:>>支持keyCode,除功能键外,其他键值始终为0>>支持which和charCode,二者的值相同在Opera下:>>支持keyCode和which,二者的值相同>>不支持charCode,值为undefined测试代码:Code:<script type="text/javascript"> //By 枫岩@ function $(s){ return docum ent.getElement ById(s)?docum ent.getElementById(s):s; } function viewKeyInfo(e){ var currKey=0,CapsLock=0; var e=e||event; currKey=e.keyCode||e.which||e.charCode; CapsLock=currKey >=65 && currKey <=90; $("type").innerHTML=e['type']; $("currKey").innerHTML=String.fromCharCode(currKey);$("Decim al").innerHTML=c urrKey; $("keyCode").innerHTML=e['keyCode']; $("charCode").innerHTML=e['charCode']; $("caps").innerHTML=CapsLock; $("shiftKey").innerHTML=e['shiftKey']; $("ctrlKey").innerHTML=e['ctrlKey']; $("repeat").innerHTML=e['repeat']; $("which").innerHTML=e['which']; } docum ent.onkeypress= viewKeyInfo; </script><p>请按下任意键看测试效果:</p> type:<span id="type"></span><br />当前Key:<span id="currKey"></span><br />Decimal:<span id="Decimal"></span><br /> keyCode:<span id="keyCode"></span><strong>注:在FF下,keyCode始终为0</strong><br /> which:<span id="which"></span><strong>注:在IE下,which始终为undefined ;在Opera下,keyCode和charCode二者的值相同</strong><br /> charCode:<span id="charCode"></span><strong>注:在IE、Opera下,charCode始终为undefined ; 在FF下,which和charCode二者的值相同</strong><br />大写:<span id="caps"></span><br />altKey:<span id="altKey"></span><br /> ctrlKey:<span id="ctrlKey"></span><br />shiftKey:<span id="shiftKey"></span><br /> repeat:<span id="repeat"></span><br /><style type="text/css" media="all"> body {color:#999;font:normal 14px tahom a,宋体,Geneva,Arial,sans-serif;} span {color:#f00;font-weight:bold;padding:0 5px;} strong {color:#090;font-weight:normal;padding:0 5px;} </style>。
事件javascript事件查询综合(转)javascript事件查询综合click()对象.click()使对象被点击。
closed对象.closed对象窗口是否已关闭true/falseclearTimeout(对象)清除已设置的setTimeout对象clearInterval(对象)清除已设置的setInterval对象confirm("提示信息")弹出确认框,确定返回true取消返回false cursor:样式更改鼠标样式hand crosshair text wait help default autoe/s/w/n-resizeevent.clientX返回最后一次点击鼠标X坐标值;event.clientY返回最后一次点击鼠标Y坐标值;event.offsetX返回当前鼠标悬停X坐标值event.offsetY返回当前鼠标悬停Y坐标值document.write(stModified)网页最后一次更新时间document.ondblclick=x当双击鼠标产生事件document.onmousedown=x单击鼠标键产生事件document.body.scrollTop;返回和设置当前竖向滚动条的坐标值,须与函数配合,document.body.scrollLeft;返回和设置当前横向滚动务的坐标值,须与函数配合,document.title document.title="message";当前窗口的标题栏文字document.bgcolor document.bgcolor="颜色值";改变窗口背景颜色document.Fgcolor document.Fgcolor="颜色值";改变正文颜色document.linkcolor document.linkcolor="颜色值";改变超联接颜色document.alinkcolor document.alinkcolor="颜色值";改变正点击联接的颜色document.VlinkColor document.VlinkColor="颜色值";改变已访问联接的颜色document.forms.length返回当前页form表单数document.anchors.length返回当前页锚的数量document.links.length返回当前页联接的数量document.onmousedown=x单击鼠标触发事件document.ondblclick=x双击鼠标触发事件defaultStatus window.status=defaultStatus;将状态栏设置默认显示function function xx(){...}定义函数isNumeric判断是否是数字innerHTML xx=对象.innerHTML输入某对象标签中的html源代码innerText divid.innerText=xx将以div定位以id命名的对象值设为XXlocation.reload();使本页刷新,target可等于一个刷新的网页Math.random()随机涵数,只能是0到1之间的数,如果要得到其它数,可以为*10,再取整Math.floor(number)将对象number转为整数,舍取所有小数Math.min(1,2)返回1,2哪个小Math.max(1,2)返回1,2哪个大navigator.appName返回当前浏览器名称navigator.appVersion返回当前浏览器版本号navigator.appCodeName返回当前浏览器代码名字erAgent返回当前浏览器用户代标志onsubmit onsubmit="return(xx())"使用函数返回值opener opener.document.对象控制原打开窗体对象prompt xx=window.prompt("提示信息","预定值");输入语句parent parent.框架名.对象控制框架页面return return false返回值random随机参数(0至1之间)reset()form.reset();使form表单内的数据重置split("")string.split("")将string对象字符以逗号隔开submit()form对象.submit()使form对象提交数据String对象的charAt(x)对象反回指定对象的第多少位的字母lastIndexOf("string")从右到左询找指定字符,没有返回-1indexOf("string")从左到右询找指定字符,没有返回-1 LowerCase()将对象全部转为小写UpperCase()将对象全部转为大写substring(0,5)string.substring(x,x)返回对象中从0到5的字符setTimeout("function",time)设置一个超时对象setInterval("function",time)设置一个超时对象toLocaleString()x.toLocaleString()从x时间对象中获取时间,以字符串型式存在typeof(变量名)检查变量的类型,值有:String,Boolean,Object,Function,Underfinedwindow.event.button==1/2/3鼠标键左键等于1右键等于2两个键一起按为3window.screen.availWidth返回当前屏幕宽度(空白空间)window.screen.availHeight返回当前屏幕高度(空白空间)window.screen.width返回当前屏幕宽度(分辨率值)window.screen.height返回当前屏幕高度(分辨率值)window.document.body.offsetHeight;返回当前网页高度window.document.body.offsetWidth;返回当前网页宽度window.resizeTo(0,0)将窗口设置宽高window.moveTo(0,0)将窗口移到某位置window.focus()使当前窗口获得焦点window.scroll(x,y)窗口滚动条坐标,y控制上下移动,须与函数配合window.open()window.open("地址","名称","属性")属性:toolbar(工具栏),location(地址栏),directions,status(状态栏), menubar(菜单栏),scrollbar(滚动条),resizable(改变大小),width(宽),height(高),fullscreen(全屏),scrollbars(全屏时无滚动条无参数,channelmode(宽屏),left(打开窗口x坐标),top(打开窗口y坐标) window.location='view-source:'+window.location.href应用事件查看网页源代码;a=new Date();//创建a为一个新的时期对象y=a.getYear();//y的值为从对象a中获取年份值两位数年份y1=a.getFullYear();//获取全年份数四位数年份m=a.getMonth();//获取月份值d=a.getDate();//获取日期值d1=a.getDay();//获取当前星期值h=a.getHours();//获取当前小时数m1=a.getMinutes();//获取当前分钟数s=a.getSeconds();//获取当前秒钟数对象.style.fontSize="文字大小";单位:mm/cm/in英寸/pc帕/pt点/px象素/em文字高1in=1.25cm1pc=12pt1pt=1.2px(800*600分辩率下)文本字体属性:fontSize大小family字体color颜色fontStyle风格,取值为normal一般,italic斜体,oblique斜体且加粗fontWeight加粗,取值为100到900不等,900最粗,light,normal,bold letterSpacing间距,更改文字间距离,取值为,1pt,10px,1cm textDecoration:文字修饰;取值,none不修饰,underline下划线,overline上划线background:文字背景颜色,backgroundImage:背景图片,取值为图片的插入路径点击网页正文函数调用触发器:1.onClick当对象被点击2.onLoad当网页打开,只能书写在body中3.onUnload当网页关闭或离开时,只能书写在body中4.onmouseover当鼠标悬于其上时5.onmouseout当鼠标离开对象时6.onmouseup当鼠标松开7.onmousedown当鼠标按下键8.onFocus当对象获取焦点时9.onSelect当对象的文本被选中时10.onChange当对象的内容被改变11.onBlur当对象失去焦点onsubmit=return(ss())表单调用时返回的值直线border-bottom:1x solid black虚线border-bottom:1x dotted black点划线border-bottom:2x dashed black双线border-bottom:5x double black槽状border-bottom:1x groove black脊状border-bottom:1x ridge black。
JavaScript键盘事件常见⽤法实例分析JavaScript 键盘事件有以下3种keydown键盘按键按下(如果按着不放,会持续触发该事件),可以捕获组合键。
keypress键盘⾮功能按键按下(在keydown之后触发,如果按着不放会持续触发该事件),只能捕获单个键。
keyup键盘按键弹起,可以捕获组合键。
全局事件对象eventevent.ctrlKey功能键”ctrl”键是否按下。
event.altKey功能键”alt”键是否按下。
event.shiftKey功能键”shift”键是否按下。
event.keyCode键盘按键键码。
event.charCode键盘⾮功能按键的ASCII值,可以⽤其区分⼤⼩写。
String.fromCharCode(event.charCode)将ASCII值转化为对应的字符形式。
注意点KeyDown触发后,不⼀定触发KeyUp。
⽐如此时单击⿏标右键。
其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。
KeyPress主要⽤来捕获数字(包括Shift+数字的符号)、字母(注意:包括⼤⼩写)、⼩键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和⽅向键外的ANSI字符。
KeyDown 和 KeyUp 的keyCode区分⼩键盘和主键盘的数字字符。
KeyPress 则不区分⼩键盘和主键盘的数字字符。
keyCode key8BackSpace BackSpace9Tab Tab12Clear13Enter16Shift_L17Control_L18Alt_L19Pause20Caps_Lock27Escape Escape 32space space 33Prior34Next35End36Home37Left38Up39Right40Down41Select42Print43Execute45Insert46Delete47Help480 equal braceright49 1 exclam onesuperior50 2 quotedbl twosuperior51 3 section threesuperior52 4 dollar53 5 percent54 6 ampersand557 slash braceleft568 parenleft bracketleft579 parenright bracketright65 a A66 b B67 c C68 d D69 e E EuroSign70 f F71g G72h H73i I74j J75k K76l L77m M mu78n N79o O80p P81q Q at82r R83s S84t T85u U86v V87w W88x X89y Y90z Z96KP_0 KP_0 97KP_1 KP_1 98KP_2 KP_2 99KP_3 KP_3 100KP_4 KP_4 101KP_5 KP_5102KP_6 KP_6 103KP_7 KP_7 104KP_8 KP_8 105KP_9 KP_9106KP_Multiply KP_Multiply107KP_Add KP_Add108KP_Separator KP_Separator109KP_Subtract KP_Subtract109KP_Subtract110KP_Decimal KP_Decimal111KP_Divide KP_Divide 112F1113F2114F3115F4116F5117F6118F7119F8120F9121F10122F11123F12124F13125F14126F15127F16128F17129F18130F19131F20132F21133F22134F23135F24136Num_Lock137Scroll_Lock187acute grave188comma semicolon 189minus underscore 190period colon192numbersign apostrophe210plusminus hyphen macron211212copyright registered213guillemotleft guillemotright214masculine ordfeminine 215ae AE216cent yen217questiondown exclamdown218onequarter onehalf threequarters220less greater bar221plus asterisk asciitilde 227multiply division228acircumflex Acircumflex229ecircumflex Ecircumflex230icircumflex Icircumflex231ocircumflex OcircumflexOcircumflex232ucircumflex Ucircumflex233ntilde Ntilde 234yacute Yacute 235oslash Ooblique 236aring Aring237ccedilla Ccedilla 238thorn THORN 239eth ETH240diaeresis cedilla currency241agrave Agrave atilde Atilde242egrave Egrave 243igrave Igrave244ograve Ograve otilde Otilde245ugrave Ugrave246adiaeresis Adiaeresis 247ediaeresis Ediaeresis 248idiaeresis Idiaeresis 249odiaeresis Odiaeresis 250udiaeresis Udiaeresis251ssharp question backslash252asciicircum degree 253 3 sterling254Mode_switch测试范例12345 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31<html><body><script type="text/javascript">function appendText(str) {document.body.innerHTML += (str+"<br/>");}document.onkeydown = function(){//如果长按的话,会持续触发keydown和keypress(如果有该事件的话)appendText("onkeydown");if(event.ctrlKey) {appendText("ctrlKey");}if(event.altKey) {appendText("altKey");}if(event.shiftKey) {appendText("shiftKey");}//⽆charCode属性,只有keypress才有该属性if(event.charCode) {appendText(String.fromCharCode(event.charCode));}if(event.keyCode) {appendText(event.keyCode);}//该语句只对chrome和edge有效,可以屏蔽keypress(只对chrome和edge浏览器有效) //event.returnValue = false;};document.onkeypress = function() {//keypress⽆法监听到组合键appendText("onkeypress");if(event.ctrlKey) {31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 if(event.ctrlKey) {appendText("ctrlKey");}if(event.altKey) {appendText("altKey");}if(event.shiftKey) {appendText("shiftKey");}//charCode是字母的Unicode值if(event.charCode) {appendText(String.fromCharCode(event.charCode)); }}document.onkeyup = function() {appendText("onkeyup");}</script></body></html>。
javascript鼠标事件总结以下是为大家整理的javascript鼠标事件总结的相关范文,本文关键词为javascript,鼠标,事件,总结,常见,以下,8个,m,您可以从右上方搜索框检索更多相关文章,如果您觉得有用,请继续关注我们并推荐给您的好友,您可以在教育文库中查看更多范文。
常见的有以下8个:mousedown:鼠标的键钮被按下。
mouseup:鼠标的键钮被释放弹起。
click:单击鼠标的键钮。
dblclick:鼠标的键钮被按下。
contextmenu:弹出右键菜单。
mouseover:鼠标移到目标的上方。
mouseout:鼠标移出目标的上方。
mousemove:鼠标在目标的上方移动。
mousedown事件与mouseup事件可以说click事件在时间上的细分,顺序是mousedown=>mouseup=>click。
因此一个点击事件,通常会激发几个鼠标事件。
请在这里点击,测试一个点击到底捆绑了多少种鼠标事件?![ctrl+A全选提示:你可先修改部分代码,再按运行]有了它们,我们可以做许多事,但对于高层次的应用(如游戏)是显然不够的,于是鼠标事件的点击事件又根据究竟是点左键还是右键进行细分。
在Dom2.0中,w3c对鼠标事件作了现范,鼠标事件被解析为mouseevent(我们可以用e.constructor==mouseevent来判断其是否为鼠标事件,是左键点击还是右键点击由它的一个叫button 的属性判定。
以下就是w3c的标准现范:0:按下左键1:按下中键(如果有的话)2:按下右键当然微软是不会妥协的,因为e.button本来就是微软最先实现的,网景用的是e.which,但相对而言,微软的复杂多了。
0:没有键被按下1:按下左键2:按下右键3:左键与右键同时被按下4:按下中键5:左键与中键同时被按下6:中键与右键同时被按下7:三个键同时被按下更详细的情况见下表。
ge:gecko;sA:safari;op:opera;ns:netscapeIens4ge≥1.0sA3op≥8.0ge0.9op e.button左键1undefined011中键4undefined123右键2undefined232e.which左键undefined1111中键undefined2223右键undefined3332为此我们可以使用以下函数来绑定左右键。
JavaScript中按键事件的e.keyCodee.whiche.charCode
1、浏览器的按键事件
浏览器有3种按键事件——keydown,keypress和keyup,分别对应onkeydown、onkeypress和onkeyup3个事件句柄。
一个典型的按键会产生所有这三种事件,依次是keydown-->keypress-->keyup。
[html]view plaincopyprint?
1.<input type="text"id="text">
2.<script>
3.document.getElementById("text").onkeypress = function() {
4.console.log("keypress");
5.};
6.document.getElementById("text").onkeyup = function() {
7.console.log("keyup");
8.};
9.document.getElementById("text").onkeydown = function() {
10.console.log("keydown");
11.};
12.</script>
控制台输出:
keydown
keypress
keyup
2、浏览器的兼容性
(1)FireFox、Opera、Chrome
事件对应的函数有一个隐藏的变量e,表示发生事件。
e有一个属性e.which指示哪个键被按下,给出该键的索引值(按键码)。
静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。
eg:
[html]view plaincopyprint?
1.<input type="text"id="text">
2.<script>
3.document.getElementById("text").onkeypress = function(e) {
4.alert("按键码: " + e.which + " 字符: " + String.fromCharCode(e.which));
5.};
6.</script>
FireFox、Opera、Chrome中输入:a
输出:按键码:97 字符:a
(2)IE
IE不需要e变量,window.event表示发生事件。
window.event有一个属性window.event.keyCode指示哪个键被按下,给出该键的索引值(按键码)。
静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。
eg:
[html]view plaincopyprint?
1.<input type="text"id="text">
2.<script>
3.document.getElementById("text").onkeypress = function() {
4.alert("按键码: " + window.event.keyCode + " 字符: " +
String.fromCharCode(window.event.keyCode));
5.};
6.</script>
IE中输入:a
输出:按键码:97 字符:a
3、判断浏览器类型
利用navigator对象的appName属性。
IE:navigator.appName=="Microsoft Internet Explorer"
FireFox、Opera、Chrome:navigator.appName=="Netscape"
eg:
[html]view plaincopyprint?
1.<input type="text"id="text">
2.<script>
3.document.getElementById("text").onkeypress = function(e) {
4.if (navigator.appName == "Microsoft Internet Explorer")
5.alert("按键码: " + window.event.keyCode + " 字符: " +
String.fromCharCode(window.event.keyCode));
6.else if (navigator.appName == "Netscape")
7.alert("按键码: " + e.which + " 字符: " + String.fromCharCode(e.which));
8.};
9.</script>
IE、FireFox、Opera、Chrome中输入:a
输出:按键码:97 字符:a
简化的写法:
[html]view plaincopyprint?
1.<input type="text"id="text">
2.<script>
3.document.getElementById("text").onkeypress = function(e) {
4.e = e || window.event;
5.key = e.keyCode || e.which || e.charCode;
6.alert("按键码: " + key + " 字符: " + String.fromCharCode(key));
7.};
8.</script>
说明:IE只有keyCode属性,FireFox中有which和charCode属性,Opera中有keyCode 和which属性,Chrome中有keyCode、which和charCode属性。