jQuery中的on和off方法

最新推荐文章于 2023-11-19 22:52:11 发布

原创最新推荐文章于 2023-11-19 22:52:11 发布 · 1.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

Django 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了jQuery中的on和off方法。on方法用于事件绑定，可以同时定义多个事件，事件发生在childSelector上，而事件绑定在selector上。off方法则用于移除事件，可以精确到指定的事件处理函数，off的参数中selector和childSelector分别表示绑定事件和触发事件的元素。

jQuery中的on和off方法

on 方法

语法如下：

$(selector).on(event,childSelector,data,function(eventObj))

字段说明

字段	使用说明
selector	jQuery选择器，如’#id1’，指示事件绑定在哪个元素上
event	事件名称，如‘mousedown’（按下鼠标），指示触发功能所需执行的事件
childSelector	jQuery选择器，如’#ids’，指示事件需要发生在哪个元素上
data	在执行函数功能时向函数传递的参数，以字典形式传递，如‘{key1:‘value1’, key2:‘value2’}’，需通过event.data.key的方式调用，参见代码用例。
function	发生事件时执行的函数

也可通过map对象向on方法传参(结构类似于只有一个键值对的字典)，同时定义多个事件，如下代码所示：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");}, 
    click:function(){$("body").css("background-color","yellow");}  
  });
});
</script>
</head>
<body>

<p>Click or move the mouse pointer over this paragraph.</p>

</body>
</html>

（以上代码转自菜鸟教程）

注意：childSelector 可看作是事件能产生效果的区域，即触发事件的元素，而selector才是承载了事件的元素，即绑定事件的元素。也就是事件发生在childSelector上时触发function功能，而事件定义在selector上。具体代码示例请参见文档最后一段代码（绑定事件的元素和触发事件的元素）

代码用例：

//on方法中data 参数需要通过向function传参event，通过event进行调用
//此例中将event参数定义为e
$("p").on("click",{haha:"hehe"}, function(e){
    alert(e.data.haha);
  });

//on方法中function的调用
var foo = function () {
  // 发生时间时执行的代码
  alert(123);
};
// ... 当p标签被点击时执行foo函数 ...
$("body").on("click", "p", foo);
// ... 也可以直接在on方法中定义函数，如下所示 ...
$("body").on("click", "p", function () {
  // 发生时间时执行的代码
  alert(123);
  );

（以上代码转自jQuery API 中文手册）

off 方法

语法如下：

$(selector).off(event,childSelector,function(eventObj))

字段说明

字段	使用说明
selector	jQuery选择器，如’#id1’，指示事件绑定在哪个元素上
event	事件名称，如‘mousedown’（按下鼠标），指示需要移除的事件
childSelector	jQuery选择器，如’#ids’，指示事件曾指定发生在哪个元素上
function	当事件对同一元素绑定了多个函数时，指定移除事件发生时触发的哪个函数

注意：off方法也可以通过map对象移除事件，但每次只能传入一个map对象

从绑定的多个函数中移除某一指定函数

//从绑定的多个函数中移除某一指定函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function changeSize()
{
	$(this).animate({fontSize:"+=10px"});
}
function changeSpacing()
{
	$(this).animate({letterSpacing:"+=5px"});
}
  
$(document).ready(function(){
	$("p").on("click",changeSize);
	$("p").on("click",changeSpacing);
	$("button").click(function(){
		$("p").off("click",changeSize);
		//此处也可改写成以下方式：
		//$("p").off({"click":changeSize});
		alert("移除 changeSize，字体不会变大，但是字体的间距依然点一次变宽一次。");
	});
});
</script>
</head>
<body>

<p>这是一个段落 。</p>
<p>这是另外一个段落。</p>
<p>点击任意一个段落来修改段落的字体大小。</p>

<button>移除 changeSize() 事件句柄</button>

</body>
</html>

（以上代码转自菜鸟教程）

当通过off移除事件时，需要注意参数中，selector表示绑定事件的元素，而childSelector表示触发事件的元素，代码示例如下：

绑定事件的元素和触发事件的元素

// 绑定事件的元素和触发事件的元素
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>test</title>
        <script src='E:\Python\fullstack_s2\html\jquery-3.4.1.js'></script>
        <style>
            *{
                padding:0;
                margin:0;
            }
            #window{
                display:inline-block;
                position:relative;
                width:500px;
                height:200px;
            }
            #title{
                height:50px;
                background:black;
                color:white;
                border:1px solid black;
            }
            #content{
                height:180px;
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <div id='window'>
            <div id='title'>test title</div>
            <div id='content'>test content</div>
        </div>
        <script>
            $('#title').css('cursor','move').on('mousedown',function(a){
                var start_x = a.screenX;
                var start_y = a.screenY;
                var po = $('#title').parent();
                var psx = po.offset().left;
                var psy = po.offset().top;
                po.on('mousemove','#title',function(b){
                    //鼠标仅在title上移动时才能带动整个div移动
                    var end_x = b.screenX;
                    var end_y = b.screenY;
                    var vx = end_x - start_x;
                    var vy = end_y - start_y;
                    var px = psx + vx;
                    var py = psy + vy;
                    po.offset({top:py, left:px})
                }).on('mouseup',function(){
                    po.off('mousemove','#title') 
     //此处如果把po改成$('#title')将无法移除移动效果
     //此处如果把'#title'改成po也将无法移除移动效果
     //移除的目标是在元素po上绑定的在元素'#title'上点击鼠标时所触发的事件
                })});
        </script>
    </body>
</html>