zoukankan      html  css  js  c++  java
  • jQuery 事件绑定方法(bind hover toggle live.... )、删除事件方法(unbind, die)及 事件对象

    事件绑定方法:

    1.<type>(function)

    $("button").click(function(){
        ...
    });

    2.bind(map)

    $("input[type='text']").bind({
        focus: function(){
            ...
        },
        blur: function(){
            ...
        }
    })

    3.bind(type, [data,] function)

      注:如果没有第二个参数,则与第一个绑定事件方法相同

    $("button").bind(
        "click",
        {
             arg1: "2012"
             arg2: "07"
        },
        function(event){
            ...
            event.data.arg1
            ...
        }
    )

    4.one(type, [data,] function)

      绑定事件只执行一次,执行完之后绑定失效

    5.hover(over, out)

      注:两个参数为鼠标盘旋在对象上方和离开时调用的函数

    $("div").hover(
        function(){
            ...
        },
        function(){
            ...
        }
    )

    6.toogle(function1, function2, ...)

      该方法作用是单击对象时循环调用函数列表中的函数

    7.live(type, function)

      该方法为整个页面生命周期内的某一类对象绑定一个事件处理程序

    事件删除方法:

    1.unbind([type] [,data])

      该方法删除匹配对象的事件处理程序,与bind方法对应,可以删除所有以bind方式绑定的自定义事件处理程序。如果所有参数都省略,将删除匹配对象的所有事件及事件处理程序;如果只有第一个type参数,将删除指定事件类型的时间处理程序。如:

    $("#btn").unbind("click");

      如果同时指定两个参数,将删除指定事件类型的指定事件处理程序。如,btn绑定以下函数:

      var btnClick = function(){...};

      则删除btn的该事件处理程序的代码为:

    $("#btn").unbind("click", btnClick);

    2.die([tyoe] [,function])
      该方法与live方法对应,用于解除live注册的自定义事件。参数与unbind方法类似。

    模拟操作:

      模拟操作就是模拟用户触发相应的事件,如一个事件触发另一个事件。

    1.<type>()

      如触发一个按钮的单击事件:

    $("button").click();

    2.trigger(type [,data])

      如触发一个按钮的单击事件:

    $("button").trigger("click");

    3.triggerHandler(type [,data])

      与 trigger 方法不同:

      该方法只触发对象集合中的第一个元素的事件处理程序。且返回的是事件处理程序的返回值,而不是可链接的jQuery对象。该方法不会触发事件冒泡

    jQuery事件对象:

    1.事件对象的属性

      type:获得该对象的事件类型,如click, focus, mouseover等

      target:获得事件触发者(DOM对象)

      data:获得调用事件时传入的额外参数集合

      relatedTarget:获得触发鼠标事件的DOM元素

      currentTarget:获得当前DOM元素(等同于this关键字)

      pageX/pageY:获得鼠标事件中,鼠标光标相对于页面左上角的位置

      result:获得上一个事件处理函数返回的值

      timeStamp:获得事件发生的时间戳

    2.事件对象的方法

    函数名

    说明 例子
    preventDefault() 取消元素事件的默认动作
    例如:
    对于超级链接a来说,有href属性,那么在点击a的时候就会导航至href所指向位置.我们在a的click事件中,调用本方法,就不会导航到指定位置
    //取消事件默认动作
    $("a").bind("click", function (e) {
        e.preventDefault(); 
    });
    isDefaultPrevented() 是否调用过preventDefault()方法
    e.isDefaultPrevented()
    stopPropagation() 取消事件冒泡
    e.stopPropgation();
    isPropagationStopped() 是否调用过stopPropagation()方法
    e.isPropagationStopped()
    stopImmediatePropagation() 取消执行该元素该事件处理函数的后续事件处理函数,
    并取消事件冒泡
    $("a").bind("click", function (e) {
        e.stopImmediatePropagation();
    });
    
    //不会被执行到
    $("a").click(function () {
        alert("我被点击了");
    });
    isImmediatePropagationStopped() 是否调用过stopImmediatePropagation()方法
    $("a").bind("click", function (e) {
        e.stopImmediatePropagation();
        alert(e.isImmediatePropagationStopped());
    });

    例如:要在鼠标移动时获取鼠标的位置:

    $(document).mouseover(function(event){
        var msg = event.pageX + " " + event.pageY;
        alert(msg);
    });
  • 相关阅读:
    自定义函数
    内置函数
    炸裂函数explode
    -bash:ls:command not found,执行命令总是报找不到
    函数
    C#的lock用法
    获取客户端Ip地址方法
    Grunt基础
    常用Sql
    HandleBars
  • 原文地址:https://www.cnblogs.com/lihuiyy/p/2595357.html
Copyright © 2011-2022 走看看