<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>jquery事件 【mousedown与mouseup ----keydown与keypress与keyup】focus--blur--orrer--pageX-pageY</title>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.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>
分享到:
相关推荐
c++模仿c#MouseDown和MouseUp事件
今天小编就为大家分享一篇关于Android触摸事件和mousedown、mouseup、click事件之间的关系,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
本文实例讲述了JavaScript常见鼠标事件与用法。分享给大家供大家参考,具体如下: JavaScript 鼠标事件有以下8种 mousedown 鼠标的键钮被按下。 mouseup 鼠标的键钮释放弹起。 click 鼠标左键(或中键)被单击。 ...
combo:'inputEvents'属性自带'blur'事件处理器; numberbox:'cloneFrom'方法可用; slider:'step'属性可以设置为浮点数; menu:'findItem'方法允许用户通过任意参数查找菜单项; menubutton:添加'showEvent'和'...
可以实现鼠标悬停、MouseDown、MouseUp 的图片切换
frp-mousedown-click-dblclick 用于合并 mousedown、click 和 dblclick 事件的 FRP 蓝图
情况分析 首先我们要清楚click和dblclick的执行顺序,测试过程略,下面是测试结果: click:mousedown — mouseup — click dblclick:mousedown — mouseup — click — mousedown — mouseup
javascript简单拖拽,简单拖拽实现
这个 repo 是为了突出 pixi.js 2.2.0 中的一个问题。 设置PIXI.AUTO_PREVENT_DEFAULT = false; 在移动设备上点击时会导致 mousedown 事件触发。
截图,简单,快速,mouseup,mousedown事件
jQuery 1.11.0 速查表 核心 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc])1.8* jQuery(callback) jQuery.holdReady(hold) jQuery 对象访问 each(callback) size() length selector ...
目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。 还不支持 blur, focus, mouseenter, mouseleave, change, submit 与bind()不同的是,live()一次只能...
基于python异步io框架Tornado,结合JavaScript的onkeydown事件、 jQuery的mousedown、mouseup、touchstart、touchend事件以及Ajax,实现了监控遥控命令与web网页指定按键和鼠标(屏幕)点击事件的绑定,同时也实现了...
这两个事件可以增加图标按钮的图像效果, 至于mouseDown和mouseUp的属性,它们是伴随着Click事件发生的,这和keyPress事件是keyDown事件和keyUp事件组合而成的机制是一样的 ,这3个鼠标事件也有modifier属性。...
8.5.22 mousedown(fn) 141 8.5.23 mousemove(fn) 142 8.5.24 mouseout(fn) 142 8.5.25 mouseover(fn) 142 8.5.26 mouseup(fn) 142 8.5.27 resize(fn) 143 8.5.28 scroll(fn) 143 8.5.29 select() 144 8.5.30 select...
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...
keydown(),keypress(),keyup() mousedown(),mouseup() mouseenter(),mouseleave() mouseover(),mouseout() mousemove() 二、jquery挂事件 $(“p”).bind(“事件名称”,要执行的匿名函数) $(“p”).unbind...
学习日记与自制案例 用于form事件 change(fn) select(fn) submit...keydown(fn) keypress(fn) keyup(fn) 用于mouse事件 click(fn) dblclick(fn) mousedown(fn) mousemove(fn) mouseout(fn) mouseover(fn) mouseup(fn)