jquery 事件绑定

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

1. 事件

* 页面加载 - ready()

* 事件绑定与解绑

* 事件绑定

* bind(type,data,callback)

* type - 指定绑定的事件名称

* data - 作为event.data属性值传递给事件对象的额外数据对象,可省略

* callback - 回调函数(事件处理函数)

* 单事件绑定

* bind(type,callback)方法中的type指定一个事件名称

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的简单事件绑定</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<input type="button" id="btn" value="测试">
<script>
/* 为button绑定click事件
$("#btn").click(function(){
alert("hello world!!");
});
*/
/* 事件绑定 - bind(type,callback)
* type - 指定绑定的事件名称
* callback - 回调函数
*/
$("#btn").bind("click",function(){
alert("hello world!!");
});
</script>
</body>
</html>

复制代码

点击测试后:

* 多事件绑定

* bind(type,callback)方法中的type指定多个事件名称，中间使用空格隔开

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery多事件绑定</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<div style="width:200px;height:200px;background:pink;"></div>
<script>
/*$("div").mouseover(function(){
console.log("进入....");
}).mouseout(function(){
console.log("离开....");
});*/
// bind(type,callback)
// * type - 指定要绑定的多个事件时,中间空格隔开
$("div").bind("mouseover mouseout",function(event){
If(event.type==”mouseover”){
console.log("鼠标悬停...");
}else{
console.log("鼠标移出...");
}
});
</script>
</body>
</html>

复制代码

效果：

当鼠标移入时：

当鼠标移出时：

* bind()支持多少事件名称:

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,

mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change,

select, submit, keydown, keypress, keyup, error 。

* 事件解绑 - unbind()

* 默认不传递任何参数 - 解绑所有事件

* 传递一个事件名称 - 解绑指定单个事件

* 传递多个事件名称 - 解绑指定多个事件

* 注意

* unbind()不仅可以解绑bind()事件,还可以解绑传统事件

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery多事件绑定</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<div style="width:200px;height:200px;background:pink;"></div>
<script>
$("div").mouseover(function(){
console.log("进入....");
}).mouseout(function(){
console.log("离开....");
});
$("div").unbind("mouseover mouseout");
</script>
</body>
</html>

复制代码

效果：无论鼠标移入还是移出，都没有效果

* 事件模拟 - trigger()

* 含义 - 不仅可以绑定事件,还可以模拟用户操作

* trigger(type,data)

* type - 指定要模拟的事件名称

* data - 传递给事件处理函数的附加参数

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery模拟事件</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<input type="button" id="btn" value="按钮">
<script>
$("#btn").click(function(){
alert("holle world!!!");
}).trigger("click");
</script>
</body>
</html>

复制代码

效果如下:不用自己点击按钮，事件自动发生

谷晰枫 · 发表于 2016-4-16 09:03:25

爱死你了,这么好的帖子要顶的

一三一酵素可以预防子宫肌瘤吗http://bbs.yn.cn/forum.php?mod=viewthread&tid=4291

小孩可以喝酵素吗http://0853bbs.com/forum.php?mod=viewthread&tid=28778

小孩可以喝酵素吗http://www.ahwste.com/forum.php?mod=viewthread&tid=105919

小孩可以喝酵素吗http://bbs.youzigame.com/forum.php?mod=viewthread&tid=169660

一三一酵素可以改善宫寒吗http://shijiefeiyi.com/forum.php?mod=viewthread&tid=2013

一三一酵素可以治疗失眠多梦吗http://www.zhoumotime.com/forum.php?mod=viewthread&tid=117716

消炎药可以和一三一酵素一起吃吗http://fx.bjkmyl.com/forum.php?mod=viewthread&tid=138848

一三一酵素可以改善宫寒吗http://bbs.7hjc.com/forum.php?mod=viewthread&tid=18320

消炎药可以和一三一酵素一起吃吗http://douyoujp.main.jp/forum.php?mod=viewthread&tid=11850030

一三一酵素可以预防子宫肌瘤吗？http://www.dqclean.com/forum.php?mod=viewthread&tid=4123

[代码片段] jquery 事件绑定

[代码片段] jquery 事件绑定

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

用微信扫一扫