JavaScript进阶系列07,鼠标事件
2024-10-12 03:30:48
鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keypress事件,而会触发Keydown和Keyup事件,这就是Keypress事件与Keydown、Keyup事件的不同之处。另外,通常使用Keypress事件来获取用户输入信息。
继续使用"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中的跨浏览器事件处理机制来触发鼠标事件。
创建Script2.js只允许输入大小写字母,给Keypress事件注册方法。
(function() {var txtbox = document.getElementById("txtInput");eventUtility.addEvent(txtbox, "keypress", function(evt) {var code = eventUtility.getCharCode(evt);//如果是大写或小写字母if ((code >= 65 && code <= 90) || (code >= 97 && code <= 122)) {} else {eventUtility.preventDefault(evt);}});}());
页面部分:
<input type="text" id="txtInput"/><script src="eventUtility.js"></script><script src="script2.js"></script>
输出结果:在键盘输入非大小写字母,input没任何反应
非修饰键对应的ASCII码:
A-Z:65-90
a-z: 97-122
0-9: 48-57
其实,使用Keydown或Keyup事件,也能达到相同的效果。修改Script2.js如下:
(function() {var txtbox = document.getElementById("txtInput");eventUtility.addEvent(txtbox, "keydown", function(evt) {var code = evt.keyCode;//如果是大写或小写字母if ((code >= 65 && code <= 90) || (code >= 97 && code <= 122)) {} else {eventUtility.preventDefault(evt);}});}());
与keypress事件不同,keyup和keydown事件通过KeyCode属性获取键盘按下的非修饰键。另外, 通过evt.altkey, evt.ctrlKey, evt.shiftKey获取按下的alt键, ctrl键和shift键。
修改Scrip2.js来判断是否按下了"ctrl+B"组合键。
(function() {eventUtility.addEvent(document, "keydown", function(evt) {var code = evt.keyCode;var ctrlkey = evt.ctrlKey;if (ctrlkey && code === 66) {alert('按下了ctrl+B组合键');}});}());
“JavaScript进阶系列”包括:
JavaScript进阶系列01,函数的声明,函数参数,函数闭包
JavaScript进阶系列02,函数作为参数以及在数组中的应用
JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象
JavaScript进阶系列04,函数参数个数不确定情况下的解决方案
JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数
JavaScript进阶系列06,事件委托
JavaScript进阶系列07,鼠标事件
最新文章
- Atititi tesseract使用总结
- ajax+bootstrap做弹窗
- 为Gradle添加UTF-8支持
- Ajax学习(1)-简单ajax案例
- Angular js总结
- IOS-CGAffineTransformMake 矩阵变换 的运算原理
- 再次记录老K站点的工作策略
- Database JDBC Developer&#39;s Guide
- VPN连接机器不再输入密码以及Pin码方法
- react-native清除android项目缓存的命令
- react-native添加react-native-vector-icons插件android遇到的问题
- easyui-combobox的option选项为true与false时的问题
- Eclipse Git下载问题:Internal error; consult Eclipse error log
- Hibernate有五大核心接口,分别是:Session Transaction Query SessionFactoryConfiguration
- vsftp添加用户及测试
- MITx 创业101 寻找你的顾客
- 方格取数(dp)
- Android学习笔记_72_Spinner的用法
- 谷歌地图OGC WMTS服务规则
- Sublime Text3取消自动补全结束标签
热门文章
- ispoweroftwo 判断2的次幂【转】
- click模块使用
- nginx 日志切割(也适用于docker)
- Ubuntu下pycharm安装
- Cover Points
- 【GOF23设计模式】--工厂模式
- 记录一下SparkStreaming中因为使用redis做数据验证而导致数据结果不对的问题
- 017 jquery中对样式的操作
- 004 作业二(单击弹跳li节点的每个文本节点的值;点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上,有,则去除)
- js 高阶函数(map/reduce/filter/sort)