jQuery中的事件
作者：曾庆林
事件初探
加载文档完成触发：$(document).ready(function(){})
事件可以多次执行。
代码可以简写：$(function(){})
事件绑定
1 可以之间添加事件函数
$("h1").click(function(){
//触发事件要做的事情
})
问题是：
- 每次单击h1都会相应事件，不能解除。
- 这个里面的函数也不能复用
- 只能绑定一个函数
2 可以通过绑定事件
- bind() 绑定事件
- unbind() 解绑事件
- one() 只执行一次
js
$(".box").bind("click",fn1);
$(".box").bind("click",fn2);
// 可以绑定多个
function fn1(){
alert("你敢点我，我不是你的菜");
}
function fn2(){
alert("我就是去问问老朋友");
}
$("button").bind("click",fn3);
function fn3(){
alert("你点我了，就不要找那个她！");
$(".box").unbind("click");
// 在这里 解绑的 .box 所有click 事件
/* 也可以只解绑一个一个事件如：
$(".box").unbind("click"，fn1);
*/
}
$(".box").one("click",function(){
alert("我只出现一次，以后不烦你了");
})
html
<div class="box">box</div>
<button>我是米米</button>
合成事件
hover(enter,leave)
用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第一个函数,当光标移出这个元素时,触发指定的第二个函数.
$("h1").hover(
function(){// mouseover触法},
function(){// mouseout触发}
)
模拟事件
trigger
事件都是通过用户执行相应的操作后触发的。有时我们更希望让事件自动执行，而不用手动触发，或者在一个事件中调用另一个事件的处理函数。这时我们可以考虑使用模拟操作。
模拟操作可以使用trigger()方法来完成。
html
<p>this is a p</p>
<form action="">
<input type="text" id="good" />
<input type="text" />
</form>
js
$(function(){
$("p").click(function(){ alert("我被点击了")});
$("p").trigger("click");
$("#good").trigger("focus");
// trigger 可以模拟自动获得焦点
})
阻止事件冒泡的方法
在绑定的事件中加入event参数，并在函数中增加event.stopPropagation()调用就可以阻止事件冒泡。也可以使用return false阻止冒泡。
event中还有一个方法：event.preventDefault();作用是阻止默认行为，如表单提交！
image
html
<div class="papa">
父亲
<div class="self">
自己
<div class="son">儿子<span>this is 核心</span><a href="http://www.baidu.com">BAIDU</a></div>
</div>
</div>
我们在papa 上面绑定一个事件
在span 也绑定一个事件
单击span 时候 papa也会触发单击事件（事件会从子元素传递到父辈元素上面）
怎么样阻止事件的默认向上冒泡传递呢?
a 会默认 跳转页面，怎样阻止默认挑战页面呢？
$("span").bind("click",fn1);
$(".papa").bind("click",fn2);
function fn1(e){
alert("我是小span的被点击了");
e.stopPropagation();//阻止事件冒泡
}
function fn2(){
alert("我是papa被点击了");
}
$("a").bind("click",fn3);
function fn3(e){
alert("A被单击了");
e.preventDefault();//阻止默认事件
}
网友评论