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();
    })
    
  • 相关阅读:
    mysql存储过程笔记
    mysql 命令行操作
    第一天前来报到
    Android Studio导入工程版本问题、gradle版本问题
    LogUtils-定制自己的日志工具
    Git2.11安装下载和github使用
    Android Studio 2.3版本 以及相应的gradle3.3包
    android 导入第三方jar包和类库
    GifView——Android显示GIF动画
    Android中dip、dp、sp、pt和px的区别详解
  • 原文地址:https://www.cnblogs.com/yang-wei/p/9526297.html
Copyright © 2011-2022 走看看