zoukankan      html  css  js  c++  java
  • 使用jQuery在javascript中自定义事件

      js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦。jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的各种传递。

      例如,我要点击一个button,现在要将这个点击事件抛出来,从其他任何想要的地方去接收;

    这个是button

    <button name="btn" onclick="clickbtn()">按钮</button>
    

     js:

    1 var btn=$("button");
    2 btn.bind("evtClick",function(evt,v1,v2){alert("success:"+v1+v2);});
    3 function clickbtn(){    
    4     btn.trigger("evtClick",["value1","value2"]);
    5 }

    第一行,通过jQuery获得这个dom元素对象
    第二行,添加一个事件监听evtClick,并对其实现处理方法

    第三行,在clickbtn中添加事件触发,事件的名字叫做“evtClick”,并且传递一个数组存放所有的传递的参数,第二行,事件处理部分就按照这个传递的规则实现

    几行代码就实现了事件抛出机制。当然,这样写或许再少一行代码:

    1 $("button").bind("evtClick",function(evt,v1,v2){alert("success:"+v1+v2);});
    2 function clickbtn(){    
    3     $("button");.trigger("evtClick",["value1","value2"]);
    4 }

     循环创建多个div,抛出事件到外部对象:

     1      for (var i=0; i < 10; i++) {
     2          var myJimmy = new Jimmy(1,"www.bai1du.com"+i,"jimmychu");
     3         var btn=myJimmy.createButton();
     4         btn.type="button";
     5         btn.value="按钮"+i;
     6         body.appendChild(btn);
     7         var btnJQuery=jQuery(btn);//所有需要使用jquery的dom必须要用jQuery包装起来
     8         (function(btn,obj){
     9             btn.click(function(){
    10                 btn.trigger("evtClick",[obj.url]);
    11             });
    12         })(btnJQuery,myJimmy);
    13         btnJQuery.bind("evtClick",function(evt,v1){alert(v1);});//可以写到外部调用该对象的类里边,实现事件的传递
    14     }

     注意:jQuery中事件名称不能与函数方法名称相同,如果相同则不能进入方法

    如上述触发的事件为“evtClick”,不能有如下的函数

    function evtClick(){
        //something      
    }
    

      

  • 相关阅读:
    交换机实验
    数据模型
    数据库数据的填充规则
    RadComboBox的用法
    数据库中join的用法(on、left。right)
    创建dataTable
    DataSet导出Excel,比以往的方法导出的Excel外观更加好看
    图片下载
    IHTMLDocument2的所有成员、属性、方法、事件[转]
    通过按钮控制左右滚动
  • 原文地址:https://www.cnblogs.com/JimmyBright/p/4416065.html
Copyright © 2011-2022 走看看