一. 事件基础

1.1 绑定事件

在1.7之前用bind()来绑定事件, 从1.7之后统一使用on()来绑定事件.

  • 写法1:

    $("li").on("mouseover click", function (e){
    
    })
    
  • 写法2:

    $("li").on({
          click : function (e){
    
          },
          mouseover : function (){
    
          }
      })
    

1.2 解除绑定

在1.7之前用unbind()来解绑事件, 从1.7之后统一使用off()来绑定事件.

$("li").off("click mouseover");  // 解除所有的click和mouseover事件

二. 事件代理(委托)

1.7之前使用delegate()委托, 解除委托用undelegate(), 1.7之后统一用on(), 解除绑定用off()

写法:

$("ul").on("click", "li:nth-child(2n)", function (){
    alert("aaaaa")
})

说明:

  • 第二个参数是选择器, 表示代理的后代元素.

三. 事件简写

click()
dblclick()
mouseover()
...

三. 事件对象

  1. type属性 获取事件类型
  2. preventDefault()方法 阻止事件的默认行为。兼容各种浏览器。
  3. stopPropation()方法 阻止事件的冒泡
  4. target属性 获取到触发事件的元素
  5. pageXpageY属性 光标相对于页面的距离。如果有滚动条,还要加上滚动条的距离
  6. offsetXoffsetY
  7. clientXclientY
  8. which属性。 如果是鼠标事件则获取鼠标的左(1)中(2)右(3)键,如果是键盘则获取键盘的按键。
  9. metaKey属性。获取ctrl按键。

四. 高级事件

4.1 模拟事件的操作

trigger()triggerHandler()

$("div").trigger("click"); // 事件的默认行为和事件处理程序会触发
$("div").triggerHandler("click"); // 事件的默认行为不会触发,只触发事件处理程序.

4.2 事件的命名空间

jQuery为了方便管理事件,给事件提出了命名空间的概念。
语法: 事件.命名空间

Copyright © 李振超 2018 all right reserved,powered by Gitbook
该文件最后修订时间: 2018-10-18 03:20:27

results matching ""

    No results matching ""