JS事件用法

1.常用事件理解

onfocus/onblur:聚焦离焦事件,用于表单校验的时候比较合适。

onclick/ondblclick:鼠标单击和双击事件

onkeydown/onkeypress:搜索引擎使用较多

onload:页面加载事件,所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称,那么在html页面中只能写一个。

onmouseover/onmouseout/onmousemove:购物网站商品详情页。

onsubmit:表单提交事件 ,有返回值,控制表单是否提交(只能在form标签内)。

onchange:当用户改变内容的时候使用这个事件(二级联动)

 

2.第二种理解方式

 

3.键盘事件的用法

根据按下的 键确认相应的事件

1.

$("#ss").keyup(function(xxx){
            //将浏览器产生的事件对象设置到myevent变量中
            var myevent = xxx;
            //获取按键的unicode编码
            var code = myevent.keyCode;
            //如果按钮是回车
            if(code == 13){
                //获取数字微调的当前值,因为$(this)此时表示的是文本框,直接获取value属性值即可
                var value = $(this).val();
                //将当前值设置到span标签中
                $("#num").text(value).css("color","red");    
            }
        });

 

 

2.

$(document).keydown(function(even){   //键盘事件,键盘对应的码可以参考网站http://unixpapa.com/js/key.html
        /*******按键不是39的时候变换方向,先移除原来的CSS属性增加新的class属性,CSS中先定义好class属性*****/
        if(even.keyCode!=keyrecord){$bird.removeClass().addClass("dir_"+even.keyCode);}//删除原来的属性后增加新的class属性
        keyrecord=even.keyCode;
        switch(even.keyCode){
            case 37://左移
//            alert(pos.left);   //显示出小鸟的距离左边位移
            pos.left-=10;
            if(pos.left<=-birdsSize.width){pos.left=$(window).width();} //如果左移的位置超过小鸟宽度,设置为从右边出来。
            break;
            
            case 38://上移
            pos.top-=10;
            if(pos.top<=-birdsSize.height){pos.top=$(window).height();} //如果上移的位置超过小鸟负高度,设置为从下边出来。
            break;
            
            case 39://右移
            pos.left+=10;
            if(pos.left>=$(window).width()){pos.left=-birdsSize.width;} //如果右移的位置超过屏幕宽度,设置为从左边出来。
            break;
            
            case 40://下移
            pos.top+=10;
            if(pos.top>=$(window).height()){pos.top=-birdsSize.height;} //如果下移的位置超过屏幕宽度,设置为从上边出来。
            break;
            
            
        }

 

posted @ 2017-08-12 18:45  QiaoZhi  阅读(284)  评论(0编辑  收藏  举报