jQuery事件之绑定事件

语法：

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

参数解释:

  • eventType(String): 一个包含一个或多个DOM事件类型的字符串， 比如"click"或"submit"或自定义事件的名称。

  • eventData(Ojbect): 可选，它包含的数据键值对映射将被传递给时间处理程序

  • handler(function): 每当时间触发时执行的函数

    • 作用：为每一个匹配元素的特定时间(如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();
})
    posted @ 2018-08-23 21:00  _杨魏  阅读(397)  评论(0)    收藏  举报