事件
JavaScript 事件 | 菜鸟教程 (runoob.com)
1、介绍
事件,是指由对象引起的变化而发出的信号,可以绑定js函数,从而进行控制。
根据对象:可以是浏览器行为,也可以是用户行为
- 窗口事件
- 表单事件
- 键盘事件
- 鼠标事件
- 多媒体事件
- 其他事件
事件的监听绑定:
- html事件:在html元素中声明,一般是onxxx形式,xxx表示事件名称,其后是js代码
<button onclick="alert(123)">点击</button>
- js事件:在js中声明,一般是选定元素,然后调用onxxx属性,该属性与html事件基本一致,然后被赋值函数声明或者调用函数
document.getElementById("btn").onclick=alert(123)
- jquery事件:jquery环境声明,选定元素,然后调用xxx方法,该方法与html事件一致,然后参数函数声明或者调用函数
$("#btn").click(alert(123));
2、窗口事件
适用于body标签。
(1)onload事件
属性在文档对象加载完成后触发。
onload 通常使用于 <body> 元素中,用于在页面完全载入后执行指定的脚本(包括图片,脚本,css文件等)。
$(document).ready(function(){})用于 DOM 结构加载完毕后就可以执行方法内代码块,由此得出,onload 是在 ready 后执行。
3、表单事件
onchange:当元素改变时触发
onfocus:当元素获取焦点时
onblur:当元素失去焦点
onselect:当选取元素时
onsubmit:当提交表单时
4、键盘事件
onkeydown:当按下按键
onkeypress:当按下并松开按键
onkeyup:当松开按键
- keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外), 它返回的是键盘代码;
- keypress:在键盘上按下一个按键,并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
- keyup:用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.
案例1:获取按键代码或字符的ASCII码
$(window).keydown( function(event){
// 通过event.which可以拿到按键代码. 如果是keypress事件中,则拿到ASCII码.
} );
案例2:传递数据给事件处理函数
语法:
jQueryObject.keypress( [[ data ,] handler ] );
- data: 通过event.data传递给事件处理函数的任意数据;
- handler: 指定的事件处理函数;
举例:
// 只允许按下的字母键生效, 65~90是所有大写字母的键盘代码范围.
var validKeys = { start: 65, end: 90 };
$("#keys").keypress( validKeys, function(event){
var keys = event.data; //拿到validKeys对象.
return event.which >= keys.start && event.which <= keys.end;
} );
5、鼠标事件
onclick:当鼠标单击
ondbclick:当鼠标双击
ondrag:拖动元素时
6、多媒体
onerror:当元素加载期间发生错误时
onloadstart:当浏览器开始加载媒介数据时
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战