jquery绑定事件的方法

最新推荐文章于 2024-05-25 13:36:04 发布

seven-yang

最新推荐文章于 2024-05-25 13:36:04 发布

阅读量621

点赞数

本文链接：https://blog.csdn.net/yangyixue123/article/details/75388962

版权

jquery绑定事件的方法

jquery绑定事件的方法（四种）：分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off

一、on()方法（首选）
on()方法在被选元素及子元素上添加一个或多个事件处理程序

参数：

event:必需，规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。

data:可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。

function:可选。规定当事件发生时运行的函数。

map:规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

eg: $(selector).on(event,childSelector,data,function,map)

//给P元素添加单击事件
<body>
<p>点我一下</p>
<script src="jquery-1.10.1.min.js"></script>
<script>
    $("p").on("click",function(){
        alert("The paragraph was clicked");
    });
</script>
</body>

优点：on()可以绑定动态添加到页面元素的事件,不用关心注册该事件的元素何时被添加进来，也不需要重复绑定。
on（）绑定事件可以提升效率，

例子：多个事件绑定同一个函数

<script>
    $(document).ready(function(){
        $("p").on("mouseover mouseout",function(){
            $("p").toggleClass("intro");
        });
    });

二、bind()方法

bind()方法:作用是在选择到的元素上绑定特定事件类型的监听函数

参数：

type:必需。事件类型，如click、change、mouseover等;

data:可选。传入监听函数的参数，通过event.data取到。可选;

function:必需。规定当事件发生时运行的函数(监听函数)，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区别，使用时需要注意。

map:规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数

 语法：$(selector).bind(event,data,function,map)

举例：

<body>
<p>点我一下</p>
<script src="jquery-1.10.1.min.js"></script>
<script>
    $("p").bind("click",function(){
        alert("单击P元素");
    });
</script>
</body>

三、delegate()方法

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

参数：

childSelector：必需。规定要添加事件处理程序的一个或多个子元素。

event：必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

data:可选。传递到该函数的额外参数

function:必需。当事件发生时，运行的函数

语法：$(selector).delegate(childSelector,event,data,function)

举例：当单击 div元素内部的 p元素时，改变所有 p元素的背景颜色：

<body>
<div>
    <p>点我啊</p>
    <p>随便  </p>
    <p>看看</p>
</div>

<script src="jquery-1.10.1.min.js"></script>
<script>
    $("div").delegate("p","click",function(){
        $("p").css("background-color","pink");
    });
</script>
</body>