模拟用户的操作触发事件
在jQuery中一般常用triggerHandler()方法和tigger()方法来模仿用户的操作触发事件
$("#button").trigger("click");
例、为按钮绑定click事件,弹出参数msg1+msg2连接到一起的字符串,在使用tigger()方法。
<input type="button" name="button" id="button" value="按钮" />
<script type="text/javascript">
$(document).ready(function(){
$("input:button").bind("click",function(event,msg1,msg2){
alert(msg1+msg2);
}).trigger("click",["欢迎访问","明日科技"]);
});
</script>
2、模仿悬停事件
模仿悬停事件是指模仿鼠标移动到一个对象上面又从该对象上面移除的事件,可以通过hover()方法实现。
例、添加hover()方法鼠标移到该元素时,触发第一个函数,鼠标移除时,出发第二个函数。
<script type="text/javascript">
$(document).ready(function(){
$("a.main").hover(function){
window.status="http://www.mrbccd.com";return ture;
},function(){
window.status="完成";return ttrue;
});
});
</script>
事件捕获与事件冒泡
css样式
<style type="text/css">
.redBorder{
border: 1px solid red;
}
.testl{
width: 240px;
height: 150px;
background-color: #cef;
text-align: center;
}
.test2{
width: 160px;
height: 100px;
background-color: #ced;
text-align: center;
line-height: 20px;
margin: 10px auto;
}
span{
width: 60px;
height: 35px;
background-color: #fff;
padding: 20px 20px 20px 20px;
}
body{
font-size: 12px;
}
</style>
事件对象
<div class="testl">
<b>div元素</b>
<p class="test2">
<b>p元素</b><br><br>
<span><b>span元素</b></span>
</p>
</div>
<script type="text/javascript">
$(".test1").mouseout(function(){
$(".test1").removeClass("redBorder");
});
阻止事件冒泡
$(".test1").mouseover(function(event){
$(".test1").addClass("redBorder");
//event.stopPropagation();
});