一 键盘事件
1 keydown()和keyup()事件
jQuery使用keydown()和keyup()来监听键盘按下与松开的动作。
使用方法统计本事件参数保持一致,即$ele.keydown(eventData,handler)。需要注意的是:
- keydown是在键盘按下就会触发,输出文本框的文本是触发键盘事件前的文本;
- keyup是在键盘松手就会触发,输出的是触发键盘后的文本;
- keydown/keyup事件只是发送到具有焦点的元素上,因此对表单元素最合适。
2 keypress事件
每次获取的内容都是之前输入的,当前输入的内容获取不到,keypress主要用来接收字母、数字等,而
keydown和keyup事件可以处理任何不被keypress识别的按键,使用方法同上。
keypress事件与keydown/keyup的主要区别:
- 只能单个字符,不能补货组合键
- 无法响应系统功能键(如delete)
- 不区分小键盘和主键盘的数字字符
二 事件的绑定与解绑
1 on()多事件绑定
- 基本用法:on(events,[selector],[data])
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
- 多个事件绑定同一个函数,同个空格分离,传递不同的事件名
$("#elem").on("mouseover mouseout",function(){ });
- 多个事件绑定不同的函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
- 将数据传递到处理程序
function greet( event ) {
alert( "Hello " + event.data.name ); //Hello csdn
}
$( "button" ).on( "click", {
name: "csdn"
}, greet );
- on的委托机制
<div class="left">
<p class="aaron">
<a>目标节点</a> //点击在这个元素上
</p>
</div>
$("div").on("click","p",fn)
事件绑定在最外层的div元素上,当用户触发a元素上时,事件将网上冒泡,一直会冒泡到div,如果提供第
二个参数,事件在网上冒泡的过程中遇到选择器匹配的元素,将会触发事件回调函数。
2 解绑事件off()
删除一个事件:$ele.off([selector])
删除所有事件:$ele.off()
三 事件对象的属性和方法
事件对象是用来记录一些发生时的相关信息的对象,事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,
在所有事件处理函数运行结束后,事件对象就被销毁。
event.target
target属性可以是注册事件时的元素,或者它的子元素。通常用于比较event.target和this来确定时间是不是由于冒泡而出触发,
经常用于事件冒泡时处理事件委托。
var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
alert(event.type); //"click"
}
btn.addEventListener("click", function(event) {
alert(event.type); //"click"
}, false);
属性 | 描述 |
bubbles | 返回布尔值,指示事件是否是起泡事件类型。 |
cancelable | 返回布尔值,指示事件是否可拥可取消的默认动作。 |
currentTarget | 返回其事件监听器触发该事件的元素。 |
eventPhase | 返回事件传播的当前阶段。 |
target | 返回触发此事件的元素(事件的目标节点)。 |
timeStamp | 返回事件生成的日期和时间。 |
返回当前 Event 对象表示的事件的名称。 |
IE不支持以下方法:
方法 | 描述 |
初始化新创建的 Event 对象的属性。 | |
preventDefault() | 通知浏览器不要执行与事件关联的默认动作。 |
stopPropagation() | 不再派发事件。 |