一   键盘事件

 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

返回事件生成的日期和时间。

type

返回当前 Event 对象表示的事件的名称。

IE不支持以下方法:

方法

描述

initEvent()

初始化新创建的 Event 对象的属性。

preventDefault()

通知浏览器不要执行与事件关联的默认动作。

stopPropagation()

不再派发事件。