正文

jQuery事件之绑定事件

IP云
IP云V管理员/0 阅读
12/01
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

语法：

$(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();

})

相关阅读

目录[+]