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

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

这个是button

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

js:

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

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

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

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

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

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

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

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

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

function evtClick(){
//something
}

  

使用jQuery在javascript中自定义事件的更多相关文章

  1. javascript中自定义事件

    自定义事件:用户可以指定事件类型,这个类型实际上就是一个字符串,然后为这个类型的事件指定事件处理函数,可以注册多个事件处理函数(用数组管理),调用时,从多个事件处理函数中找到再调用. function ...

  2. jQuery文本框中的事件应用

    jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  3. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  4. 详解javascript实现自定义事件

    这篇文章主要为大家介绍了javascript实现自定义事件的方法,自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,javascript如何实现自定义事件,需要了解的朋友可以参考下 我 ...

  5. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

  6. javascript 中的事件机制

    1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...

  7. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

  8. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  9. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

随机推荐

  1. node.js主从分布式爬虫

    前言 前文介绍过用Python写爬虫,但是当任务多的时候就比较慢, 这是由于Python自带的http库urllib2发起的http请求是阻塞式的,这意味着如果采用单线程模型,那么整个进程的大部分时间 ...

  2. SICP读书笔记 3.2

    SICP CONCLUSION 让我们举起杯,祝福那些将他们的思想镶嵌在重重括号之间的Lisp程序员 ! 祝我能够突破层层代码,找到住在里计算机的神灵! 目录 1. 构造过程抽象 2. 构造数据抽象 ...

  3. Streamr助你掌控自己的数据(3)——教你在Streamr市场上发布数据

    博客说明 所有刊发内容均可转载但是需要注明出处. 教你在Streamr市场上发布数据 本系列文档主要介绍怎么通过Streamr管理自己的DATA,整个系列包括三篇教程文档,分别是:教你5分钟上传数据至 ...

  4. Spark概述及集群部署

    Spark概述 什么是Spark (官网:http://spark.apache.org) Spark是一种快速.通用.可扩展的大数据分析引擎,2009年诞生于加州大学伯克利分校AMPLab,2010 ...

  5. JavaScript学习(1)之JavaScript基础

    JavaScript学习(1)之JavaScript基础 由于工作原因,开发语言逐渐以JavaScript为主,所以,抽空学习了下JavaScript语法.等现阶段的工作稳定之后,陆续会分享下自己在学 ...

  6. 8.openldap mirrormode(主主同步)

    作者:yaoyao #MirrorMode双主模式 1.主机: ldap01.liuyao.com ldap02.liuyao.com 2.搭建LDAP服务 搭建过程省略,保证2台服务器部署配置一样即 ...

  7. mkswap命令详解

    基础命令学习目录首页 原文链接:http://blog.51cto.com/arlen99/1743841 mkswap命令用于在一个文件或者设备上建立交换分区.在建立完之后要使用sawpon命令开始 ...

  8. (转)一个简单的rest_framework demo

    转发:https://www.cnblogs.com/fu-yong/p/9100559.html models.py 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 from ...

  9. Oracle purge 用法介绍

    http://blog.csdn.net/indexman/article/details/27379597

  10. JAVA 构造函数 静态变量

    class HelloA { public HelloA() { System.out.println("HelloA"); } { System.out.println(&quo ...