您的位置：首页 > Web前端 > JQuery
jquery事件【mousedown与mouseup ----keydown与keypress与keyup】focus--blur--orrer--pageX-pageY

2017-06-19 11:46 585 查看
<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

jquery事件【mousedown与mouseup ----keydown与keypress与keyup】focus--blur--orrer--pageX-pageY
