jQuery事件篇---基础事件

写在前面：

　　有一段时间未更新博客了，利用这段时间，重新看了《jQuery基础教程 第四版》和《锋利的jQuery 第二版》，这两本书绝对是jQuery入门非常好的书，值得多读几遍，并将上面的代码逐个敲一下来体会jQuery的魅力！

　　利用接下来一段时间结合这两本书对jQuery基础知识做个梳理，算是读书笔记吧，方便他人，方便自己，不足之处，希望读者多多指教！

发文不易，转载注明出处！

 

内容摘要：

1.绑定事件

2.简写事件

3.复合事件

一．绑定事件

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 处理函数的事件

 

二．简写事件

为了使开发者更加方便的绑定事件，jQuery 封装了常用的事件以便节约更多的代码。 我们称它为简写事件。

 

上述简写形式大部分都很好理解，这儿只挑选几个容易迷惑的进行说明：

 1.    .mouseover()和.mouseout() && .mouseenter()和.mouseleave()

.mouseover()和.mouseout()表示鼠标移入和移出的时候触发。而.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。

那么这两组本质上有什么区别呢？

手册上的说明是：.mouseenter()和.mouseleave()这组穿过子元素不会触发，而.mouseover()和.mouseout()则会触发。看下面的实例：

//HTML 页面设置

<div style="width:200px;height:200px;background:green;">

    <p style="width:100px;height:100px;background:red;"></p>

</div>

<strong></strong> 

//mouseover 移入

$('div').mouseover(function () {                //移入 div 会触发，移入 p 再触发

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

        return value+'1';
    
    });

});

 

 //mouseenter 穿过

$('div').mouseenter(function () {     //穿过 div 或者 p，在这个区域只触发一次

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

        return value+'1';

    });

});

同理mouseout和mouseleave。

  

 2.   .keydown()、.keyup() && .keypress()

.keydown()、.keyup()返回的是键码，而.keypress()返回的是字符编码。

 

$('input').keydown(function (e) {

alert(e.keyCode);            //按下 a 返回 65

});

 

$('input').keypress(function (e) {

alert(e.charCode);                   //按下 a 返回 97

});

注意：e.keyCode 和 e.charCode 在两种事件互换也会产生不同的效果，除了字符还有一些非字符键的区别。更多详情可以查看我的 JavaScript事件处理的博客。

 

 3.   .focus()和.blur() && .focusin()和.focusout()

.focus()和.blur()分别表示光标激活和丢失，事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。

 

//HTML 部分

<div style="width:200px;height:200px;background:red;">

    <input type="text" value="" />

</div>

<strong></strong>


 

 

//focus 光标激活

$('input').focus(function () {     //当前元素触发

$('strong').html('123');

});

 

//focusin 光标激活 

$('div').focusin(function () {      //绑定的是 div 元素，子类 input 触发激活（用focus不行）

$('strong').html('123'); 

});

同理，.blur()和.focusout()表示光标丢失，和激活类似，一个必须当前元素触发，一个可以是子元素触发。

 

三．复合事件

 

jQuery 提供了许多最常用的事件效果， 组合一些功能实现了一些复合事件， 比如切换功 能、智能加载等。

 

 

 

示例：

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

 

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

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

    }, function () {

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

}); 

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

.toggle()这个方法比较特殊，这个方法有两层含义，第一层含义就是已经被 1.8 版废用、1.9 版删除掉的用法， 也就是点击切换复合事件的用法。 第二层函数将会在后面动画篇中讲解。 

既然废弃掉了，就不应该使用。被删除的原因是：以减少混乱和提高潜在的模块化程度。

但你又非常想用这个方法，并且不想自己编写类似的功能，可以下载 jquery-migrate.js文件，来向下兼容已被删除掉的方法。

 

示例：

//背景点击切换效果(1.9 版删除掉了，首先要引入jquery-migrate.js文件)

<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>


$('div').toggle(function () {      　　　　  //第一次点击切换

    $(this).css('background', 'black');

    }, function () {                   　　 //第二次点击切换

    $(this).css('background', 'blue');

    }, function () {                       //第三次点击切换

    $(this).css('background', 'red');

});

  

注意：由于官方已经删除掉这个方法，所以也是不推荐使用的，如果在不基于向下兼容的插件 JS。我们可以自己实现这个功能。

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

    }

});

For my lover,

and thank you Mr.Lee!