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 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
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函数代码
2010/04/22 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
ES6的解构赋值实例详解
2019/05/06 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
python利用装饰器进行运算的实例分析
2015/08/04 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
一名女生的自荐信
2013/12/08 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
陕西导游词
2015/02/04 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书