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. BZOJ 3110：[Zjoi2013]K大数查询（整体二分）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3110 题意:-- 思路:其实和之前POJ那道题差不多,只不过是换成区间更新,而且是第k大不是第k小, ...

  2. zepto学习之路--数组去重和原生reduce

    好吧开始读zepto的源代码,最前面给处理trim和reduce的原生实现,感觉写的很紧凑,其中reduce写的有点晦涩,个人感觉还不错.主要zepto的作者是无分号党,看起了有点不习惯. 3 if ...

  3. thin-provisioning-tools

    公司我还用着squeeze,没这个包,下载编译:https://github.com/jthornber/thin-provisioning-tools.git

  4. Email：2017

    Hi, 2017,我对自己有一个小小的期望:写写文字,安安心. Enjoy a simple life. 如我所愿吧! 明年再来问候你.

  5. ssh密钥登录及远程执行命令

    以192.168.1.104作为客户机 以192.168.1.103作为服务器 使用密钥登录 创建密钥对 在SSH客户机创建用户秘钥对 ssh-keygen -t rsa 之后全回车即可 将会在~/. ...

  6. 浅谈Spring事务隔离级别

    一.Propagation (事务的传播属性) Propagation : key属性确定代理应该给哪个方法增加事务行为.这样的属性最重要的部份是传播行为.有以下选项可供使用:PROPAGATION_ ...

  7. 无源RS232转RS485（转）

    源:无源RS232转RS485 RS232  -485转换器主要包括了电源.232电平转换.485电路三部分.本电路的232电平转换电路采用了NIH232或者也可以直接使用MAX232集成电路,485 ...

  8. html5绘图

    html5绘图 这是我在绘图过程中遇到的问题,求助高手帮忙啊... 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  9. [SQLite]SQL语法

    SQLite常用SQL语句 创建表格 sql="CREATE TABLE IF NOT EXISTS MusicList (id integer primary key AutoIncrem ...

  10. KEIL MDK 查看代码量、RAM使用情况--RO-data、RW-data、ZI-data的解释（转）

    源:KEIL MDK 查看代码量.RAM使用情况--RO-data.RW-data.ZI-data的解释 KEIL RVMDK编译后的信息 Program Size: Code=86496 RO-da ...