第一百六十九节，jQuery，基础事件

jQuery，基础事件

 

学习要点：

　　1.绑定事件

　　2.简写事件

　　3.复合事件

 

JavaScript 有一个非常重要的功能，就是事件驱动。当页面完全加载后，用户通过鼠标 或键盘触发页面中绑定事件的元素即可触发。jQuery 为开发者更有效率的编写事件行为，封 装了大量有益的事件方法供我们使用。

 

一．绑定事件

在 JavaScript 课程的学习中，我们掌握了很多使用的事件，常用的事件有：click、dblclick、 mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、 keypress、keyup、blur、focus、load、resize、scroll、error。那么，还有更多的事件可以参考 手册中的事件部分。

jQuery 通过.bind()方法来为元素绑定这些事件。可以传递三个参数：bind(type, [data], fn)， type 表示一个或多个类型的事件名字符串；[data]是可选的，作为 event.data 属性值传递一个 额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；fn 表示绑定到指 定元素的处理函数。

bind()绑定事件函数，接收两个参数，参数1事件名称，参数2事件函数，可以绑定多个事件，也可以传入对象来绑定多个函数

使用点击事件

//使用点击事件
$('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()删除绑定事件，有参删除当前元素指定的绑定事件，无参删除当前元素全部绑定事件

使用 unbind 删除绑定的事件

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

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

//使用 unbind 参数删除指定类型事件
$('input').unbind('click'); //删除当前元素的 click 事件

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

//使用 unbind 参数删除指定处理函数的事件
    function fn1() {
        alert('点击 1');
    }

    function fn2() {
        alert('点击 2');
    }

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

 

二．简写事件

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

click(fn) 鼠标 触发每一个匹配元素的 click(单击)事件

$('div').click(function () {   //单击后触发事件函数
        alert('点击后执行');
    });

 

dblclick(fn) 鼠标 触发每一个匹配元素的 dblclick(双击)事件

    $('div').dblclick(function () {   //双击后触发事件函数
        alert('执行');
    });

 

mousedown(fn) 鼠标 触发每一个匹配元素的 mousedown(鼠标左键按下)事件

$('div').mousedown(function () {   
        alert('执行');
    });

mouseup(fn) 鼠标 触发每一个匹配元素的 mouseup(鼠标左键弹起)事件

$('div').mouseup(function () {
        alert('执行');
    });

 

mouseover(fn) 鼠标 触发每一个匹配元素的 mouseover(鼠标移入)事件，子元素也起作用

 $('div').mouseover(function () {
        alert('执行');
    });

mouseout(fn) 鼠标 触发每一个匹配元素的 mouseout(鼠标移出)事件，子元素也起作用

$('div').mouseout(function () {
        alert('执行');
    });

 

mousemove(fn) 鼠标 触发每一个匹配元素的 mousemove(鼠标移动时)事件，

    $('div').mousemove(function () {
        alert('执行');
    });

 

mouseenter(fn) 鼠标 触发每一个匹配元素的 mouseenter(鼠标穿过)事件，子元素不起作用

    $('div').mouseenter(function () {
        alert('执行');
    });

mouseleave(fn) 鼠标 触发每一个匹配元素的 mouseleave(鼠标穿出)事件，子元素不起作用

    $('div').mouseleave(function () {
        alert('执行');
    });

mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么 jQuery 还封装了另外 一组：.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有 什么区别呢？手册上的说明是：.mouseenter()和.mouseleave()这组穿过子元素不会触发， 而.mouseover()和.mouseout()则会触发。

keydown(fn) 键盘 触发每一个匹配元素的 keydown(键盘按下)事件，事件函数可以传一个参数e来接收事件对象

    $('input').keydown(function () {
        alert('执行');
    });

事件函数可以传一个参数e来接收事件对象，这个事件对象有一个属性e.keyCode，返回按键码

    $('input').keydown(function (e) {
        alert(e.keyCode);
    });

 

keyup(fn) 键盘 触发每一个匹配元素的 keyup(键盘按下弹起)事件

    $('input').keyup(function () {
        alert('执行');
    });

事件函数可以传一个参数e来接收事件对象，这个事件对象有一个属性e.keyCode，返回按键码

    $('input').keyup(function (e) {
        alert(e.keyCode);
    });

keypress(fn) 键盘 触发每一个匹配元素的 keypress(键盘按下)事件

    $('input').keypress(function (e) {
        alert('执行');
    });

事件函数可以传一个参数e来接收事件对象，这个事件对象有一个属性e.charCode，返回按键字符编码

    $('input').keypress(function (e) {
        alert(e.charCode);
    });

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

 

unload(fn) 文档 当卸载本页面时，就是关闭刷新页面，绑定一个要执行的函数，火狐不支持，一般用于清理工作

    $(window).unload(function () {
        alert('执行');
    });

 

resize(fn) 文档 触发每一个匹配元素的 resize(浏览器窗口改变大小时)事件

    $(window).resize(function () {
        alert('执行');
    });

scroll(fn) 文档 触发每一个匹配元素的 scroll(滚动条拖动)事件

    $(window).scroll(function () {
        alert('执行');
    });

focus(fn) 表单 触发每一个匹配元素的 focus(焦点激活)事件，必须在当前元素上使用

    $('input').focus(function () {
        alert('执行');
    });

 

blur(fn) 表单 触发每一个匹配元素的 blur(焦点丢失)事件，必须在当前元素上使用

    $('input').blur(function () {
        alert('执行');
    });

 

focusin(fn) 表单 触发每一个匹配元素的 focusin(焦点激活)事件，可以在div上使用，可以绑定div里面的表单事件

    $('div').focusin(function () {
        alert('执行');
    });

 

focusout(fn) 表单 触发每一个匹配元素的 focusout(焦点丢失)事件，可以在div上使用，可以绑定div里面的表单事件

    $('div').focusout(function () {
        alert('执行');
    });

select(fn) 表单 触发每一个匹配元素的 select(文本选定)事件

    $('input').select(function () {
        alert('执行');
    });

change(fn) 表单 触发每一个匹配元素的 change(value值改变并且光标离开后)事件，

    $('input').change(function () {
        alert('执行');
    });

submit(fn) 表单 触发每一个匹配元素的 submit(表单提交)事件，此事件在form元素上使用

    $('form').submit(function () {
        alert('执行');
    });

 

三．复合事件

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

 

ready(fn) 当 DOM 加载完毕触发事件

    $().ready(function () {
        alert('执行');
    });

hover([fn1,]fn2) 当鼠标移入触发第一个 fn1，移出触发 fn2，鼠标移入移出事件，传一个参数是移入事件

    $('div').hover(function () {
        alert('执行移入');
    },function () {
        alert('执行移出');
    });

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

自定义点击循环切换

 

    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
        }
    });