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 @   QiaoZhi  阅读(287)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示