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 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
Javascript中的async awai的用法
May 17 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
vue写一个组件
2018/04/09 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
python线程信号量semaphore使用解析
2019/11/30 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
如何利用cmp命令比较文件
2013/09/23 面试题
科级干部考察材料
2014/02/15 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
常住证明范本
2015/06/23 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js