jquery事件 【mousedown与mouseup ----keydown与keypress与keyup】focus--blur--orrer--pageX-pageY
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title> <script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript"> //<!--当【鼠标按下】的时候触发mousedown事件-->
$(function () { // mousedown 鼠标按下
$("#btn1").mousedown(function () {
$("#btn1").val(parseInt($("#btn1").val()) + 1)
})
}) //----------------------------------------------------------------- //<!--当【鼠标弹起】的时候触发mouseup事件-->
$(function () { // mouseup 鼠标弹起
$("#btn2").mouseup(function () {
$("#btn2").val(parseInt($("#btn2").val()) + 1)
})
}) //****************************************************************** //<!--当【键盘按下】的时候触发keydown事件-->
$(function () { // keydown 键盘按下
$("#btn3").keydown(function (e) {
alert(e.keyCode); //在keydown事件下,keyCody就是当前按键的键盘码 :打印当前按键的键盘码
$("#btn3").val(parseInt($("#btn3").val()) + 1) })
}) //----------------------------------------------------------------- //<!--当【键盘按下】的时候触发keypress事件-->
$(function () { // keypress 键盘按下
$("#btn4").keypress(function (e) {
alert(e.keyCode) //在keypress事件下,keyCody就是当前按键的ASCII码 :打印当前按键的ASCII码
$("#btn4").val(parseInt($("#btn4").val()) + 1); })
}) //<!-- KeyDown与keypress是按下一个键的意思, 但实际上二者的根本差别是, 系统由KeyDown返回键盘的代码, 然后由TranslateMessage函数翻译成成字符, 搜索由KeyPress返回字符值. 因此在KeyDown中返回的是键盘的代码。 //而KeyPress返回的是ASCII字符。KeyPress主要用来接收字母、数字等ASCII字符。KeyPress 仅仅能捕获单个字符,KeyPress 不区分小键盘和主键盘的数字字符。KeyPress 不显示键盘的物理状态(SHIFT键),而仅仅是传递一个字符。KeyPress 将每一个字符的大、小写形式作为不同的键代码解释,即作为两种不同的字符。 //而 KeyDown 和 KeyUP 事件过程能够处理不论什么不被 KeyPress 识别的击键。诸如:功能键(F1-F12)、编辑键、定位键以及不论什么这些键和键盘换档键的组合等。 所以依据你的目的, 假设仅仅想读取字符, 用KeyPress, 假设想读各键的状态, 用KeyDown。假设你一直按着键不放, 这时不断地触发KeyDown和KeyPress--> //KeyDown 和KeyUp 区分小键盘和主键盘的数字字符
//----------------------------------------------------------------- //<!--当【键盘弹起】的时候触发keyup事件-->
$(function () { // keyup 键盘弹起
$("#btn5").keyup(function () {
$("#btn5").val(parseInt($("#btn5").val()) + 1)
})
}) //****************************************************************** //<!--当选中控件【获得焦点】的时候-->
$(function () { // focus 获得焦点
$("#txt1").focus(function () {
$("#txt1").val(parseInt($("#txt1").val()) + 1)
})
}) //------------------------------------------------------------------ //<!--当选中控件【失去焦点】的时候-->
$(function () { // blur 失去焦点
$("#txt2").blur(function () {
$("#txt2").val(parseInt($("#txt2").val()) - 1)
})
}) //------------------------------------------------------------------ //<!--当元素的【值发生改变】时,会发生 change 事件-->
$(function () { // change 值发生改变
$("#txt3").change(function () {
alert("txt3值发生了变化")
$(this).css("background", "red")
}) }) //------------------------------------------------------------------ //<!--当图片载入出错的时候发生error事件 比方找不到图片的地址啊。等等,反正就是没载入上图片--> $(function () { // error 错误发生
$("img").error(function () {
$("img").replaceWith("这个一个图片") //用"这个一个图片" 的文字来替换载入出错的图片
}) }) //------------------------------------------------------------------ $(document).mousemove(function (e) { //pageX,pageY 鼠标的坐标
$("span").text(e.pageX + ", " + e.pageY);
});
</script>
</head>
<body>
<p>当鼠标【按下】的时候触发mousedown事件</p>
<input type="button" value="0" id="btn1"/>
<br/>
<br/>
<hr/>
<p>当鼠标弹起的时候触发mouseup事件</p>
<input type="button" value="0" id="btn2"/>
<br/>
<br/>
<hr/>
<p>当键盘按下的时候触发keydown事件</p>
<input type="button" value="0" id="btn3"/>
<br/>
<br/>
<hr/>
<p>当键盘按下的时候触发keypress事件</p>
<input type="button" value="0" id="btn4"/>
<br/>
<br/>
<hr/>
<p>当键盘弹起的时候触发keyup事件</p>
<input type="button" value="0" id="btn5"/>
<br/>
<br/>
<hr/>
<p>当控件获得焦点的时候</p>
<input type="text" value="0" id="txt1"/>
<br/>
<br/>
<hr/>
<p>当控件失去焦点的时候</p>
<input type="text" value="0" id="txt2"/>
<br/>
<br/>
<hr/>
<p>当元素的值发生改变时。会发生 change 事件。</p>
<input type="text" id="txt3"/>
<br/>
<br/>
<hr/>
<p>当元素的值发生改变时,会发生 change 事件。</p>
<br/>
<br/>
<hr/>
<p>找不到图片地址,图片就不能正常载入,图片载入错误就会触发orrer事件</p>
<img src=""/>
<br/>
<br/>
<hr/>
<p>span标签用来显示鼠标的横纵坐标的值</p>
<span></span>
</body>
</html>
jquery事件 【mousedown与mouseup ----keydown与keypress与keyup】focus--blur--orrer--pageX-pageY的更多相关文章
- 键盘事件keydown、keypress、keyup随笔整理总结(摘抄)
原文1:http://www.cnblogs.com/silence516/archive/2013/01/25/2876611.html 原文2:http://www.cnblogs.com/leo ...
- 键盘事件keydown、keypress、keyup随笔整理总结
英文输入法: 事件触发顺序:keydown - > keypress - > keyup 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chr ...
- 键盘事件keydown、keypress、keyup
事件触发顺序:keydown - > keypress - > keyup 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chrome:输入触发k ...
- JQuery使用mousedown和mouseup简单判断鼠标按下与释放位置是否相同
在JQuery中,我们可以利用mousedown.mouseup来跟踪页面的鼠标按下与释放事件. 如何获取鼠标的位置信息呢?事件event的pageX和pageY属性可以让我们获得鼠标在页面中的具体位 ...
- 详解键盘事件(keydown,keypress,keyup)
一.键盘事件基础 1.定义 keydown:按下键盘键 keypress:紧接着keydown事件触发(只有按下字符键时触发) keyup:释放键盘键 顺序为:keydown -> keypre ...
- Winform下KeyDown,KeyPress,KeyUp事件的总结(转)
原文: http://www.cnblogs.com/xiashengwang/archive/2011/09/15/2578798.html 在winform程序中,经常会用到这几个事件用于控制数字 ...
- C#控件中的KeyDown、KeyPress 与 KeyUp事件浅谈
研究了一下KeyDown,KeyPress 和 KeyUp 的学问.让我们带着如下问题来说明: 1.这三个事件的顺序是怎么样的? 2.KeyDown 触发后,KeyUp是不是一定触发? 3.三个事件的 ...
- javascript简单拖拽(鼠标事件 mousedown mousemove mouseup)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- C#学习笔记-KeyDown、KeyPress、KeyUp事件以及KeyCode、KeyData、KeyValue、KeyChar属性
本来没打算单独写的,但是在自己弄测试小程序的时候,越写发现不清楚的东西越多,所以实践又一次证明:纸上得来终觉浅,绝知此事要躬行! 直接贴代码了: //发生顺序:KeyDown->KeyPress ...
随机推荐
- jsp出现错误can not find the tag directory /web-inf/tags
百度google了一大圈没找到中文答案,无奈之下硬着头皮看了一个英文答案http://stackoverflow.com/questions/11502703/eclipse-can-not-find ...
- poj_2187凸包,暴力解法
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #i ...
- 编写SDR SDRAM页突发模式控制器的注意点
网上有很多的SDR SDRAM控制器的代码,但都是基于burst1/2/4/8模式下的,这种模式下传输高速的相机数据还是有点拮据的,所以花了几天把这些模式改造成了页突发模式.我的这个控制器模型是这样的 ...
- SQL Server单表已700w+将普通表转换成分区表1
最近项目中,某个表数据量爆发时增长,单表已700w+,读写性能急剧下降,所以考虑加入分区表以解燃眉之急,后续还是要分表分库,当然这是后话.下面简要说一下将普通表转为分区表的步骤. 一.创建文件组 ...
- ListView中嵌套GridView点击事件
做一个项目时,需要在ListView中嵌套GridView,因为ListView的每个条目中不一定出现GridView,那么问题来了,添加GridView的Item的点击事件后,有GridView出现 ...
- PostgreSQL环境中查看SQL执行计划示例
explain analyze ,format,buffers, format :TEXT, XML, JSON, or YAML. EXPLAIN (ANALYZE,buffers,format ...
- App开发Native.js入门指南
概述 Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术.如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展 ...
- js文字的无缝滚动(上下)
使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...
- elementui的时间选择器开始时间和结束时间的限制
开始时间不能大于结束时间 html代码部分 方法部分 开始时间和结束时间可以选同一天 <template> <div class="range-wrapper"& ...
- [NOI2003]逃学的小孩(树的直径)
[NOI2003]逃学的小孩 题目描述 Chris家的电话铃响起了,里面传出了Chris的老师焦急的声音:"喂,是Chris的家长吗?你们的孩子又没来上课,不想参加考试了吗?"一听 ...