jQuery绑定事件的几种实现方式

本文实例为大家分享了jQuery绑定事件多种实现方法，供大家参考，具体内容如下

<html>
<head>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><!--百度CDN-->
</head>

<body>
<input type="text"/>
<input type="button" value="button1"/>
<script>
$(function(){
  var text = $(":text");
  var button = $(":button");
  //调试器记录日志 console.log("message"); 如：火狐浏览器，打开FireBug(按F12)

  //触发单个事件：两种方式
  button.bind("mouseover",function(){
    console.log("移入");
  });
  button.bind({
    "mouseout": function(){
      console.log("移出");
    }
  });
  //多个事件：三个方式
  text.bind("dblclick blur",function(){
    console.log("双击或者失去焦点");
  });
  text.bind({
    "dblclick blur":function(){
      console.log("双击或者失去焦点");
    }
  });
  text.bind({
    "dblclick":function(){
      console.log("双击");
    },
    blur:function(){
      console.log("失去焦点");
    }
  });

  //取消事件
  text.unbind("dblclick"); //取消单个事件
  //text.unbind("dblclick blur"); //取消多个事件
  //text.unbind(); //取消全部事件
});

</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家继续关注小编为大家分享的精彩文章。

赞 (0)

相关推荐

  • jquery移除、绑定、触发元素事件使用示例详解

    复制代码 代码如下: unbind(type [,data])     //data是要移除的函数$('#btn').unbind("click"); //移除click$('#btn').unbind(); //移除所有 对于只需要触发一次的,随后就要立即解除绑定的情况,用one() 复制代码 代码如下: $('#btn').one("click",function(){.......}); 触发操作trigger() 方法触发被选元素的指定事件类型. 复制代码

  • jquery单选框radio绑定click事件实现方法

    本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <title>单选框radio绑定click事件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="

  • jQuery事件绑定on()、bind()与delegate() 方法详解

    啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天查了下资料,自己做个总结. 之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的. jQuery的事件绑定api页面上,提到live()方法已经过时,不建议使用.所以这里我们主要就看下以下三个方法:bind().del

  • JQuery中使用on方法绑定hover事件实例

    文本教你用on方法,模拟hover方法. 代码如下: 复制代码 代码如下: $(obj).on("mouseover mouseout",function(event){  if(event.type == "mouseover"){   //鼠标悬浮  }else if(event.type == "mouseout"){   //鼠标离开  } }) 赶紧去试试吧~

  • JQuery给元素绑定click事件多次执行的解决方法

    原绑定方法: 复制代码 代码如下: $("#sdfsd").on("mouseout",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: 复制代码 代码如下: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

  • jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 <div id="testdiv"> <ul>&l

  • JQuery调用绑定click事件的3种写法

    第一种方式: $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World click"); }); 第二种方式: $('#clickmebind').bind("click", function(){ alert("Hello World bind"); }); 第三种方式: $('#clickmeon').on('click

  • 关于jQuery新的事件绑定机制on()的使用技巧

    今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔

  • jQuery实现按钮只点击一次后就取消点击事件绑定的方法

    本文实例讲述了jQuery实现按钮只点击一次后就取消点击事件绑定的方法.分享给大家供大家参考.具体实现方法如下: <input type="button" id="my-selector" value="只能点击一次" /> <script> $('#my-selector').bind('click', function() { $(this).unbind('click'); alert('Clicked and un

  • jQuery事件绑定.on()简要概述及应用

    jQuery事件绑定.on()简要概述及应用

    前几天在看<jquery基础教程>,看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的. 然后在一处看到live()已经被移除了,囧,然后去看了最新的jq源码,果然被移除了,现在是1.9.1版本,不知道live()是在之前哪个版本被移除的,惭愧啊,之前都没留意. 看源码发现bind()和delegate()都是由on()实现的.on()的描述如下: 复制代码 代码如下: .on( events [, selector ] [, data

随机推荐