zoukankan      html  css  js  c++  java
  • jQuery事件触发和参数传递

    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');
        });
    }
  • 相关阅读:
    websocket介绍
    阿里支付接口
    王爽 汇编 检测点 14.2
    如何用汇编写出一个心形图像
    王爽 汇编 实验12
    王爽 汇编 实验11
    王爽 汇编 实验10
    王爽汇编 检测点10.5
    二元选择排序
    螺旋矩阵
  • 原文地址:https://www.cnblogs.com/stono/p/4949172.html
Copyright © 2011-2022 走看看