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. Size Balanced Tree（SBT） 模板

    首先是从二叉搜索树开始,一棵二叉搜索树的定义是: 1.这是一棵二叉树: 2.令x为二叉树中某个结点上表示的值,那么其左子树上所有结点的值都要不大于x,其右子树上所有结点的值都要不小于x. 由二叉搜索树 ...

  2. [Unity]C#.数据类型总结

    C#中的数据类型 [TOC] 通用类型系统 C#中,变量是值还是引用仅取决于数据类型 所有的数据类型都是对象.因为它们具有自己ide方法和属性 int int_value = 101; //调用*in ...

  3. swfobject.embedSWF属性与用法

    JS+flash的焦点幻灯片既能大方得体的展示焦点信息,也能美轮美奂的展示图片,越来越多的网站使用这种焦点幻灯的表现方法.很多童鞋在下载这方面的素材代码的时候,往往会因为展示出来的是flash,觉得难 ...

  4. CodeForces 616A Comparing Two Long Integers

    水题 #include<cstdio> #include<cstring> #include<algorithm> using namespace std; +; ...

  5. 结合Pnotify插件--app-jquery-notify.js

    $.NOTIFY = { showSuccess : function (title, text, context) { var opt = { title : title, text : text, ...

  6. VS2010与SVN

    http://blog.sina.com.cn/s/blog_4fe44775010182yl.html 在VS2010中使用SVN,必须先安装SVN的客户端,再安装VisualSVN(SVN的插件) ...

  7. (简单) POJ 1961 Period，扩展KMP。

    Description For each prefix of a given string S with N characters (each character has an ASCII code ...

  8. CSS中link与import的区别

    一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/st ...

  9. 【转】20条Linux命令面试问答

    问:1 如何查看当前的Linux服务器的运行级别? 答: ‘who -r’ 和 ‘runlevel’ 命令可以用来查看当前的Linux服务器的运行级别. 问:2 如何查看Linux的默认网关? 答: ...

  10. java实现——009Fibonacci数列

    1.循环 public class T009 { public static void main(String[] args){ System.out.println(fibonacci(3)); } ...