- 在jQuery里面,针对于事件的绑定于处理并不仅仅只是on()一个处理函数,实际上在整个jQuery中,针对于用户的使用习惯,做了大量的重复的开发操作
直接绑定单机事件
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery的事件绑定处理</title>
<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
<link rel="style/sheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
var count = 0;
$("input").click(function(){
var imgObj = "<div>"+(count++)+"</div>";
$("#imgDiv").append(imgObj);
});
});
</script>
</head>
<body>
<input id="mybutton" type="button" value="点击此处出现数字"/>
<div id="imgDiv"></div>
</body>
</html>
- 除了这个函数之外,还有blur(),mouseover(),mouseup()…但是从实际的开发来看,使用最多的一定是on()函数.那么on()函数里面可以同意绑定多个处理事件,但是这个函数发现,默认情况下如果使用如下语法
选择器.on("事件1 事件2 事件3...",function(){})
- 会表示这若干个时间都是用同一个函数来进行处理,那么on中实际上是可以为不同的事件绑定不同的处理函数但是这个时候就需要使用到JSON数据结构完成了.
为组建绑定多个事件同时使用不同的方式来进行事件处理
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery的事件绑定处理</title>
<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
<link rel="style/sheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
$("#mybutton").on({
click:function(){
console.log("单机事件被触发")
},
mouseover:function(){
console.log("鼠标划过事件被触发")
}
});
});
</script>
</head>
<body>
<input id="mybutton" type="button" value="点击此处出现数字"/>
<div id="imgDiv"></div>
</body>
</html>
- 在之前的DOM解析处理之中使用了一个wrap()于unwrap()函数,使用这两个函数实现一个放大的操作.
实现放大处理
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery的事件绑定处理</title>
<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
<link rel="style/sheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
$("#myDiv").on({
mouseover:function(){
$(this).wrap("<h1>")
},
mouseout:function(){
$(this).unwrap("h1")
}
});
});
</script>
</head>
<body>
<div id="myDiv">
www.maoshu.com
</div>
</body>
</html>
- 而且最为关键的问题是,整个代码的实现非常的容易,但是这个时候,鼠标切换是一种常见的功能,jQuery又将其包装为一个函数hover()
$(function(){
$("#myDiv").hover(
function(){
$(this).wrap("<h1>")
},
function(){
$(this).unwrap("h1")
}
);
});
- 对于hover()函数而言,里面的函数有两个,第一个函数指的是鼠标经过的时间处理函数,另一个是鼠标离开之后所使用的事件处理函数.
- 实际上on()函数一旦绑定了事件之后,这个事件不管调用多少次之后,都会保留,那么如果说某些事件只要求执行一次,一次后要求解绑,可以使用one()函数完成
使用one()函数
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery的事件绑定处理</title>
<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
<link rel="style/sheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
$("#myDiv").one("click",function(){
console.log("one()事件只执行一次");
},
);
});
</script>
</head>
<body>
<div id="myDiv">
www.maoshu.com
</div>
</body>
</html>
- 可以发现实际上click()函数,hover()函数,one()函数实际上都是对on()函数的一个再包装处理.
- jQuery于JavaScript比起来,整个的操作更加的便捷.