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 相关文章推荐
window.name代替cookie的实现代码
Nov 28 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
Python 字典(Dictionary)操作详解
2014/03/11 Python
python基础教程之序列详解
2014/08/29 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
python二维键值数组生成转json的例子
2019/12/06 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
高级Java程序员面试题
2016/06/23 面试题
房地产销售经理岗位职责
2014/01/01 职场文书
党课心得体会范文
2014/09/09 职场文书
幼儿园辞职书
2015/02/26 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
深入理解python多线程编程
2021/04/18 Python
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫