jQuery 事件篇（三）

一   键盘事件

 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()	不再派发事件。