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

来源:互联网 发布:淘宝上货最少几件 编辑:程序博客网 时间:2024/06/07 11:55


<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>


0 0
原创粉丝点击