一、事件有冒泡现象：
阻止冒泡事件的方法有两种：
$(function () {
var i = 0;
$("body,div,#btnShow").click(function (event) {
i++;
$(".123").css("color", "Red");
alert(i);
event.stopPropagation();
});
$("body,div").click(function (event) {
i++;
alert(i);
});
})
$("#btnShow").click(function(){
})
（1）event.stopPropagation();
(2)return false; 通过返回return false 即可阻止时间的冒泡过程.
$("body,div,#btnShow").click(function (event) {
i++;
$(".123").css("color", "Red");
alert(i);
// event.stopPropagation();
return false;
}
二、ready()方法的几种相同写法
(1)$(document).ready(function(){
//代码部分
})
(2)$(function(){
})
(3)JQuery(document).ready(function(){
})
(4)JQuery(function(){
})
三、用bind方法绑定事件
bind(type,[data],fn);
type为事件的类型；
分为：blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouserup,mousemove、mouseover、mouseout、mouseenter、mouseleave、
change,select、submit、keydown、keypress、keyup、error.
data:参数data作为event.data属性值传递给事件对象的额外数据对象
fn绑定每个事件的处理函数
eg:
$(function () {
$("#btnShow").bind("click", function () {
$(this).attr("disabled", "disabled");
})
})
你绑定多个事件:
$("#btnShow").bind("click mouseout", function () {
$(this).attr("disabled", "disabled");
})
//用映射方式绑定多个事件
$(function(){
var message="执行的是focus事件";
$(.txt).bind("focus",{msg:message},function(event){
$("#divTip").show() //显示
.html(event.data.msg); //设置文本
message="执行的是change事件";
$('.txt').bind('change',{msg:message},function(event){
$("#divTip").show().html(event.data.msg);
})
})
})
三、
切换事件：
有两种方法：
（1）hover()
$("a").hover(function(){
//执行代码1
}),function(){
//执行代码二
}
等价
$("a").mouseenter(function(){
})
$("a").mouseleave(function(){
})
hover(over ,out) over为移到元素时触发的函数 out为移出元素时触发的函数
$(function () {
$(".clsTitle").hover(function () {
$(".clsContent").show();
}, function () {
$(".clsContent").hide();
})
})
（2）toggle() //点击之后toggle才能触发
toggle(fn1,fn2,[fn3,fn4,...])
$(function(){
$("img").toggle(function () {
$("img").attr("src", "images/001.jpg");
$("img").attr("title", this.src);
}, function () {
$("img").attr("src", "images/002.jpg");
$("img").attr("title", this.src);
}, function () {
$("img").attr("src", "images/003.jpg");
$("img").attr("title", this.src);
}, function () {
$("img").attr("src", "images/004.jpg");
$("img").attr("title", this.src);
}, function () {
$("img").attr("src", "images/005.jpg");
$("img").attr("title", this.src);
})
})
四、移除事件
unbind([type],[fn]);
$("input").unbind();移除全部事件
$("input").unbind("click");
五、其他事件
事件有两种：
(1)one()
one()方法为所选则的元素绑定仅触发一次的处理函数。
$('#Button1').one('click', function () {
alert('第一次点击，你将看到我，但是之后。。。？');
});
(2)trigger()
trigger(type,[data]);
trigger有个最大的特点是事件可以自动触发,如果不希望自动触发可使用triggerHandler事件.
var oTxt = $("input");
oTxt.trigger("select");
oTxt.bind("btn_Click", function () {
var txt = $(this).val();
$("#divTip").html(txt);
})
oTxt.trigger("btn_Click"); //自动触发绑定的事件btn_Click
})
</script>
</head>
<body>
姓名：<input id="Button1" type="text" value="陶国荣" class="txt" />
<div id="divTip" style="padding-top:5px;"></div>
</body>
</html>