事件方法（四）

事件对象

注册一个事件，系统就会帮我们生成一个对象记录这个事件触发时候的一些信息

比如触发事件的时候有没有按住某个键，再比如触发这个事件的时候的一些坐标信息

当给选中的元素绑定事件时，可以传入一个参数，该参数就是事件对象

$('div').on('click', function(e) {
     console.log(e); 
});

坐标

• screenX() / screenY() - 触发事件时鼠标距离屏幕左上角的值
• clientX() / clienY() - 触发事件时鼠标距离页面可视区左上角的值（忽视滚动条）
• pageX() / pageY() - 触发事件时鼠标距离页面左上角的值（如果滚动条滚动了，值将会更大）

阻止

return false 即能阻止事件冒泡也能阻止默认行为

• event.stopPropagation() - 阻止事件冒泡
• event.preventDefault() - 阻止事件的默认行为

其它

• keycode() - 获取键盘按下时按键的代码

发展历程

1. 简单事件绑定 click()

不支持同时注册（一次只能注册一种），也不支持动态注册（创建的元素在注册事件之后）

$('div').click(function () {
     console.log('鼠标单击事件'); 
})

1. bind() 方式注册事件

支持同时注册（一次注册多种），但也不支持动态注册

$('div').bind({
     mouseenter: function () {
    console.log("鼠标移入事件");
  },
  click: function() {
       console.log("鼠标单击事件"); 
  }
});

3.delegate() 注册事件委托

支持同时注册，也支持动态注册（本质是事件冒泡，因为是给父元素设置事件）

$('body').delegate('div', {
     mouseenter: function () {
    console.log("鼠标移入事件");
  },
  click: function() {
       console.log("鼠标单击事件"); 
  }
});

1. on() 注册事件（首选）

jQuery1.7 之后，用 on() 统一了所有事件的处理方式

on 注册简单事件，不支持动态注册

$('div').on('click', function () {
     console.log('鼠标单击事件'); 
})

on 注册事件委托，支持动态注册

$('body').on('click', 'div', function () {
     console.log('鼠标单击事件'); 
})

事件解绑

• unbind() - 从被选元素上移除添加的事件处理程序
  • 如果未规定参数会删除指定元素的所有事件处理程序
• undelegate() - 从现在或未来的被选元素上移除事件处理程序
  • 如果未规定参数会删除指定元素的所有事件处理程序
• off() - 从被选元素上移除添加的事件处理程序
  • 自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品
  • 如果未规定参数会删除指定元素的所有事件处理程序

触发事件

• trigger() - 触发被选元素上指定的事件以及事件的默认行为
  • 可以触发自定义事件
  • 不会引起事件的默认行为（比如表单提交）

鼠标事件

mouseover/mouseout 事件在鼠标指针进入被选元素或任意子元素时都会被触发

mouseenter/mouseleave 事件只有在鼠标指针进入被选元素时被触发

• mouseover() - 当鼠标指针位于元素上方时触发
• mouseout() - 当鼠标指针离开元素上方时触发
• mouseenter() - 当鼠标指针穿过元素时触发

• mouseleave() - 当鼠标指针离开被选元素时触发

  参 数

• fucntion 规定事件触发时运行的函数

键盘事件

• keydown() - 键盘按下时触发
• keyup() - 键盘松开时触发