- 对于每一个HTML页面的开发,都需要有一个与之配对的js文件,HTML之中只需要定义页面结构即可,所有的数据都要求通过程序动态生成,但是在整个过操作流程里,如果使用最原始的事件处理,会出现一下问题
- 问题一:JavaScript的原始事件绑定操作:document.getElementById(“元素ID”).addEventListenner(事件类型,回调函数,处理阶段),这样的操作太麻烦了.
- 问题二:容易出现事件冒泡:原始的操作中,如果为一个元素绑定了一个事件可能会导致相关的元素也拥有了一样的事件.
- 而在jQuery中针对于事件绑定处理有了更加方便的处理形式,可以利用给定的函数轻松地实现事件的绑定处理,如果要进行事件绑定处理,可以使用bind()函数完成()jQuery1.7之前
使用bind()函数实现事件绑定处理
<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").bind("click",function(){
alert("*****************");
});
});
</script>
</head>
<body>
<input id="mybutton" type="button" value="点击"/>
</body>
</html>
- 而且最为重要的是,对于bind()操作函数,他除了可以绑定一个处理事件之外,也可以同绑定多个处理事件
绑定多个处理事件
<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").bind("click mouseover",function(){
var imgObj = "<img src='images/gd.jpg' width='500px'>";
$("#imgDiv").append(imgObj);
});
});
</script>
</head>
<body>
<input id="mybutton" type="button" value="点击此处出现图片"/>
<div id="imgDiv"></div>
</body>
</html>
- 除了以上的绑定之外,也可以轻松实现事件的解绑,使用unbind()函数
解除事件绑定
$(function(){
$("#mybutton").bind("click mouseover",function(){
var imgObj = "<img src='images/gd.jpg' width='500px'>";
$("#imgDiv").append(imgObj);
});
$("#mybutton").unbind("mouseover");
});
- 在jQuery1.7之前,使用的绑定都是bind()函数,除了bind()函数之外,还是有live,delegete等等事件处理绑定,这个操作实在是太让人混乱了,岁从jQuery1.之后使用了一个新的on()函数,开代替已有的bind()函数.并且最为重要的函数的使用于bind()函数使用完全相同
使用on()函数
$("#mybutton").on("click mouseover",function(){
var imgObj = "<img src='images/gd.jpg' width='500px'>";
$("#imgDiv").append(imgObj);
});
$("#mybutton").unbind("mouseover");
});
- on()是新的函数,bind()是旧得函数,而unbind()指的是解除绑定事件处理