JQuery中DOM事件绑定用法详解


Posted in Javascript onJune 13, 2015

本文实例讲述了JQuery中DOM事件绑定用法。分享给大家供大家参考。具体分析如下:

在文档加载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法的调用格式为:

bind( type [, data] , fn);

bind()方法有3个参数,说明如下。

第1个参数是事件类型,类型包括:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等,当然也可以是自定义名称。
第2个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象。
第3个参数则是用米绑定的处理函数。

可以发现,jQuery中的事件绑定类型比普通的JavaScript事件绑定类型少了“on”。例如鼠标单击事件在jQuer中对应的是click事件,而在JavaScript中对应的是onclick()函数。

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

1. 等待DOM加载完毕。
2. 找到“标题”所在的元素,绑定click事件。
3. 找到“内容”元素,将“内容”元素显示。

$(function(){
 $("#panel h5.head").bind("click",function(){
   var $content = $(this).next();
   if($content.is(":visible")){
      $content.hide();
    }else{
      $content.show();
    }
  })
})

与ready()方法一样,bind()方法也可以多次调用。

上面jQuery代码中有一个关键字this,与在JavaScript中的作用一样,this引用的是携带相应行为的DOM元素。为了使该DOM元素能够使用jQuery中的方法,可以使用$(this)将其转换为jQuery对象。

为了判断元素是否显示,可以使用jQuery中的is()方法来完成。在代码中,发现$(this).next("div.content")被多次使用,因此可以为它定义一个局部变量:$content。

上面的例子中,给元素绑定的事件类型是click,当用户单击的时候会触发绑定的事件,然后执行事件的函数代码。现在把事件类型换成mouseover和mouseout,即当光标滑过的时候,就触发事件。需要进行以下几步操作。

1. 等待DOM加载完毕。
2. 找到“标题”所在的元素,绑定mouseover事件。
3. 找到“内容”元素,显示“内容”。
4. 找到“标题”所在的元素,绑定mouseout事件。
5. 找到“内容”元素,隐藏“内容”。

代码运行后,当光标滑过“标题”链接后,相应的“内容”将被显示。当光标滑出“标题”链接后,相应的“内容”则被隐藏。

代码如下:

$(function(){ 
 $("#panel h5.head").bind("mouseover",function(){ 
  $(this).next().show(); 
 }); 
  $("#panel h5.head").bind("mouseout",function(){ 
   $(this).next().hide(); 
 }) 
})

在上面几个例子中,分别用bind()方法给“标题”绑定了click事件、mouseover事件和mouseout事件,绑定方法都一样。除此之外,bind0方法还能绑定其他所有的JavaScript事件。

像click、mouseover和mouseout这类事件,在程序中经常会使用到,jQuery为此也提供了一套简写的方法。简写方法和bind()方法的使用类似,实现的效果也相同,惟一的区别是能够减少代码量。

例如把上面的例子改写成使用简写绑定事件的方式,代码如下:

$(function(){
 $("#panel2 h5.head").mouseover(function(){
   $(this).next().show();
  });
  $("#panel2 h5.head").mouseout(function(){
    $(this).next().hide();
  })
})

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
ExtJS下grid的一些属性说明
Dec 13 Javascript
javascript时区函数介绍
Sep 14 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 #Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 #Javascript
JavaScript中的Math.E属性使用详解
Jun 12 #Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 #Javascript
JavaScript中的parse()方法使用简介
Jun 12 #Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 #Javascript
jQuery插件datepicker 日期连续选择
Jun 12 #Javascript
You might like
用PHP4访问Oracle815
2006/10/09 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
php生成图片验证码
2015/06/09 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
JQuery之拖拽插件实现代码
2011/04/14 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
简单了解常用的JavaScript 库
2020/07/16 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
python下载文件记录黑名单的实现代码
2017/10/24 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
从0开始的Python学习016异常
2019/04/08 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
房地产销售计划书
2014/01/10 职场文书
协议书范文
2015/01/27 职场文书
通知函格式范文
2015/04/27 职场文书
离职信范文
2015/06/23 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android