JQuery快速学三之一(事件)

来源：互联网发布：天涯明月刀网络延迟编辑：程序博客网时间：2024/04/30 00:59

首先我们来看一看jQuery事件，包括如下几部分：

1.页面载入 ready(fn)
2.事件处理 bind,one,trigger,triggerHandler,unbind
3.事件委派 live,die
4.事件切换 hover,toggle
5.普通事件 click,blur,focus......

页面载入：

ready事件是JQuery的一个标志性事件,ready事件和传统的JavaScript的load事件有点相像，主要区别是在执行时机方面。我们先来看一个例子吧：
[javascript] view plain copy print?
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    function Test(){
        alert("JavaScript");
    }

    function Test2(){
        alert("JQuery");
    }

    $(document).ready(function(){
        Test2();
    })

</script>
</head>

<body onLoad="Test()">

</body>
运行这个例子，会发现先弹出"JQuery",然后再弹出"JavaScript",这是他们两者之间的一个明显的区别。
区别：
1.）window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器之后才执行，即JavaScript此时才可以访问网页中的任何元素(图片，div)等等。
而通过JQuery中的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用了,也就是说JQuery的ready方法优于js的onload方法。
2.）JQuery中的$(document).ready()方法可以多次使用，而window.onload只加载一次，需要点技巧才可以多次使用(想知道的话，百度一下哈)。案例：
[javascript] view plain copy print?
<script type="text/javascript">
    $(function(){
        JQTe();
    })
    $(function(){
        JQTe2();
    })

    function JQTe(){
        alert("abc1");
    }

    function JQTe2(){
        alert("abc2");
    }

    function Js(){
        alert("0");
    }

    function Js2(){
        alert("1");
    }

    window.onload=Js;
    window.onload=Js2;
</script>
运行如上的案例：我们会发现通过JQuery中的$(document).ready()方法弹出了两个提示框，而传统的JavaScript只执行了最后一个。
温馨提示：$(document).ready(function(){...Code..})可以简写成：$(function(){..Code..})

事件处理：(bind,one,trigger,triggerHandler,unbind)

bind事件:绑定的元素必定要事先存在，后添加进来的元素无效(例如通过js动态添加新的元素，该元素将不会被bind事件所绑定)。
语法：$(选择器).bind('事件',function(){});
例如：
html代码：
<div id="abc">Div内容</div>
js代码：
$('#abc').bind('click',function(){
alert('bind事件');
});

one事件：为元素绑定一次性事件，该事件只会执行一次。
语法：$('选择器').one('click',function(){})
例如：
html代码：
<div id="abc">Div内容</div>
js代码：
$('#abc').one('click',function(){
alert('只会弹出一次');
});

trigger事件：模拟用户触发事件，该事件会引起冒泡(冒泡事件会在稍后提到)
例如：
html代码：
<div id="abc2">Div2内容<div id="abc">Div内容</div>
js代码：
[javascript] view plain copy print?
$(function(){
    $('#abc').click(function(){
        alert('test');
    })

    $('#abc2').click(function(){
        alert('test2');
    })

    $('#abc').trigger('click');
    $('#abc').click();
})
程序运行的时候为id为abc的元素绑定单击事件，并且为id为abc2的元素也绑定单击事件，绑定完成之后使用trigger模拟用户的点击操作，程序弹出alert('test');和alert('test2');
如此可见，该trigger会触发事件冒泡，模拟事件还可以使用如上写到的直接调用事件（$('#abc').click()），不为事件指定方法体即可，实现的效果和trigger一致。要阻止事件冒泡可以使用：stopPropagation(),该方法稍后会提到。

triggerHandler事件：与trigger事件相似，有如下不同之处：
1）triggerHandler方法并不会触发事件的默认行为。(例如，表单提交)。
2）trigger()会影响所有与 jQuery 对象相匹配的元素，而triggerHandler()仅影响第一个匹配到的元素。
3）使用 triggerHandler()创建的事件，并不会在 DOM 树中向上冒泡。如果事件没有被目标元素直接处理，那么它就不会进行任何处理。
4) 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，triggerHandler()返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined。

unbind事件：移除bind方法绑定的事件。
1）当直接使用unbind方法的时候，将去除对应元素上所有的bind方法绑定的事件，例如:$('#abc').unbind();
2）当然unbind方法也可以指定移除具体的事件，例如：$('#abc').unbind('click');移除id为abc上的click事件。
3）通过指定click事件类型,只有该事件类型的处理程序将解除绑定。但是,这种方法有种负面影响，这是因为有可能在代码的其它地方在相同的元素上绑定了相同的事件处理。为了避免该问题，对于一个健壮性和扩展性强的应用程序而言，通过在使用该方法时，会传入两个参数，例如：$('#abc').unbind('click',handler);
对于指定两个参数的情况下：下面的代码实现上是错误的：
[javascript] view plain copy print?
<script type="text/javascript">
    $(function(){
        $('#abc').bind('click',function(){
            alert('aa');
        })

        $('#btnTest').click(function(){
            $('#abc').unbind('click',function(){
                alert('abc');
            });
        })
    })
</script>
</head>

<body>
<div id="abc">Div内容</div>
<button id="btnTest">按钮</button>
</body>
这里当点击按钮移除元素id为abc的单击事件时，移除将会失败，程序会认为这是两个不同的事件。尽管上述代码中，两个匿名函数的内容是一样的，但是它们是在不同的地方被创建的，因此 JavaScript 会将它们当成是不同的函数对象。若要解除绑定特定的事件处理函数，我们需要的是指向该函数的引用，而不是内容相同的不同函数。
4）为了移除绑定处理程序的范围进一步的缩小，我们可以使用unbind()来移除相应命名空间的处理程序。
例如：
[javascript] view plain copy print?
<script type="text/javascript">
    $(function(){
        $('#txtName').bind('click.abc1',function(){
            alert('click abc1命名空间');
        });

        $('#txtName').bind('click.abc',function(){
            alert('click');
        });
        $('#txtName').bind('blur.abc',function(){
            alert('blur');
        });

        $('#btnTest').click(function(){
            $('#txtName').unbind('click.abc');//只移除id为txtName元素上命名空间为.abc的click事件
        })

        $('#btnTest2').click(function(){
            $('#txtName').unbind('.abc');//移除id为txtName元素上命名空间为.abc的所有事件
        })
    })
</script>
</head>

<body>
    <input type="text" id="txtName"/>
    <button id="btnTest">移除abc命名空间中的点击事件</button>
    <button id="btnTest2">移除abc命名空间中的所有事件</button>
</body>
5）unbind()也可以在事件处理内部解除事件处理。
例如：
[javascript] view plain copy print?
<script type="text/javascript">
    var num=1;
    $(function(){
        $('#btnTest').bind('click',function(event){//注意此处要加event
            alert('第'+num+"次");
            num++;
            if(num>3){
                $(this).unbind(event);
            }
        })
    })
</script>
</head>

<body>
<button id="btnTest">调用3次就移除事件</button>
</body>
当我们点击按钮到第四次时，事件已经不会再触发了，事件已经被移除。
注意：JQuery1.7版本以上推荐使用off移除事件处理。
off事件：移除一个事件处理。
语法：$('元素选择器').off(事件event,[选择器selector],[,函数]);
[javascript] view plain copy print?
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $('#abc').bind('click',function(){
            $('body').on('click','#abc1',aClick);//当点击id为abc的元素时，为body下的id为abc1的元素附加事件aClick
        });

        function aClick(){
            alert('text');
        }

        $('#btnTest').click(function(){
            $('body').off('click','#abc1',aClick);//去除body中id为abc1的元素的aClick事件
        })
    })
</script>
</head>

<body>
<div id="abc">div 内容</div>
<div id="abc1">abc1 内容</div>
<button id="btnTest">off移除</button>
</body>
注意：当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除。

事件委派:(live,die,on)

Jquery1.7版本上已经不推荐使用live,die,他们都有对应的优化使用方案：live推荐使用on,die推荐使用off,在这里我们就讲解on的用法。
on:在选定的元素上绑定一个或多个事件处理函数。
语法：on(事件event[,选择器selector][,要传递给事件处理函数的event.data。data][,事件被执行要触发的函数])
$('#abc').on('click',function(){});//为id为abc的元素绑定一个点击事件，无论这个元素是已经存在的，还是动态创建(后续添加进来的)

事件切换:(hover，toggle)

hover事件：是mouseenter和mouseleve方法的结合,这是官方API给出的，其实这两个方法就是我们所熟知的mouseover和mouseout。因为mouseenter和mouseleve这两个方法是专门针对IE的，JQuery对其进行了优化和适用。
[javascript] view plain copy print?
<script type="text/javascript">
    $(function(){
        $('div').hover(function(){
            alert('a');//鼠标悬浮弹出
        },function(){
            alert('b');//鼠标离开位置弹出
        })
    })
</script>
</head>

<body>
<div style="width:200px;height:200px;background:#ccc;"></div>
</body>
toggle事件:显示或隐藏事件，当元素是隐藏时，把元素显示出来，当元素是显示时，把元素进行隐藏。
语法一：toggle([,时间][,执行完触发的函数])
语法二：toggle(options),有如下附加参数：
1)duration运行时间，
2)easing过渡效果(Jquery提供了liner,swing,想实现更多的效果需要下载插件)，
3)complete成功执行完触发的函数，
4)step(Number now, PlainObject fx)每步动画执行后调用的函数。
5)queue(默认为true一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。从jQuery1.7开始，队列选项也可以接受一个字符串，在这种情况下，在动画被添加到由该字符串表示的队列中。),
6)specialEasing:一组一个或多个通过相应的参数和相对简单函数定义的CSS属性

案例：
[javascript] view plain copy print?
<script type="text/javascript">
    $(function(){
        $('#btn').click(function(){
            $('div').toggle(1000,'swing');//点击按钮时触发，对div元素以1秒执行显示或隐藏动画
        })
    })
</script>
</head>

<body>
    <div style="width:200px;height:200px;background:#ccc;"></div>
    <button id="btn">按钮</button>
</body>

致此JQuery的大部分事件已经讲解完毕，各位如有发现文章有什么错误之处，还望指出，感激不尽。下一章将讲解JQuery的动画。

文章转自：http://blog.csdn.net/shiyuan17/article/details/9422409

0 0