专栏首页王金龙的专栏jQuery:详解jQuery中的事件(一)

jQuery:详解jQuery中的事件(一)

之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源。后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代码,但是自觉还差的好远,跟好多大神(比如阮一峰)的理解还是有很大差距。现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。

  JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。当文档或者它的某些元素发生某些变化或操作时,浏览器就会自动生成一个事件。当然使用传统的JavaScript也能完成这些交互,但是jQuery增加兵扩展了基本的事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件处理能力。

  一、jQuery中的事件

  1、加载DOM:

  执行时机:在常规的JavaScript中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法,通过使用此方法,可以在DOM载入就绪时就对其进行操纵兵调用执行它所绑定的函数。

  注意以上两种方法的区别:

  window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行,也即在此时JavaScript才可以访问网页中的任何元素;

  $(document).ready()方法注册的事件处理程序,在DOM完全就绪时就可以被调用,也即此时网页的所有元素对jQuery都是可以访问的,但是并不是这些元素关联的文件都已经下载完毕。

  根据上述描述,显然使用jQuery的$(docum).ready()方法时会出现一个问题。由于在该方法内注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载晚。例如与图片相关的HTML下载完毕,并且已经解析为DOM树了,但是很有可能图片还未完全加载,所以例如图片的高度和宽度等属性就不一定有效。

  要解决这个问题,可以使用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象,则会在所有的内容(包括窗口、框架、对象和图像等)加载完毕后触发,出国处理函数绑定在元素上,则会在元素的内容加载完毕后触发。

  jQuery代码如下:

$(window).load(function(){
   //code... 
})

  等价于JavaScript中的以下代码:

window.onload = function(){
  //code...  
}

  多次调用:

window.onload方法是不能被多次调用的,因为JavaScript的onload事件一次只能保存对一个函数的引用,它会自动用后面的函数覆盖前面的函数,所以即使将上面代码中的window.load赋值两次,也只会执行后面的函数。所以如果想达到两个函数顺序触发的效果,只能使用下面的方法来实现——也即再创建一个新的JavaScript方法,JavaScript代码如下:

window.load = function(){
  func1();
  func2();
}

  这种写法是可以解决一些问题的,但是如果有多个JavaScript文件,或者在团队开发中,每个文件都需要用到window.onload方法,这种情况下还用这种方法就非常麻烦了。

  jQuery的$(document).ready()方法就可以很好的解决这种问题——每次调用$(document).ready()方法都会在现有的行为上追加新的行为,这些行为函数会根据注册的顺序依次执行。例如,上面的JavaScript代码就可以用jQuery来很好的实现:

function func1(){
  //code...
}
function func1(){
  //code...
}

//下面的jQuery代码就可以顺序执行上面的两个函数,并且如果还有其他的绑onload函数也可以这样绑定
$(document).ready(function(){
  func1();
});
$(document).ready(function(){
  func2();
});

  简写方式:几种等价的书写方式:

$(document).ready(function(){
   //code... 
})
$(function(){
  //code...
})
//默认参数是document
$().ready(fucntion(){
  //code...
})

  2、事件绑定:文档装载完成了,接着就是为元素绑定事件来完成某些操作了,所使用的是bind()方法。bind()方法的调用格式为:

bind(type, [data], fn);

  其中type是事件类型,包括:click,keypress,load,submit,dblclick,keydown,change,resize,mouseenter,keyup,scroll,focus,mouseleave,blur,unload等,也可以是自定义事件名称。第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象。第三个参数则是用来绑定的处理函数。举个实际的例子,下面网页中,单击“标题”链接将显示内容。

  HTML代码如下:

<div id="container">
  <h4 class="head">jQuery事件机制</h4>
  <div class="content">
    jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
  </div>
</div>

  按照需求,需要完成以下几个步骤:

  (1)等待DOM装载完毕;

  (2)找到“标题”所在的元素,绑定click事件;

  (3)找到“内容”元素,将“内容”显示出来。

  根据分析的步骤,写出jQuery代码如下:

$(function(){
    $("#container h4.head").bind("click", function(){
      $(this).next().show();    //获取并显示“内容”元素
    })
  })

  当然可以加强效果,并且改变绑定事件的类型,比如鼠标悬停时显示“内容”,鼠标离开时隐藏“内容”。jQuery代码如下:

$(function(){
    $("#container h4.head").bind("mouseover", function(){
      $(this).next().show();    //获取并显示“内容”元素
    }).bind("mouseout", function(){
      $(this).next().hide();
    });
  })

  这里需要知道的一点是,jQuery中bind方法是可以多次调用的,并且可以简化为将上面的第二个bind去掉。

  明天继续完成jQuery事件的下半部分,包括的内容有合成事件、事件冒泡、移除事件等内容。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js封装好的模仿qq消息弹窗代码

    在我们的日常开发中,或者生活中,经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗。

    业余草
  • 纯js实现点击一个事件后,触发另外一个事件的方法

    我们在日常的开发中,经常会用到,当我点击一个按钮的click事件后,我想触发另一个按钮的click事件。 这时我们该怎么做...

    业余草
  • 微信小程序开发--【Hello World 及代码结构】(二)

    通过上一篇我们已经完成了注册及开发环境的搭建,今天我们来开发我们的第一个微信小程序 微信小程序开发注册流程

    先知先觉
  • Android多线程的使用

    在很多编程语言中,线程都是一个重要的组成部分,多线程的支持可以给程序员更加灵活的程序功能实现代码编写方式,线程一般用于处理一些比较耗时的任务(下载文件、复制或者...

    指点
  • 使用truffle开发以太坊Dapp

      上一篇我们介绍了使用web3.js与以太坊智能合约交互,其中介绍了合约的编译、部署、执行等操作,但是很明显,如果要开发dapp,仅仅使用web3.js是不够...

    JouyPub
  • Koa框架教程,Koa框架开发指南,Koa框架中文使用手册,Koa框架中文文档

    koa 是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用,通过组合不同的 ge...

    业余草
  • 【React Native 安卓开发】----(mac下开发环境配置)【第一篇】

    Android Studio安装相信大家都会就忽落了。 SDK配置详见博客: http://blog.csdn.net/github_33304260/...

    先知先觉
  • HTML5 Canvas API详解

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — ...

    业余草
  • JavaScript设计模式 观察者模式

    观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时...

    菜的黑人牙膏
  • 快应用开发教程【02】--项目配置教程

    每个应用都要有专属的名称,图标等,这些信息都需要在manifest.json文件中配置;详细信息请参考文档:manifest文件

    先知先觉

扫码关注云+社区

领取腾讯云代金券