zoukankan      html  css  js  c++  java
  • jQuery常用事件方法详解

    jQuery事件

    ready(fn)|$(function(){})

    ((document).ready(function(){})可以简写成)(function(){});

    当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

      这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
      简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
      
      有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字,并因此可以不再担心命名冲突而放心地使用$别名。

    • 请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发+$(document).ready()事件。
    • 可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。

    jQuery.on()

    on()函数用于为指定元素的一个或多个事件绑定事件处理函数。

    此外,你还可以额外传递给事件处理函数一些所需的数据。

    从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。

    on()支持直接在目标元素上绑定事件,也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下,即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。

    • 该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
    • 要删除通过on()绑定的事件,请使用off()函数。如果要附加一个事件,只执行一次,然后删除自己,请使用one()函数。
    • 该函数属于jQuery对象(实例)。

    语法

    用法一:

    • jQueryObject.on( events [, selector ] [, data ], handler )
      用法二:

    • jQueryObject.on( eventsMap [, selector ] [, data ] )

    参数

    参数 描述
    events String类型一个或多个用空格分隔的事件类型和可选的命名空间,例如"click"、"focus click"、"keydown.myPlugin"。
    eventsMap Object类型一个Object对象,其每个属性对应事件类型和可选的命名空间(参数events),属性值对应绑定的事件处理函数(参数handler)。
    selector 可选/String类型一个jQuery选择器,用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略,则表示当前元素自身绑定事件(实际触发者也可能是后代元素,只要事件流能到达当前元素即可)。
    data 可选/任意类型触发事件时,需要通过event.data传递给事件处理函数的任意数据。
    handler Function类型指定的事件处理函数。

      关于参数events中可选的命名空间,请参考最下面的示例代码。

      关于参数selector,你可以简单地理解为:如果该参数等于null或被省略,则为当前匹配元素绑定事件;否则就是为当前匹配元素的后代元素中符合selector选择器的元素绑定事件。

      参数handler中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略,则this指向当前匹配元素(也就是该元素)。

      on()还会为handler传入一个参数:表示当前事件的Event对象。

      参数handler的返回值与DOM原生事件的处理函数返回值作用一致。例如"submit"(表单提交)事件的事件处理函数返回false,可以阻止表单的提交。

      如果事件处理函数handler仅仅只为返回false值,可以直接将handler设为false。

    返回值

      on()函数的返回值为jQuery类型,返回当前jQuery对象本身。

      如果传递了selector参数,那么on()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数,而是为它们的后代元素中符合选择器selector参数的元素绑定事件处理函数。on()函数并不是直接为这些后代元素挨个绑定事件,而是委托给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制,当后代元素selector触发事件时,该事件会在事件冒泡中传递给其所有的祖辈元素,当事件流传递到当前匹配元素时,jQuery会判断是哪个后代元素触发了事件,如果该元素符合选择器selector,jQuery就会捕获该事件,从而执行绑定的事件处理函数。

      通俗易懂地说,如果我们希望给页面上所有的

    标签绑定click事件处理函数,我们可以在每个P标签上直接分别绑定click事件处理函数。例如:

    // 为所有P元素分别绑定click事件处理函数handler
    $("p").on("click", handler);
    

      我们也可以在这些P标签的任意一个公共祖辈元素上绑定事件委托机制,利用DOM的事件冒泡机制来统一委托处理。当我们触发了某个元素的click事件,JS会依次通知该元素及其"父辈"元素、"爷爷辈"元素……直到最顶部的document对象为止,如果这些元素上绑定了click事件处理函数就会依次执行。

    // 在body元素上绑定click事件处理函数handler,如果这个click事件是由其后代的P元素触发的,就执行handler
    $(document.body).on("click", "p", handler);
    

      在这里的示例中,事件委托机制就是,我们不为每个P元素直接绑定click事件处理函数,而是委托给其某个公共的祖辈元素(此处示例中为document.body),"告诉"他:如果接收到了click事件触发通知,并且这个click事件是由我们这些P元素其中之一触发的,就执行祖辈元素上委托绑定的事件处理函数。

      注意:"focus"、"blur"等部分事件不支持冒泡,使用事件委托机制将无效。不过,他们一般也有对应的支持冒泡的事件。例如与"focus"对应的"focusin",与"blur"对应的"focusout"。此外,我们也可以使用event.stopPropagation()方法,让当前触发的事件停止冒泡。
      

    jQuery.click

    click([[data],fn]):触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。

    参数 类型 描述
    fn Function 在每一个匹配元素的click事件中绑定的处理函数。
    [data],fn String,Function data:click([Data], fn) 可传入data供函数fn处理。
    fn:在每一个匹配元素的click事件中绑定的处理函数。
    //触发页面内所有段落的点击事件
    $("p").click();
    
    //将页面内所有段落点击后隐藏。
    jQuery 代码:
    $("p").click( function () { $(this).hide(); });
    

    jQuery.data()

      data()函数用于在当前jQuery对象所匹配的所有元素上存取数据。
    通过data()函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将不复存在。

      该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据,请使用removeData()函数。

    语法

    • jQueryObject.data( [ key [, value ] ])

      以指定的键名key存取数据。如果指定了value参数,则表示以键名key存放值为value的数据;如果没有指定value参数,则表示读取之前以键名key存放的数据;如果没有指定任何参数,则以对象形式返回之前存储的所有数据。

    • jQueryObject.data( object )

      以对象形式同时传入任意多个key-value形式的数据,对象的每个属性就是键名key,属性值就是value。

      注意:data()函数的所有"存储数据"操作针对当前jQuery对象所匹配的每一个元素;所有"读取数据"操作只针对第一个匹配的元素。

    参数 描述
    key 可选/String类型指定的键名字符串。
    value 可选/任意类型需要存储的任意类型的数据。
    object Object类型指定的对象,用于封装多个键值对,同时存储多项数据。

    返回值
      data()函数的返回值是任意类型,返回值的类型取决于当前data()函数执行的是"存储数据"操作还是"读取数据"操作。

      如果data()函数执行的是"存储数据"操作,则返回当前jQuery对象本身;如果是"读取数据"操作,则返回读取到的数据。

      如果当前jQuery对象匹配多个元素,读取数据时,data()函数只以其中第一个匹配的元素为准。

      如果执行data(key)函数(仅传入一个参数key)时找不到相应的数据,则返回undefined。如果执行data()函数(不带任何参数)时找不到相应的数据,则返回一个空的对象(没有任何属性)。

    jQuery.submit()

    submit([[data],fn]):当提交表单时,会发生 submit 事件。该事件只适用于表单元素。

    参数

    参数 类型 描述
    fn Function 在每一个匹配元素的submit事件中绑定的处理函数。
    [data],fn String,Function data:submit([Data], fn) 可传入data供函数fn处理。
    fn:在每一个匹配元素的submit事件中绑定的处理函数。
    //提交本页的第一个表单:
    $("form:first").submit();
    

    如果你要阻止表单提交:

    jQuery 代码:
    $("form").submit( function () {
      return false;
    } );
    
  • 相关阅读:
    python中F/f表达式优于format()表达式
    java8新特性-foreach&lambda
    Java实现多线程的四种方式
    Java中的字符串常量池,栈和堆的概念
    java对象只有值传递,为什么?
    面向对象和面向过程程序设计理解及区别
    String对象为什么不可变
    mybatis_plus插件——生成器
    基于grpc的流式方式实现双向通讯(python)
    Django使用DataTables插件总结
  • 原文地址:https://www.cnblogs.com/yangliguo/p/7562016.html
Copyright © 2011-2022 走看看