• jQuery基础教程之如何注册以及触发自定义事件


    在不知道jquery中可以注册自定义事件之前,经常看到很多牛人写的插件中,有用到:
    bind(“originevent”,function(){…});
    由于当时不知道jquery中可以自定义事件,所以看得一头雾水,不知所谓。
    javscript中的常用的事件有如下的一些类型:
    blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,
    mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,和error等等
    那么如何注册以及触发我们自己自定的事件呢?

    jquery中提供了两种方法可以绑定自定义事件:
    bind()one()
    而绑定的自定义事件的触发,必须得用jquery中的
    trigger()方法才能触发。
    下面来看两个在线DEMO,分别是用bind和one方法绑定自定义事件以及触发自定义事件:
    首先是用bind()方法:
    看代码:

    01 <h3>梦三秋博客</h3>
    02 <input type="button" value="点击我触发H3绑定的自定义事件" id="demo">
    03 <script>
    04 $(function(){
    05     $("h3").bind("test",function(){
    06         alert($(this).text());
    07     });
    08     $("#demo").click(function(){
    09         $("h3").trigger("test");
    10         $("h3").trigger("test");
    11     });
    12 });
    13 </script>

    看上面的代码,我们首先给h3标签用bind()方法绑定了一个自定义的事件“test”,触发这个事件会弹出对话框,显示h3中的文本内容。之后又给id为“demo”的按钮绑定了单击事件,在这个单击事件中,我们用了两次trigger方法来触发自定义事件,当我们点击这个按钮之后会触发两次h3标签绑定的自定义事件,结果就会弹出两次对话框。下面看在线DEMO:

     

    然后大家再看一下用one()方法注册和触发自定义事件:

    01 <h3>梦三秋博客</h3>
    02 <input type="button" value="点击我触发H3绑定的自定义事件" id="demo">
    03 <script>
    04 $(function(){
    05     $("h3").one("test",function(){
    06         alert($(this).text());
    07     });
    08     $("#demo").click(function(){
    09         $("h3").trigger("test");
    10         $("h3").trigger("test");
    11     });
    12 });
    13 </script>

    看上面的代码,我们首先给h3标签用one()方法绑定了一个自定义的事件“test”,触发这个事件会弹出对话框,显示h3中的文本内容。之后又给id为“demo”的按钮绑定了单击事件,在这个单击事件中,我们用了两次trigger方法来触发自定义事件,但是当我们点击这个按钮之后只会触发一次h3标签绑定的自定义事件,结果就只会弹出一次对话框,因为我们的自定义事件是用jquery中的one()方法绑定的

    原文来自:http://www.skygq.com/2011/02/15/jquery%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%E4%B9%8B%E5%A6%82%E4%BD%95%E6%B3%A8%E5%86%8C%E4%BB%A5%E5%8F%8A%E8%A7%A6%E5%8F%91%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/

    作者:沐雪
    文章均系作者原创或翻译,如有错误不妥之处,欢迎各位批评指正。本文版权归作者和博客园共有,如需转载恳请注明。
    如果您觉得阅读这篇博客让你有所收获,请点击右下方【推荐】
    找一找教程网-随时随地学软件编程 http://www.zyiz.net/

  • 相关阅读:
    【Linux软件安装】
    Java IO(七)ByteArrayInputStream 和 ByteArrayOutputStream
    Java IO(六) ObjectInputStream 和 ObjectOutputStream
    Java IO(四) InputStream 和 OutputStream
    Java IO(五)字节流 FileInputStream 和 FileOutputStream
    Java IO(三)FileDescriptor
    Java IO(二)File
    Java IO(一)概述
    Java中的集合(十五) Iterator 和 ListIterator、Enumeration
    Java中的自动装箱拆箱
  • 原文地址:https://www.cnblogs.com/puzi0315/p/2658201.html
Copyright © 2020-2023  润新知