JQuery事件处理
Jquery事件
1、 绑定事件示例代码：
<a href=”#”>绑定事件</a>
<div style=”display:none;”>
什么是绑定事件？这是隐藏的内容，点击上面的内容会显示这里的内容。
</div>
<script language=”javascript”>
//单击显示，再次点击隐藏
/*$(function(){
$(“a”).bind(‘click’,function(){
if($(this).next().is(“:visible”)){
$(this).next().hide();
}else{
$(this).next().show();
}
return false;
})
});*/
//鼠标划过显示，离开隐藏
/*$(function(){
$(“a”).bind(‘mousemove’,function(){
$(this).next().show();
}).bind(‘mouseout’,function(){
$(this).next().hide();
})
});*/
//第二种方式绑定事件，也是鼠标划过
$(function(){
$(“a”).mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
})
});
</script>
2、 合成事件示例代码：
<a href=”#”>这里是合成事件测试代码</a>
<div style=” display:none;”>这里的内容默认是隐藏的</div>
<script language=”javascript”>
//JQuery中目前有两个合成事件hover(),toggle();你可以这样理解：合成事件就是可以触发两个函数的事件
//鼠标停留显示隐藏内容，离开触发第二个函数隐藏内容
/*$(function(){
$(“a”).hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
});*/
//上面例子中，第一单击显示，第二次单击隐藏，同样可以用合成时间toggle(),这个时候的a也不会跳转
$(function(){
$(“a”).toggle(function(){
$(this).next().show();
//这是第一次单击后的操作，当然你可以给这个标题搞个背景色。使用addClass(),再次单击就用removeClass去掉就可以
},function(){
$(this).next().hide();
})
});
</script>
3、 事件冒泡示例代码：
事件冒泡
<span>我是父元素内容<b>这是后代元素内容</b></span>
<a href=”http://www.0377joyous.com” target=”_blank”>Joyous 博客</a>
<script language=”javascript”>
//比如一个父元素绑定了一个事件，而父元素内部后代元素又绑定了一个事件，这样后代元素事件响应的时候父元素事件响应不响应呢？
/*$(function(){
$(“span”).bind(‘click’,function(){
alert(“父元素事件被激活”);
});
$(“b”).bind(‘click’,function(){
alert(“子元素事件被激活”);
});
});*/
//单击b包含的内容会激活两个事件，这样怎么才能解决？
$(function(){
$(“span”).bind(‘click’,function(){
alert(“父元素事件被激活”);
});
$(“b”).bind(‘click’,function(){
alert(“子元素事件被激活”);
event.stopPropagation();//增加这句就阻止了事件冒泡，不过ie貌似不支持，当然可以增加一句return false;来解决
});
});
//这个问题是不是想到了提交按钮,a标签跳转等默认行为,我们是不是可以阻止这些默认行为发生,把控制权留给自己？
$(function(){
$(“a”).bind(‘click’,function(){
//其实基本原理就是重新写了click事件,当然我前面也有用到return false;来进制点击a进行跳转
event.preventDefault();
});
});
</script>
4、 移除事件示例代码：
<a href=”#”>移除事件例子</a>
<script language=”javascript”>
//移除事件就是用unbind()函数来移除
$(function(){
$(“a”).bind(‘click’,function(){
alert(‘弹出内容’);
});
$(“a”).unbind();//不带参数会移除所有事件，带事件类型参数会移除指定事件，带有事件类型以及处理函数作为参数那么移除指定事件处理函数
});
</script>
5、 模拟事件示例代码：
<button id=”mybut”>Joyous 博客–Jquery教程</button>
<span></span>
<a>多个事件</a>
<div style=”display:none;”>多个事件隐藏</div>
<script language=”javascript”>
//很多事件都是有用户单击或者鼠标划过来触发的，可是刚打开的页面我们有没有办法直接触发呢？
/*$(function(){
//这里绑定事件
$(“button”).bind(‘click’,function(){
$(“span”).append(“激活点击事件才能显示”);
});
});
$(function(){//触发一定要在触发前绑定或者定义
$(‘#mybut’).trigger(‘click’);
});*/
//能不能触发用户自定义的事件？
/*$(function(){
$(“#mybut”).bind(“myfun”,function(){
$(“span”).append(“<b>我自己定义的事件能激活吗？</b>”);
});
$(“#mybut”).trigger(“myfun”);
});*/
//能不能传递参数？
/*$(function(){
$(“#mybut”).bind(“mydata”,function(event,message1,message2){
$(“span”).append(“<i>”+message1+message2+”</i>”);
});
$(“#mybut”).trigger(“mydata”,[“第一个参数”,”第二个参数”]);
});*/
//bind既能绑定系统事件,也能 绑定用户定义事件，当然能绑定多个事件
$(function(){
$(“a”).bind(“mouseover mouseout”,function(){
$(this).next().toggle();
})
});
</script>
6、 基本动画示例代码：
<a href=”#”>基本动画</a>
<div style=”display:none;”>
<p>这里隐藏很多内容，慢慢的出来，慢慢的进去。。这就是基本动画。知识在于积累，不论现在有没有用，将来肯定有用滴！！</p>
</div>
<script language=”javascript”>
/*
//基本的隐藏和显示
$(function(){
$(“a”).toggle(function(){
$(this).next().show(1000);//在1s中内显示出来,还有slow=600毫秒,fast=200毫秒,normal=400毫秒
},function(){
$(this).next().hide(1000);
});
});*/
//改变透明度来显示和隐藏
/*$(function(){
$(“a”).toggle(function(){
$(this).next().fadeIn(800);
},function(){
$(this).next().fadeOut(800);
});
});*/
//元素高度来显示和隐藏
/*$(function(){
$(“a”).toggle(function(){
$(this).next().slideDown();
},function(){
$(this).next().slideUp();
});
});*/
</script>