昨天呢, 我们大家一起分享了 jQuery 中的样式选择器, 那么今天我们就来看一下 jQuery 中的事件机制, 其实, jQuery 中的事件机制与 JavaScript 中的事件机制区别是不大的, 只是, JavaScript 中调用是原生的函数方法, 而 jQuery 中调用的绑定的是 jQuery 中的对象方法, 那么在昨天的第一篇中, 我们已经说过了 jQuery 对象和 DOM 对象之间的转换, 至于其中的转换的原理, 我们就需要去分析一下 jQuery 中的源码了, 这个我们在源码分析中再去做讨论,
首先呢, 我们先来看一下, jQuery 中的 ready 事件, 它的作用有些类似于 window 中的 onload 事件, 只不过二者的区别在于, onload 事件是要等到网页中的 dom 节点加载完成, 并且 CSS 进行样式渲染后, JavaScript 中进行了预加载后再执行, 而 ready 事件呢, 是在网页中的标签被解析为 DOM 节点是就执行其中的函数, 直白点说, ready 执行的比 onload 早, 那么我们在用 jQuery 的时候, 需要做一个 ready 的执行定义:
- 1 //ready的作用,是为具体加载的实现.
- 2 $(document).ready(function() {
- 3 alert('1234');
- 4
- });
- 5 //第二种,少了一个document,创建一个空的jQuery对象.
- 6 $().ready(function() {
- 7 alert('abcd');
- 8
- });
- 9 //第三种,简写版的,
- 10 $(function() {
- 11 alert('23333');
- 12
- });
那么我们再来看一下 onload 和 ready 的第二个区别:
- 1 //如果有两个window.onload它只会执行最后一个.如果有多个的话,后边的会将前面的覆盖掉.
- 2 3 window.onload = function() {
- 4 alert(1);
- 5
- }
- 6 window.onload = function() {
- 7 alert(2);
- 8
- }
- 9 //而window.ready 则可以设置多个函数,都去作用.
- 10 $(document).ready(function() {
- alert(1)
- }) 11 $(document).ready(function() {
- alert(3)
- }) 12 //这里的可以设置多个函数,是指的对于同一个对象设置
那么我们再来看一下 jQuery 中的事件绑定, 这里我们一 onclick 事件来举例, 当我们在 js 中进行事件绑定的时候, 我们分为 dom1 级事件, dom2 级事件, 其中还包括对于 IE 浏览器的兼容性考虑, 那么当我们使用 jQuery 中的事件机制时, 就不用去考虑那么多了, jQuery 内部已经帮我们做好了兼容性之类的操作, 讲真, 这真的是很方便了我们了:
- 1 //DOM1级事件
- 2
- var itNode = document.getElementById('id');
- 3 itNode.onclick = function() {};
- 4 div.onclick = null;
- DOM1级中解除事件绑定5 6 //DOM2级事件
- 7 itNode.addEventListener('click',
- function() {});
- 8 itNode.removeEventListener();
- 9 itNode.attachEvent(); //IE 6 8 7 兼容性处理
- 10 detachEvent();
- IE中接触事件绑定11 //使用jQuery来操作绑定事件
- 12 //$().事件类型(function(){});
- 13 //$().事件类型();
- 14 $(function() {
- 15 $('div').click(function() { //给div绑定了一个onclick事件
- 16 $('div').css('color', 'green');
- 17
- });
- 18 $('div').mouseover(function() {
- 19 $(this).css('color', 'yellow');
- 20
- });
- 21
- });
这里的一个主意点就是当绑定事件时, 事件名是不用写 on 的, 其实我们还可以用另一种写法 $('div').on('click',funciton(){}); 上面的那种写法就是这种写法的简化, 二者的作用还是一样的. 那么当我们需要给当前 jQuery 对象添加多个事件的时候, 我们就可以使用 bind 方法来处理了:
- 1 2 //$().bind(事件类型,事件处理函数(分为有名函数,和匿名函数))
- 3 $(function() {
- 4 //绑定一个鼠标移动上去处理的事件.
- 5 $('div').bind('mouseover',
- function() {
- 6 $('div').css('background-color', 'blue');
- 7
- });
- 8 $('div').bind('mouseout',
- function() {
- 9 $('div').css('background-color', 'yellow');
- 10
- });
- 11 12 //一个函数绑定多个事件 这多个时间之间只需要用空格隔开.
- 13 //这个虽然可以绑定多个事件,但是函数比较单一,不灵活.
- 14 $('div').bind('mouseover mouseout',
- function() {
- 15 console.log(1234);
- 16
- });
- 17 //使用对象的形式来绑定多个事件,
- 18 $('div').bind({
- 19 click: function() {
- console.log(1);
- },
- 20 mouseover: function() {
- alert(22);
- },
- 21 mouseout: function() {
- alert(33);
- }
- 22
- });
- 23 24 //绑定有名的函数
- 25
- function fa() {
- alert("fa");
- };
- 26
- function fb() {
- alert("fb");
- };
- 27
- function fc() {
- alert("fc");
- };
- 28 $('div').bind('click', fb);
- 29 $('div').bind('click', fc);
- 30 31 $('div').unbind(); //这样直接调用unbind函数会直接将所有绑定的事件都取消掉.
- 32 $('div').unbind('click'); //这样子就会将div里边所有的click绑定的事件取消掉了
- 33 //直接解除指定的函数的绑定,这种方式也只能解除有名函数的绑定,不能解除指定的匿名函数的绑定
- 34 $('div').unbind('click', fa);
- 35 36
- });
当然, 在事件处理中, 事件对象无疑是我们经常要使用的一个对象, 在 js 中, 我们获取对象时还要考虑到兼容性问题, 但是在 jquery 中, 我们根本就不用考虑, 只需要直接使用函数中传递的 event 参数就行了:
- 1
- function(evt) {
- 2
- var evt = evt || window.event;
- 3 evt.preventDefault(); //主流浏览器阻止默认事件
- 4 evt.returnValue = false; // IE中阻止对象默认事件
- 5 evt.stopPropagation(); //主流浏览器中阻止浏览器冒泡
- 6 evt.cancelBubble(); //IE中阻止浏览器冒泡处理
- 7 8
- }
- 9 $().bind('click',
- function(evt) {
- 10 //evt不用做兼容性处理
- 11 evt.preventDefault(); //阻止浏览器的默认动作.
- 12 evt.stopPropagation(); //阻止浏览器冒泡,
- 13
- });
当然了, 我们 jQuery 中的事件也是由键盘事件, 鼠标事件, 表单事件, 甚至还有自定义的事件等等, 和 js 中的基本一样, 总结起来呢, 使用 jQuery 使我们不用去考虑兼容性问题, 同时代码量也大大的减少了.
来源: http://www.cnblogs.com/blackgan/p/5796875.html