使用jQuery在javascript中自定义事件
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中自定义事件的更多相关文章
- javascript中自定义事件
自定义事件:用户可以指定事件类型,这个类型实际上就是一个字符串,然后为这个类型的事件指定事件处理函数,可以注册多个事件处理函数(用数组管理),调用时,从多个事件处理函数中找到再调用. function ...
- jQuery文本框中的事件应用
jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- 详解javascript实现自定义事件
这篇文章主要为大家介绍了javascript实现自定义事件的方法,自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,javascript如何实现自定义事件,需要了解的朋友可以参考下 我 ...
- JavaScript中的事件循环机制跟函数柯里化
一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...
- javascript 中的事件机制
1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
- JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
随机推荐
- 详解YUV420数据格式
原文地址:http://www.cnblogs.com/azraelly/archive/2013/01/01/2841269.html 1. YUV简介 YUV定义:分为三个分量,“Y”表示明亮度( ...
- CHAPTER 38 Reading ‘the Book of Life’ The Human Genome Project 第38章 阅读生命之书 人体基因组计划
CHAPTER 38 Reading ‘the Book of Life’ The Human Genome Project 第38章 阅读生命之书 人体基因组计划 Humans have about ...
- php从入门到放弃系列-02.php基础语法
php从入门到放弃系列-02.php基础语法 一.学习语法,从hello world开始 PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器&qu ...
- sqlmap 进阶 (一)
0x1 命令 以此类推,可以具体自己研究有哪些参数,放在哪,有什么用,怎么用 参考:https://blog.csdn.net/bo_mask/article/details/76130848 0x2 ...
- NIO基本概念
1. IO和NIO的区别 IO 面向流(stream oriented) 阻塞(blocking io) 无 NIO 面向缓冲区(buffer orie ...
- CSS命名规范(规则)常用的CSS命名规则
CSS命名规范(规则)常用的CSS命名规则 CSS命名规范(规则)常用的CSS命名规则 头:header 内容:content/container 尾:footer ...
- Daily Scrum (2015/10/22)
今天我们发现了源代码并不能直接在PC上运行.通过学长我们了解到我们需要在服务器上链接上数据库才能正常运行,所以找了老师要了地址后进入了正常工作.由此我们的PM增添了一些新的任务,团队的总工作时间有所增 ...
- Scrum Meeting 11.05
成员 今日任务 明日计划 用时 徐越 代码移植 学习ListView+simpleAdapter,actionBar.阅读并修改前端代码 4h 赵庶宏 服务器配置,代码移植 构建后端数据库,进行完善 ...
- 团队博客作业Week4 --- 学霸网站--NABC
1.需求(Need) 伴随着经济的发展,科学技术取得了飞速的发展,互联网在各行各业的发展中取得了广泛的应用.随着这些事物的发展,我们每个人都会接触到相当庞大的数据.如何在这些数据中找到自己需要的,如何 ...
- web01-helloworld
新建一个Java web项目,名字为web01 在项目中新建一个servlet,名字为SimpleHello 修改doGet()方法,为: public void doGet(HttpServletR ...