jQuery事件触发和参数传递:

参考:http://www.jb51.net/article/36249.htm

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
</head>
<body style="margin:150px;">
<div id="div001">div001</div>
<div id="div002">div002</div>
<div id="div003">div003</div>
<div>
<button id="btn001">click me to log something </button>
<button id="btn002">click me to trigger btn001 function </button>
<button id="btn003">click me to trigger btn001 click use s,s,s</button>
<button id="btn004">click me to trigger btn001 click use e,s,s</button>
<button id="btn005">click me to trigger btn001 by trigger</button>
<button id="btn006">click me to trigger btn001 by click</button>
<button id="btn007">click me to trigger btn001 by trigger(type,data)</button>
<button id="btn008">click me to trigger btn001 by click(data,btn001fun)</button>
<button id="btn009">click me to trigger btn001 by click(data,function(){})</button>
<button id="btn010">click me to trigger btn001 by click(function(){})</button>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="b/js/bootstrap.js"></script>
<script type="text/javascript" src="js/index033.js"></script>
</body>
</html>
$(function() {
$('#btn001').click(btn001Click);
$('#btn002').click(btn002Click);
$('#btn003').click(btn003Click);
$('#btn004').click(btn004Click);
$('#btn005').click(btn005Click);
$('#btn006').click(btn006Click);
$('#btn007').click(btn007Click);
$('#btn008').click(btn008Click);
$('#btn009').click(btn009Click);
$('#btn010').click(btn010Click);
});
// 这样的情况下,如果是事件调用,a参数就是jQuery.Event;
function btn001Click(a, b, c) {
console.log('this is in btn001Click');
console.log(arguments.length);
for (var i = 0, len = arguments.length; i < len; i++) {
console.log((i + 1) + ':' + arguments[i]);
}
}
function btn002Click() {
// 这样只是一般的函数调用
btn001Click('a', 'b', 'c');
}
function btn003Click() {
// 这样没有反应,相当于重新给btn001赋予click事件,但是还没有函数;
$('#btn001').click('a', 'b', 'c');
// 但是绑定之后点击按钮会出现问题;Uncaught TypeError: undefined is not a function
}
function btn004Click() {
// 这样会报错,e is not defined
// $('#btn001').click(e, 'b', 'c');
}
function btn005Click() {
// 可以触发事件
$('#btn001').trigger('click');
}
function btn006Click() {
// 可以触发事件
$('#btn001').click();
}
function btn007Click() {
// 这样可以正常调用,并且可以把参数传进去,第一个参数还是jQuery.Event
// 只能传进去一个参数,下面的情况只能把a传进去;而且这样jQuery.Event.data是null;
$('#btn001').trigger('click', 'a', 'b', 'c');
// 这样会报异常, e is not defined
// $('#btn001').trigger('click',[e,'a','b','c']);
}
function btn008Click() {
console.log('btn008Click');
// 这样只是进行了绑定,不是进行执行;如果初始化的时候绑定过事件,那么这样就绑定两个事件了;
// 可以用a.data来查看是哪一个事件执行了;
$('#btn001').click([ 'a', 'b', 'c' ], btn001Click);
// 如果绑定多个参数,绑定之后点击按钮会出现问题;Uncaught TypeError: undefined is not a function
// 只能传递一个对象,在btn001Click中使用jQuery.Event.data来获取参数;
}
function btn009Click() {
console.log('btn009Click');
// 只是进行了绑定,必须点击btn001才可以触发;
$('#btn001').click([ 'a', 'b', 'c' ], function(a, b) {
// 只传递一个对象,可以保证不报错了,在函数中使用a.data来获取参数;
console.log('this is anonymous function');
});
}
function btn010Click() {
console.log('btn010Click');
$('#btn001').click(function() {
console.log('this is anonymous function');
});
}

jQuery事件触发和参数传递的更多相关文章

  1. jQuery事件触发前后进行其他的操作

    <!-- 事件触发前后执行其他操作的三种方式: 多适用于:公众号的订阅,有订阅的可以收到文章,没有订阅的收不到文章. --> <!DOCTYPE html> <html ...

  2. HTML Select 标签选择后触发jQuery事件代码实例

    页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...

  3. jquery trigger 触发事件小计 -- 关于a标签

    jquery -- trigger触发执行事件方法虽然好用,偶尔也会出些小问题. 在最近得一个项目中需要触发a标签的点击事件时,我就遇到了点小问题.我很想当然的写层这样:$("a" ...

  4. jquery 事件 多次绑定,多次触发,怎么清除历史绑定事件

    Jquery在处理事件的时候有时候会遇到预想不到的结果 如下 <a id="link_foo">Foo</a> <script type=" ...

  5. 解决jQuery中dbclick事件触发两次click事件

    首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...

  6. 第77天:jQuery事件绑定触发

    一.元素操作 1. 高度和宽度 $(“div”).height(); // 高度 $(“div”).width(); // 宽度 .height()方法和.css(“height”)的区别: 返回值不 ...

  7. js进阶 12-14 jquery的事件触发函数是哪两个

    js进阶 12-14 jquery的事件触发函数是哪两个 一.总结 一句话总结:trigger和triggerHandler 1.trigger传额外参数时候的注意事项是什么? 注意样例中是三个参数 ...

  8. jQuery事件绑定,解绑,触发

    事件绑定 1.bind(type,[data],fn) --type: 含有一个或多个事件类型的字符串,由空格分隔多个事件.比如"click"或"submit" ...

  9. Javascript和jquery事件--点击事件和触发超链接

    前面的不过是一些基础的知识,真正的一些事件还是有点不同.还有一些命名空间的问题.不过现在ie也开始接受W3C标准,而且平时开发也很少考虑ie了,一些事件就不考虑ie了. 点击事件--click 大部分 ...

随机推荐

  1. 对于使用了SSH造成的中文乱码问题,4大解决方法

    修改struts2.xml struts2.xml 中添加 <constant name="struts.i18n.encoding" value="UTF-8&q ...

  2. TOCContro控件

    TOCControl控件使用的是用伙伴控件中的数据地图,它控制图层是否在伙伴控件空显示以及和伙伴控件在符号上保持一致,TOCControl为用户提供了一个交互式的环境,如果TOCControl控件的伙 ...

  3. ionic常用命令记录

    npm install -g ionic //安装ionic ionic lib update //更新www/lib/ionic 目录的文件,如有项目中有bower,此命令会运行bower upda ...

  4. dedecms如何修改共0页/0条记录为英文版?

    近日,在测试一个网站功能的时候,发现在搜索结果的下面为中文的“共0页/0条记录”,但客户的网站为英文版,所以我们需要将搜索的结果信息也要显示为英文,好了,我们开始动手修改dedecms的文件,以达到我 ...

  5. Varnish Cache

    1 Varnish简介 Varnish是高性能且开源的反向代理服务器和HTTP加速器(cache server).其开发者Poul-Henning Kamp是FreeBSD核心的开发人员之一.Varn ...

  6. Cocos2dx 3.1.1 学习笔记整理(4):事件监听与Action的初步使用

    项目忙,趁着刚才有点空,看了下触摸事件在新版本中怎么实现,遇到问题都是去:cocos2d-x-3.1.1\tests\cpp-tests\Classes下面找的,里面都是一些小例子. 首先新的CCNo ...

  7. Linux 分区和目录

    [1. 分区与目录概念理解]  Linux的分区是物理上的概念,就像我们把一块硬盘分成C:,D:,E:三个区一样,物理上将存储空间分开 Linux的目录是逻辑上的概念,Linux的目录树实际上是一个分 ...

  8. [Unity UGUI]UGUI提供多种不同的解决方案

    现代游戏和应用程序经常需要支持各种不同的屏幕分辨率,特别是UI布局需要能够适应.UI系统在统一中包括各种工具来实现此目的,可以以多种方式组合在一起. 在这个小节我们将使用一个简单的案例研究和观察和比较 ...

  9. MFC中PeekMessage的使用,非阻塞消息循环

    在程序设计的时候经常要进行一个数据循环,比如播放音乐需要循环的向缓冲区里面写入数据,在这个时候比较通用的方法是建立一个线程做事情,但是有时候不想创建多线程就可以使用微软提供的PeekMessage方法 ...

  10. iOS 数字每隔3位添加一个逗号的

    +(NSString *)countNumAndChangeformat:(NSString *)num { ; long long int a = num.longLongValue; ) { co ...