jQuery事件

 

  常用事件

    1.blur()当失去焦点时触发。包括鼠标点击离开和TAB键离开。

    2.change()当元素获取焦点后，值改变失去焦点事触发。

    3.click()当鼠标单击时触发。

    4.dblclick()当鼠标双击时触发。

    5.error()　当javascript出错或img的src属性无效时触发。

    6.focus()当元素获取焦点时触发。注意：某些对象不支持。

    7.focusin()　当元素或其子元素获取焦点时触发，与focus()区别在于能够检测其内部子元素获取焦点的情况。

    8.focusout()　当元素或者其子元素失去焦点时触发，与focusout()区别在于能够检测内部子元素失去焦点的情况。　

    9.keydown()当键盘按下时触发。

    10.keyup()当按键松开时触发。

    11.mousedown()当鼠标在元素上点击后触发。

    12.mouseenter()当鼠标在元素上穿过时触发。mouseenter与mouseover的区别是，鼠标从mouseover的子元素上穿过时也会触发而mouseenter不会。

    13.mouseleave()当鼠标从元素上移出时触发。

    14.mousemove()　当鼠标在元素上移动时触发。.clientX和.clientY分别代表鼠标的X坐标与Y坐标。

    15.mouseout()当鼠标从元素上移开时触发。

    16.mouseover()当鼠标移入元素时触发。

    17.mouseup()当鼠标左键按下释放时触发。

    18.resize()当浏览器窗口大小改变时触发。$(window).resize();

    19.scroll()　当滚动条发生变化时触发。

    20.select()当input里的内容被选中时触发。

    21.submit()提交选中的表单。

    22.unload()当页面卸载时触发。　

  事件监听方法(了解)

    方式1

      bind

        绑定单个事件

          $tag.bind(event,data,function)

        绑定多个事件->同一回调函数

          $(selector).bind("click dbclick mouseout",data,function);

          利用空格分隔多事件

        绑定多个事件->多个回调函数

          $(selector).bind({event1:function, event2:function, ...})

          利用花括号进行指定事件->函数对

      适配版本

        根据官网解释，自从jquery1.7版本以后bind()函数推荐用on()来代替

    方式2

      live()

        向当前或未来的匹配元素添加一个或多个事件处理器

        用法如上

    方式3

      delegate()

    最新方案

      on()

        绑定单个事件

          $tag.on(event,data,function)

        绑定多个事件->同一回调函数

          $(selector).on("click dbclick mouseout",data,function);

          利用空格分隔多事件

        绑定多个事件->多个回调函数

          $(selector).on({event1:function, event2:function, ...})

          利用花括号进行指定事件->函数对

      off()

        解绑事件

          解绑单个

          解绑所有

    一次事件

      one(type,fun)

  事件常用属性

    target

      获取事件触发者DOM对象

    type

      事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click

    data

      事件调用时传入额外参数.

    result

      上一个事件处理函数返回的值

        $("p").click(function(event) {

        return "hey"

        });

        $("p").click(function(event) {

        alert( event.result );

        });

      注意:

        设置多个函数, 不会被覆盖

    pageX

      鼠标事件中, 事件相对于页面原点的水平/垂直坐标.

    pageY

      鼠标事件中, 事件相对于页面原点的水平/垂直坐标.

 

事件冒泡

  如果层级之间绑定了同一个事件.当里面子控件触发时,父控件会同时触发

  阻止事件冒泡

    event.stopPropagation();

 

阻止事件默认行为

  事件默认行为

    在开发中有一些标签默认它已经有了一些事件处理

    比如:

      当点击a标签时,它会自动跳转href指定的文件

      点击submit时,会自动提交表单.这些都属性事件的默认行为

    有时候我们不想要这种行为,可以通过事件对象把它给阻止掉.

  调用事件对象的preventDefault()方法

    event.preventDefault();

 

自动触发事件

  trigger

    $(':submit').trigger('click');

    注意

      1. 会触发事件的默认行为.

      2.触发事件时, 会造成事件冒泡

  triggerHandler

    $(':submit').triggerHandler('click');

    注意

      1. 不会触发事件的默认行为.

      2.触发事件时, 不会造成事件冒泡

 

事件委托

  一般事件委托产生在

    点击了子控件, 将事件统一传递给父控件处理

  原理

    当子控件点击事件触发后, 借助事件冒泡的原理, 会传递给父控件

      此时, 父控件只需要判断是否是指定的子控件即可

  场景

    新创建的DOM对象, 被添加到网页中后, 需要重新手动新增事件

 

自定义事件,命名空间,取消事件

  自定义事件

    事件的名称可以我们自己指定.但必须得要自己手动去触发.使用trigger()的方式

  命名空间

    在事件名称的后面可以加上"点"的符号,我们称为事件的命名空间

      相当于给事件加了一个标识

      作用,类似于css中的类

  取消事件

    我们可以使用off(事件名称)来去取消指定的事件