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. Bootstrap登录样式

    样式1 <!--bs中所有的均应该包裹在其中.--> <div class="container"> <!-- row是珊栏系统的包裹容器--> ...

  2. AIM Tech Round 3 (Div. 2)D. Recover the String（贪心+字符串）

    D. Recover the String time limit per test 1 second memory limit per test 256 megabytes input standar ...

  3. PAT (Advanced Level) 1028. List Sorting (25)

    时间卡的比较死,用string会超时. #include<cstdio> #include<cstring> #include<cmath> #include< ...

  4. HDU 1828 POJ 1177 Picture

    矩形周长并 POJ上C++,G++都能过,HDU上C++过了,G++WA ,不知道为什么 #include<cstdio> #include<cstring> #include ...

  5. HTTP缓存控制总结

    引言 通过网络获取内容既缓慢,成本又高.大的相应需要在客户端和服务器之间多次往返通信,这拖延了浏览器可以使用和处理内容的时间,同时也增加了通信的成本.因此,缓存和重用以前获取到的资源的能力成为性能优化 ...

  6. php解决微信开发中用户昵称中的特殊字符与emoji表情写入mysql错误的问题

    解决办法:将3个字节的特殊字符与emoji表情替换掉即可. $nickname = preg_replace('/xE0[x80-x9F][x80-xBF]'.'|xED[xA0-xBF][x80-x ...

  7. PHP 删除非法UTF-8字符

    //reject overly long 2 byte sequences, as well as characters above U+10000 and replace with ? $some_ ...

  8. With PHP frameworks, why is the “route” concept used?

    http://programmers.stackexchange.com/questions/122190/with-php-frameworks-why-is-the-route-concept-u ...

  9. html5 canvas 五子棋游戏

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. C++数据结构之map----第一篇

    摘要: 1 对于非标准类型的map,map 只需要重载小于号就可以了 2map结构初始化 map<string,double> g_lr=map<string,double>( ...