视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery中bind()方法如何使用
2020-11-27 19:29:01 责编:小采
文档
本篇文章将分享的是有关jQuery中事件绑定的方法bind(),有一定的参考价值,希望对大家学习有所帮助

jQuery处理事件最重要的两种方法就是事件绑定bind()方法和事件移除unbind()方法,就是将代码添加到一组元素上的一个或者多个事件中,今天将详细的介绍bind()方法的使用

bind()方法

bind() 方法就是为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

$(selector).bind(event,data,function)

event :规定添加到元素的一个或多个事件,可用空格分隔多个事件而且必须是有效的事件。

data :指传递到函数的额外数据。

function :指当事件发生时运行的函数

<a href="#">Test 1</a>
<a href="#">Test 2</a>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$(function(){//入口函数
$("a").bind("click", function() {

alert($(this).text());

});
});

结果

当点击a链接时,由于a链接绑定了事件click,所以点击时会弹出一个框显示内容,jQuery会自动将单击的元素分配给匿名函数内的“this”关键字,允许访问激活元素的元素,同时可以触发多个事件

<div id="div" style="background-color:pink;width:100px;height:100px;"></div>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$("#div").bind("mousemove", function(event){
$(this).text(event.pageX + "," + event.pageY);});

结果

我们创建一个长和宽都为100px,粉色的一个div元素。对于这个div,我们使用带有名为“event”的参数的匿名函数绑定mousemove事件,当鼠标滑过时我们可以访问到pageX和pageY属性,告诉我们鼠标光标当前在页面的哪个位置,显示在盒子的左上角。将光标移动到div元素不同的地方上,将可以看到不同的值更新显示

bind()方法还可以通过data传入自己的数据并让事件对象访问它,也可以在绑定事件时设置值,并且能够在调用事件时读取此值

<a href="#">Test 1</a>
<a href="#">Test 2</a>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
	var text = "Hello, world!";
	$(function(){
	$("a").bind("click", {message:text},function(event) {
	text = "hello";
	console.log(event.data.message);
	});});
</script>
	</script>

结果

我们将值作为bind()方法的辅助参数传递,作为键和值的映射,通过用逗号分隔它们来传递多个值。我们使用事件对象的data属性。此属性包含已传递的每个值的子属性,这意味着您可以使用event.data.message访问message参数的值。 虽然在事件处理程序中更改了“text”变量的值,但程序运行结果还是“Hello,world!”

总结:

下载本文
显示全文
专题