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. Java线程wait和sleep的区别

    Java中调用wait方法或者sleep方法都可以让线程进入waitint或者time-waiting状态,但是它们还是 有所不同的: wait是Object中的方法,而sleep则是Thread中的 ...

  2. 如何利用京东云的对象存储(OSS)上传下载文件

    作者:刘冀 在公有云厂商里都有对象存储,京东云也不例外,而且也兼容S3的标准因此可以利用相关的工具去上传下载文件,本文主要记录一下利用CloudBerry Explorer for Amazon S3 ...

  3. 随手记录-linux-Shellinabox插件

    Shellinabox 是一个利用 Ajax 技术构建的基于 Web 的远程Terminal 模拟器,也就是说安装了该软件之后,不需要开启 ssh服务,通过 Web 网页就可以对远程主机进行维护操作了 ...

  4. Tornado之笔记集合

    目录 一.基本使用 二.路由系统 三.视图函数 四.模版语言 五.cookie 六.CSRF 七.文件上传 八.异步非阻塞 九.RESTFUL 十.自定义组件 一.基本使用 1.最简使用 import ...

  5. spring boot之创建web项目并访问jsp页面

    1,创建spring boot的web项目 刚创建好的项目路径如下: 2,pom中要有下面的依赖 <dependency> <groupId>org.springframewo ...

  6. Scrum Meeting 12 -2014.11.18

    今天的任务都比较顺利,测试暂时还没发现特别的问题. Member Today’s task Next task 林豪森 与其他小组商讨整合问题 与其他小组商讨整合问题 宋天舒 测试项目功能实现 测试项 ...

  7. teamwork 2

    1.访问上学期项目团队,学习他们的得失. 上学期学长们有一个项目是学霸系统,在看过了学长们的相关博客后,我们可以感受到学长们确实花费了不少心思,也看到了许多值得我们学习的地方. 首先,学长们在项目开始 ...

  8. java实验1实验报告(20135232王玥)

    实验一 Java开发环境的熟悉 一.实验内容 1. 使用JDK编译.运行简单的Java程序 2.使用Eclipse 编辑.编译.运行.调试Java程序 二.实验要求 1.没有Linux基础的同学建议先 ...

  9. java第三次试验报告

    北京电子科技学院(BESTI) 实     验    报     告 课程:Java程序设计   班级:1353       姓名:郭皓  学号:20135327 成绩:             指导 ...

  10. CentOS7服务器上搭建Gitlab

    Gitlab如何搭建? 安装gitlab所需要的依赖 sudo yum install curl policycoreutils openssh-server openssh-clients 使ssh ...