jQuery(三)事件部分

jQuery 事件部分

1. 鼠标事件

.click()/.dbclick()

  • $ele.click()

    绑定\$ele元素,不带任何参数一般是用来指定触发一个事件

    1
    2
    3
    4
    5
    6
    7
    <div id="test">点击触发<div>
    $("ele").click(function(){
    alert('触发指定事件')
    })
    $("#test").click(function(){
    $("ele").click()
    });
  • $ele.click(handler(eventObject))
    绑定\$ele元素,每次\$ele元素触发点击操作会执行回调 handler 函数

    1
    2
    3
    4
    <div id="test">点击触发<div>
    $("#test").click(function() {
    //this指向div元素
    });
  • $ele.click([eventData], handler(eventObject))
    使用与上述方法一致,可以接受一个数据参数,为了解决不同作用域下数据传递的问题

    1
    2
    3
    4
    5
    <div id="test">点击触发<div>
    $("#test").click(233,function(e) {
    //this指向div元素
    //e.data=>233传递数据
    });

.mousedown()/mouseup()

  • $ele.mousedown()

    参考.click()方法

  • $ele.mousedown(handler(eventObject))

    参考.click()方法

  • $ele.mousedown([eventData], handler(eventObject))

    参考.click()方法

.mousemove()

  • $ele.mousemove()

    参考.click()方法

  • $ele.mousemove(handler(eventObject))

    参考.click()方法

  • $ele.mousemove([eventData], handler(eventObject))

    参考.click()方法

.mouseover()/.mouseout()

  • $ele.mouseover()

    参考.click()方法

  • $ele.mouseover(handler(eventObject))

    参考.click()方法

  • $ele.mouseover([eventData], handler(eventObject))

    参考.click()方法

.mouseenter()/.mouseleave()

  • $ele.mouseenter()

    参考.click()方法

  • $ele.mouseenter(handler(eventObject))

    参考.click()方法

  • $ele.mouseenter([eventData], handler(eventObject))

    参考.click()方法

  • .mouseenter()与mouseleave()的区别

    mouseenter()事件只会绑定到它的元素上被调用,而不会将事件冒泡到上层节点。反之,mouseleave()会将事件冒泡到上层节点。

.hover()

  • $(selector).hover(handlerIn, handlerOut)

    • handlerIn(eventObject):当鼠标指针进入元素时触发执行的事件函数
    • handlerOut(eventObject):当鼠标指针离开元素时触发执行的事件函数

.focusin()/.focusout()

  • $ele.focusin()

    参考.click()方法

  • $ele.focusin(handler(eventObject))

    参考.click()方法

  • $ele.focusin([eventData], handler(eventObject))

    参考.click()方法

2. 表单事件

.focus()/.blur()

  • $ele.focus()

    参考.click()方法

  • $ele.focus(handler(eventObject))

    参考.click()方法

  • $ele.focus([eventData], handler(eventObject))

    参考.click()方法

  • .focusin()与focus()的区别

    .focusin()支持冒泡事件的处理.focus()不支持冒泡事件的处理,只支持元素本身产生的事件

.change()

  • input元素

    监听value值的变化,当有改变时,失去焦点后触发change事件。对于单选按钮和复选框,当用户用鼠标做出选择时,该事件立即触发。

  • select元素

    对于下拉选择框,当用户用鼠标作出选择时,该事件立即触发

  • textarea元素

    多行文本输入框,当有改变时,失去焦点后触发change事件

.select()

当textarea或文本类型的input元素中的文本被选中时,会触发select()事件,但此方法只适用于<input>元素和<textarea>元素

  • $ele.select()

    参考.click()方法

  • $ele.select(handler(eventObject))

    参考.click()方法

  • $ele.select([eventData], handler(eventObject))

    参考.click()方法

.submit()

通过在\

元素上绑定submit事件,监听用户提交表单的行为,包括<input type="submit"><input type="image"><button type="submit">以及当某些表单元素获取焦点时,敲击Enter

  • $ele.submit()

    参考.click()方法

  • $ele.submit(handler(eventObject))

    参考.click()方法

  • $ele.submit([eventData], handler(eventObject))

    参考.click()方法

3. 键盘事件

.keydown()/keyup()

按下和松开键盘分别触发keydown()和keyup()事件,并发送到具有焦点的元素上,由于表单元素总能获取焦点,所以对于此事件类型表单元素是最合适的。

  • $ele.keydown()

    参考.click()方法

  • $ele.keydown(handler(eventObject))

    参考.click()方法

  • $ele.keydown([eventData], handler(eventObject))

    参考.click()方法

.keypress()

  • $ele.keypress()

    参考.click()方法

  • $ele.keypress(handler(eventObject))

    参考.click()方法

  • $ele.keypress([eventData], handler(eventObject))

    参考.click()方法

  • .keypress()事件与keydown()/keyup()事件的区别

    keypress事件主要用来接收字母,数字等ANSI字符,而keydown和keyup事件过程可以处理任何不被keypress识别的击键

4. 事件的绑定与解绑

.on()

  • 基本用法
    $("#elem").click(function(){});
    $("#elem").on('click', function(){});

  • 多个事件绑定同一个函数
    ("#elem").on("mouseover mouseout", function(){});

  • 多个事件绑定不同函数

    1
    2
    3
    4
    ("#elem).on({
    mouseover: function(){},
    mouseout: function(){}
    });
  • 将数据传递到处理程序

    1
    2
    3
    4
    5
    6
    function greet(event) {
    alert("Hello " + event.data.name);//Hello Xiaoming
    }
    $("button").on("click", {
    name: 'mike'
    }, greet);
  • 高级用法
    $("div").on("click","p",fn)
    如果提供了第二参数’p’,那么事件在往上冒泡的过程中遇到了选择匹配的’p’元素,将会触发事件回调函数

.off()

  • 绑定2个事件
    $("elem").on("mousedown mouseup", fn)

  • 删除一个事件
    $("elem").off("mousedown")

  • 删除所有事件
    $("elem").off("mousedown mouseup")

  • 快捷方式删除所有事件
    $("elem").off()

5. 事件对象

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁

.event.target

代表当前触发事件的元素,而$(this)是冒泡过程中的当前DOM元素

.event.type

获取事件类型

.event.pageX/event.pageY

获取鼠标当前相对于页面的坐标

.event.preventDefault()

阻止默认行为

.event.stopPropagation()

阻止事件冒泡

.event.which

获取在鼠标单击时,单击的是鼠标的哪个键

.event.currentTarget

在事件冒泡过程中的当前DOM元素,等同于this

6. 自定义事件

.trigger()

根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

.triggerHandler()

触发通过 jQuery 绑定的事件处理函数,而不触发原生的事件,使用.triggerHandler() 来代替

  • .trigger()事件与triggerHandler()事件的区别
    1. triggerHandler不会触发浏览器的默认行为,.triggerHandler( “submit” )将不会调用表单上的.submit()
    2. .trigger() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素
    3. 使用 .triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的,那么它就不会进行任何处理
    4. 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回 undefined