Jquery动态绑定事件

来源：互联网发布：手机游戏挂机软件编辑：程序博客网时间：2024/05/16 18:29

页面上的任何元素都能触发事件，在使用jQuery的时候，可以动态的为对象添加事件的绑定。基本的语法如下：

$obj. bind(事件类型，事件处理函数);

下面，笔者用一个demo来演示：

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="jquery-2.1.4/jquery.min.js" language="javascript"></script></head><style>span{border:1px solid;margin: 5px;padding:5px;background-color:#F6F;cursor:pointer;}</style><body><span onmouseover=""> 选项一</span> <span>选项二 </span> <span> 选项三</span></body><script>//span标签绑定 onmouseover()方法$("span").bind("mouseover",function(){$(this).css("background-color","yellow");});//span标签绑定 onmouseout()方法$("span").bind("mouseout",function(){$(this).css("background-color","#F6F");});</script></html>

上述代码可以看出，笔者用jquery动态的为三个span标签绑定方法，为鼠标触碰和鼠标移出，改变span的背景颜色，下面，请看效果：

可以看出，刚打开页面的时候，背景显示紫色，当鼠标指向某一个<span>标签，颜色会变成onmouseover()绑定方法设置的黄色，移出鼠标就会变成onmouseout()绑定，还原为紫色。

ps：本人暂时不会制作动态图，演示效果可能不太理想

相应的，有bind()方法，就有对应的unbind()方法，unbind()方法只需要在括号中填入所要解除绑定的事件即可。

欢迎广大博友相互交流~

2 0