zoukankan      html  css  js  c++  java
  • jQuery事件之绑定事件

    语法:

    $(selector).bind(eventType[, eventData], handler(eventObject));

    参数解释:

    <li>eventType(String): 一个包含一个或多个DOM事件类型的字符串, 比如"click"或"submit"或自定义事件的名称。</li>
    <li>eventData(Ojbect): 可选,它包含的数据键值对映射将被传递给时间处理程序</li>
    <li>handler(function): 每当时间触发时执行的函数</li>
    

    作用:为每一个匹配元素的特定时间(如click)绑定一个时间处理器函数。

    示例代码:

    .bind()的一个基本用法,绑定一个或者多个DOM事件

    当每个p标签被点击的时候,显示其文本

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>bind Demo</title>
        <style type="text/css">
            p{
                background-color: yellow;
                font-weight: bold;
                cursor: pointer;
                padding: 5px;
            }
            
            p.over{
                background-color: #ccc;
            }
    
            span{
                color: red;
            }
    
        </style>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                $("p").bind("click", function(event){
                    $("span").text("Click happened!"); 
                
                });
    
                $("p").bind("dblclick", function(){
                    $("span").text("Double-click happened!");
                });
    
                $("p").bind("mouseenter mouseleave", function(event){
                    $(this).toggleClass("over");
                });
            })
        </script>
    </head>
    <body>
        <p>Click or double clice here.</p>
        <span></span>
    </body>
    </html>
    
    

    还可以在event处理之前传递一些附加的数据

    function handler(event){
        // event.data可以划去bind()方法的第二个参数的数据
        alert(event.data.foo);
    }
    $("p").bind("click", {foo: "bar"}, handler())
    

    通过返回false来取消默认的行为, 并阻止事件起泡

    $("form").bind('submit', function() {return false; });
    

    或者通过preventDefault()方法只取消默认的行为

    $("form").bind("submit", function(event){
        event.preventDefault();
    })
    
  • 相关阅读:
    CSS盒子模型
    getContextPath、getServletPath、getRequestURI、request.getRealPath的区别
    MYSQL中的CASE WHEN END AS
    单点登录的精华总结
    git&github
    June 21st 2017 Week 25th Wednesday
    June 20th 2017 Week 25th Tuesday
    June 19th 2017 Week 25th Monday
    June 18th 2017 Week 25th Sunday
    June 17th 2017 Week 24th Saturday
  • 原文地址:https://www.cnblogs.com/yang-wei/p/9526297.html
Copyright © 2011-2022 走看看