jQuery 事件 笔记

加载 DOM

Javascript: window.onload()
jQuery: $(document).ready()

  1. 执行时机
  2. 多次使用
  3. 简写方式
$(document).ready(
    function(){}
)

可以简写为:

$(
    function(){

    }
)

而 $(document)可以写为$()

$().ready(
    function(){}
)

事件绑定

bind(type[,data],fn);
第一个参数:事件类型 type

方法 触发、或将函数绑定到指定元素
focus() 当元素获得焦点时,发生 focus 事件。
blur() 当元素失去焦点时发生 blur 事件。
change() 值发生改变时,发生事件。适用于(text field textarea 和 select)
click() 按下并松开鼠标左键时,就会发生一次 click。
dblclick() 在很短的时间内发生两次 click,即是一次 double click 事件。
load() 元素已加载时,发生事件。适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。
unload() 当用户离开页面时,会发生 unload 事件。
error() 当元素遇到错误(没有正确载入)时,发生 error 事件。
resize() 当调整浏览器窗口的大小时,发生 resize 事件。
scroll() 滚动元素时,发生事件。适用于可滚动元素和 window 对象。
select() 当 textarea 或文本的 input 中的文本被选择时,发生事件。
submit() 当提交表单时,会发生 submit 事件。
keydown()
keyup()
keypress()
mousedown()
mouseup()
mousemove()
mouseover() 当鼠标指针向内穿过元素时(包括子元素),发生事件。
mouseout() 当鼠标指针向外穿过元素时(包括子元素),发生事件。
mouseenter() 当鼠标指针进入元素时,发生事件。
mouseleave() 当鼠标指针离开元素时,发生事件。

mouseenter 与 mouseover 的不同
mouseleave 与 mouseout 的不同

方法 描述
bind() 向匹配元素附加一个或更多事件处理器
unbind() 从匹配元素移除一个被添加的事件处理器
delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器
undelegate() 从匹配元素移除一个被添加的事件处理器,现在或将来
live() 为当前或未来的匹配元素添加一个或多个事件处理器
die() 移除所有通过 live() 函数添加的事件处理程序。
one() 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready() 文档就绪事件(当 HTML 文档就绪可用时)
toggle() 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。
trigger() 所有匹配元素的指定事件
triggerHandler() 第一个被匹配元素的指定事件

合成事件

两个jQuery自定义事件

  1. hover()
hover(enter,leave);

替代 mouseenter 和 mouseleave 进入离开而不是穿过

  1. toggle()
toggle(fn1,fn2,fn3,...fnN);

事件冒泡

jQuery 封装了 IE 和其他浏览器的区别

  1. 停止冒泡
$("span").bind("click",
    function(event){
        event.stopPropagation();
    }
)
  1. 阻止默认行为
event.preventDefault();

同时停止冒泡和停止默认行为,可以:

return false;
  1. 事件捕获 jQuery 不支持 # 事件对象的属性
方法 描述
event.preventDefault() 阻止事件的默认动作。
event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
event.type 描述事件的类型。
event.target 触发该事件的 DOM 元素。
event.pageX 相对于文档左边缘的鼠标位置。
event.pageY 相对于文档上边缘的鼠标位置。
event.which 指示按了哪个键或按钮。
event.result 包含由被指定事件触发的事件处理器返回的最后一个值。
event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
  1. event.type
    返回事件类型,比如"click"

  2. event.target
    返回触发事件的元素

  3. event.relatedTarget
    在 mouseover 和 mouseout 中相当于 IE fromElement toElement

  4. event.pageX event.pageY
    光标位置

  5. event.which

    // 1 左键 2 中键 3 右键
    $("a").mousedown(
    function(e){
        alert(e.which)
    }
    )
    $("input").keyup(
    function(e){
        alert(e.which)
    }
    )
    
  6. event.metaKey
    封装

移除事件

  1. unbind
  2. one

模拟操作

$("#btn").trigger("click");
//同 $("#btn").click();

自定义事件(挺奇怪的)

$("#btn").bind("myClick",function(){...})
$("#btn").trigger("myClick");

传递数据
执行默认操作
triggerHandler()

其他用法

命名空间