jquery-基础事件[下]
<script>
$(function () {
mouseover mouseout mouseenter mouseleave的区别
$('div').mouseover(function () {
$(this).css('background', 'red');
}).mouseout(function () {
$(this).css('background', 'green');
});
$('div').mouseenter(function () {
$(this).css('background', 'red');
}).mouseleave(function () {
$(this).css('background', 'green');
});
上面的mouseover mouseout mouseenter mouseleave看不出有什么区别，mouseover mouseout在有子节点的时候会产生问题
---------------------------------------------------------------------
mouseenter()和mouseleave()这组穿过子元素不会触发，而mouseover()和mouseout()则会触发
$('div').mouseover(function () { //over会触发子节点，造成多次无效的触发
$('strong').html(function (index, value) {
return value + '1';
});
});
$('div').mouseenter(function () { //enter不会触发子节点
$('strong').html(function (index, value) {
return value + '1';
});
});
---------------------------------------------------------------------
.keydown() 、.keyup()返回的是键码，而.keypress()返回的是字符编码。
$('input').keydown(function (e) {
alert(e.keyCode); //按下a返回65
});
$('input').keyup(function (e) {
alert(e.keyCode); //按下a返回65
});
$('input').keypress(function (e) {
alert(e.charCode); //按下a返回97
});
---------------------------------------------------------------------
focus、blur、focusin、focusout的区别
.focus()和blur()分别表示光标激活和丢失，事件触发时机是当前元素。而focusin()和focusout()也表示光标激活和丢失，但事件触发时机可以是子元素
$('input').focus(function () {
console.log('光标激活');
});
$('input').focusout(function () {
console.log('光标激活');
});
$('div').focus(function () { //focus和blur必须是当前元素才能激活
console.log('光标激活');
});
$('div').focusin(function () { //focusin和focusout可以让子元素激活 div里面放一个input，结果input激活了
console.log('光标激活');
});
$('div').focusout(function () {
console.log('光标丢失');
});
---------------------------------------------------------------------
复合事件
$('div').hover(function () {
$(this).css('background', 'red');
}, function () {
$(this).css('background', 'green');
});
注意：.hover()方法是结合了mouseenter()方法和mouseleave()方法，并非mouseover()和mouseout()方法。
---------------------------------------------------------------------
toggle()方法1.9版本删除掉了。但你又非常想用这个方法，并且不想自己编写类似的功能，可以下载jquery - migrate.js文件，来向下兼容已被删除掉的方法。
我们可以自己写这样一个方法
var flag = 1;
$('div').click(function () {
if (flag == 1) {
$(this).css('background', 'red');
flag = 2;
} else if (flag == 2) {
$(this).css('background', 'blue');
flag = 3;
} else if (flag == 3) {
$(this).css('background', 'green');
flag = 1;
}
});
})
</script>
