Jquery真的不难~第四回 JQ也是事件驱动的（匿名函数的使用）

回到目录

上一篇文章主要说的是JQ中如何去操作HTML标签的样式，今天主要来学习一下JQ几个比较重要的事件，如单击click，双击dblclick，鼠标移入mouseover，移出mouseout，焦点focus，移出焦点blur等等

• 前言

• 单击

• 双击

• 鼠标移入与移出

• 焦点与移出焦点

• JS中的匿名函数

前言

事件一词，大家应该不会陌生，我认为可以这样定义事件，当某个或某几个操作之后，会引入一个或者几个结果的产生，而这个结果我们叫它事件，即Event,JS世界中的事件与传统高级语言中的事件很类似，如对鼠标的单击，双击，键盘的按下，抬起等等，而在JQ的封装下，我们可以为JQ对象（一般是以$开头的变量，当然$只是JQ的标准写法，你可以自己去重新定义它）很容易的添加事件，格式一般为:

Jq对象.事件(function () {... });

代码书写方法很友好，其中还使用JS中的匿名方法（函数），稍候我会继续介绍匿名方法。

单击

$("#test").click(function () {

            alert("单击事件")

        });

双击

   $("#test").dblclick(function () {

            alert("双击事件")

        });

鼠标移入与移出

$("#msg").mouseover(function(){$(this).addClass("selected");});
$("#msg").mouseout(function(){$(this).removeClass("selected");});焦点与移出焦点

对于JQ事件，我们可以使用连接串的写法，即将多个事件写在一行中，JQ对象只在第一个事件前出现即可，如下代码：

$("#msg").mouseout(function(){$(this).removeClass("selected");})

         .mouseover(function(){$(this).addClass("selected");})

JS中的匿名函数

JS中的函数（方法）有两种，实名函数与匿名函数，实名函数一般用来干一件独立的事，因为匿名函数一般对在某个实名函数里出现，起到了返回全局变量的作用，如下代码：

        function zzl() {

             var res = function () {//匿名函数

                return {

                    msg: "OK"

                };

            };

            return res;

        }



         alert((zzl())().msg);

事实上，定义实名函数的第二种，即变量式函数也是使用了一个匿名函数的东西，呵呵，代码如下：

var log=function(msg){

  alert(msg);

}

有时，在函数中返回一个对象与返回一个函数总是让我们感到头病，有时，可能不知道如何去调用一个这样的复杂函数，看代码：

　　　　　var ReturnObject = function () {

            return { //返回一个对象

                msg: "返回一个对象"

            };

        }

        var ReturnFunction = function () {

            var fun = function () {

                return {

                    msg: "返回一个函数"

                };

            };

            return fun; //返回一个函数

        }

事实上，调用的时候，你的头脑是否清晰，如果清晰的活，还就没什么难的了，返回是对象，直接就是ReturnObject().msg，返回的是函数，当然

你要加个（）了，就像这样ReturnFunction()().msg)，当然如果你不()()，这样的写法如果你认识可读性差，可以改为(ReturnFunction())().msg

看上去就清晰一些了，呵呵！

输出一下吧：

  console.log(ReturnObject().msg);

　console.log(ReturnFunction()().msg);

  console.log((ReturnFunction())().msg);

结果如下：

 

恩，其实所有的东西都是相通的，只要你相信你自己，就一定可以成功！

感谢您的阅读！晚安！

感谢让我找到了写手的感觉，呵呵！谢谢！

回到目录