七、基础事件

一、绑定事件

jQuery 通过.bind()方法来为元素绑定这些事件。可以传递三个参数：bind(type, [data], fn)

type 表示一个或多个类型的事件名字符串；

[data]是可选的，作为 event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；

fn 表示绑定到指定元素的处理函数。

//使用点击事件

$('input').bind('click', function () {            //点击按钮后执行匿名函数

    alert('点击！');

});

//普通处理函数

$('input').bind('click', fn);          //执行普通函数式无须圆括号

function fn() {

    alert('点击！');

}

//可以同时绑定多个事件

$('input').bind('mouseout mouseover', function () {         //移入和移出分别执行一次

    $('div').html(function (index, value) {

    return value + '1';

    });

});

//通过对象键值对绑定多个参数

$('input').bind({ //传递一个对象

    'mouseout' : function () {           //事件名的引号可以省略

        alert('移出');

    },

    'mouseover' : function () {

        alert('移入');

    }

});

//使用 unbind 删除绑定的事件

$('input').unbind();             //删除所有当前元素的事件

//使用 unbind 参数删除指定类型事件

$('input').unbind('click');            //删除当前元素的 click 事件

//使用 unbind 参数删除指定处理函数的事件

function fn1() {

    alert('点击 1');

}

function fn2() {

alert('点击 2');

}

$('input').bind('click', fn1);

$('input').bind('click', fn2);

$('input').unbind('click', fn1);          //只删除 fn1 处理函数的事件

二、简写事件

四、复合事件

//背景移入移出切换效果

$('div').hover(function () {

    $(this).css('background', 'black'); //mouseenter 效果

}, function () {

    $(this).css('background', 'red'); //mouseleave 效果，可省略

});

注意：.hover()方法是结合了.mouseenter()方法和.mouseleva()方法，并非.mouseover()和.mouseout()方法。

//toggle

var flag = 1; //计数器
$('div').click(function () {
    if (flag == 1) {                //第一次点击
        $(this).css('background', 'black');
        flag = 2;
    } else if (flag == 2) {           //第二次点击
        $(this).css('background', 'blue');
        flag = 3
    } else if (flag == 3) { //第三次点击
        $(this).css('background', 'red');
        flag = 1
    }
});