什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。
常见 DOM 事件:
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click 段落被点击 | keypress 键按下的过程 | submit | load 图像全部加载时 |
| dblclick 段落被双击 | keydown 键被按下 | change | resize 浏览器窗口调整 |
| mouseenter 当鼠标指针穿过元素时 鼠标移人时颜色发生改变 | keyup 键被松开 | focus | scroll 元素滚动 |
|
mouseleave 当鼠标指针离开元素时 设置背景颜色 mousedown 当鼠标指针移动到元素上方,并按下鼠标按键时 mouseup 当在元素上松开鼠标按钮时 |
blur | unload |
鼠标事情
表单触发按钮
change:
定义和用法
当元素的值改变时发生 change 事件(仅适用于表单字段)。
change() 方法触发 change 事件,或规定当发生 change 事件时运行的函数。
注意:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,change 事件会在元素失去焦点时发生。
focus
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
jQuery 事件方法语法
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件:
下一步是定义什么时间触发事件。您可以通过一个事件函数实现:
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。
实例
一.keypress,keydown,keyup的区别:
- 1.keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外), 它返回的是键盘代码;
- 2.keypress:在键盘上按下一个按键,并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
- 3.keyup:用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.
二.两种常用用法举例
案例1:获取按键代码或字符的ASCII码
$(window).keydown( function(event){ // 通过event.whitch可以拿到按键代码. 如果是keypress事件中,则拿到ASCII码. } );
案例2:传递数据给事件处理函数
语法:
jQueryObject.keydown( [[ data ,] handler ] );
- data: 通过event.data传递给事件处理函数的任意数据;
- handler: 指定的事件处理函数;
举例:
// 只允许按下的字母键生效, 65~90是所有小写字母的键盘代码范围. var validKeys = { start: 65, end: 90 }; $("#keys").keydown( validKeys, function(event){ var keys = event.data; //拿到validKeys对象. return event.which >= keys.start && event.which <= keys.end; } );