bind元素和unbind元素使用

最新推荐文章于 2022-03-23 15:42:31 发布

beezen

最新推荐文章于 2022-03-23 15:42:31 发布

阅读量3.6k

点赞数

分类专栏：前端代码基础文章标签：前端初学css必看 htmlcss bind使用 unbind使用 js基础用法

本文链接：https://blog.csdn.net/qq_29813585/article/details/50417689

版权

前端代码基础专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1.bind元素是js中常用到的元素

主要用法如下：

$("xx").bind("click",function(){})

其效果和$("xx").click(function(){})雷同，但相比之下bind元素的用法较为灵活多变,bind意思为绑定事件，可以绑定click事件，可以绑定mousedown事件等多个事件。

具体写法如：

$("xx").bind("click mousedown",function(){})即多种条件下能同时触发同一个函数。那么有的人就会问，那能多种条件触发多种不同函数吗。当然可以，使用方法如下：

$("xx").bind({

click:function(){},

mousedown:function(){}

dblclick:function(){}

})

这样的形式是不是较为灵活多变呢。 前端css代码基础——bind元素和unbind元素使用

===============================================================

深入一点：bind元素是能够传递参数的，如：

document.oncontextmenu = function(){return false;}//使得鼠标右键点击的menu默认弹出框不显示

$(function(){

var message = "left";

$(".btn3").bind("click", { msg: message }, function(e) {

alert(e.data.msg);//给函数参数e,其值为变量msg；

return false;

});

var message = "right";

$(".btn3").bind("contextmenu", { msg: message }, function(e) {

alert(e.data.msg);

return false;

});

})

//效果为左键点击显示left，右键点击显示right

这样鼠标点击按钮时会将想要传递的参数显示，（注："contextmenu"方法为鼠标右键执行方法;，，，document.oncontextmenu = function(){return false;}使得右键系统默认menu弹框取消）

2.unbind顾名思义就是取消绑定

列：

$("xx").unbind("click").click(function(){})//意思为取消之前所有对xx元素绑定的click事件，然后再给其定义了一个新的click事件。

主要用在哪些地方呢？

比如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" width="device-width">
<script src="js/jquery-1.10.2.min.js"></script>
<style>

</style>
</head>
<body>
<div class="box">
<div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
</div>
<button class="btn1">btn1</button>
<button class="btn2">btn2</button>
<button class="btn3">btn3</button>
<button class="btn4">btn4</button>
</body>
<script>
$(function(){
$(".btn1").click(function(){
$(".one").text("one+");
})
})
$(function(){
$(".btn2").click(function(){
$(".btn1").unbind("click").bind("click",function(){
$(".two").text("two+");
})
})
})

</script>
</html>

解释：若是第一次定义了点击btn1按钮，执行操作事件；再之后又定义了点击btn1按钮执行操作事件，很显然则两次操作会叠加（即前后两次定义的点击btn1事件都会操作），而这时你所需要的仅仅是在第二次条件下只执行第二次所定义的事件，则使用unbind来先清除此之前的绑定事件。