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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
Ajax实现三级联动效果
Oct 05 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
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
img的onload的另类用法
2008/01/10 Javascript
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
总结js函数相关知识点
2018/02/27 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
python中提高pip install速度
2020/02/14 Python
python里glob模块知识点总结
2021/01/05 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
大学生自荐信
2013/12/11 职场文书
玲玲的画教学反思
2014/02/04 职场文书
教师职称自我鉴定
2014/02/12 职场文书
环境工程专业自荐信
2014/03/03 职场文书
公司授权委托书范本
2014/04/03 职场文书
商业街策划方案
2014/05/31 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书