jQuery事件详解


Posted in Javascript onFebruary 23, 2017

一.window事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>New Web Project</title>
  <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
  <script type="text/javascript">
   $(function(){
    alert("1");
   })
   window.onload=function
  </script>
 </head>
 <body>
  <h1>New Web Project Page</h1>
 </body>
</html>

二.鼠标事件(光棒效果)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>New Web Project</title>
  <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
  <script type="text/javascript">
   $(function(){
    var aa=$("li");
    aa.mouseover(function(){
     $(this).css("background","blue")
    })
    aa.mouseout(function(){
     $(this).css("background","")
    })
   })
  </script>
 </head>
 <body>
  <ul>
   <li>呵呵</li>
   <li>嘻嘻</li>
   <li>哈哈</li>
  </ul>
 </body>
</html>

三.键盘事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>New Web Project</title>
  <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
  <script type="text/javascript">
   $(function(){
    $("input").keyup(function(event){
     var co=event.keyCode;
     alert(co);
    })
   })
  </script>
 </head>
 <body>
  <h1>呵呵</h1> 
  <input />
 </body>
</html>

四.表单事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>New Web Project</title>
  <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
  <script type="text/javascript">
   $(function(){
    $("input").focus(function(){
     $("span").addClass("myred")
    });
    $("input").blur(function(){
     $("span").removeClass("myred")
    });
   });
  </script>
 </head>
 <body>
  <h1>呵呵</h1> 
  <input /><span >啊啊啊啊啊啊</span><br />
  <input /><span >啊啊啊啊啊啊</span>
 </body>
</html>

五.绑定 解除

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>New Web Project</title>
  <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
  <script type="text/javascript">
   $(function(){
    $("li").bind({
     "mouseover":function(){
      $(this).css("background","blue")
     },
     "mouseout":function(){
      $(this).css("background","")
     }
     "click":function(){
      alert($(this).text());
     }
    }).unbind("mouseover mouseout");
    });
  </script>
 </head>
 <body>
  <ul>
   <li>呵呵</li>
   <li>嘻嘻</li>
   <li>哈哈</li>
  </ul>
 </body>
</html>

JQ的live(),on(),deletage(),bind()几个的区别

bind()方法是绑定事件最直接的方法,这个方法是绑定到document上存在最久的方法,也很好的解决了兼容性方面的问题;

bind()方法的优点:

1.很好的解决了各个浏览器的兼容性问题;

2.非常方便简单的能进行事件的绑定;

3.对于利用ID选出来的元素是非常好的,不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时,handler可以立即被执行实现方式;

bind()方法的缺点:

1.bind()不会绑定在通过bind()添加的元素上面;

2.他会绑定到所有选出来的元素上面;

3.只有当页面加载完成后才会执行bind()事件,可能会产生效率问题;

live()这个绑定方法是通过冒泡机制来进行绑定的,由于在JQ1.7以上已经不推荐使用,在此不进行说明了;

deletage()这个方法在此之前从来没有用过,看过万丈后才知道还有这么一个绑定事件的方法;

deletage()这个方法的有点像live()方法,但不同于live()方法的地方在于他不会将event绑定到所有的ducoment上面,而是由你决定将他绑定在什么上面;

deletage()的优点:

1.支持绑定到动态添加的元素上面

2.你可以选择把那个那个事件放到你指定的元素上面;

deletage()的缺点:

1.尽管减少了decoment已经很少了,但是还是需要来查找那个元素上面绑定了那个事件。需要花一定的时间。

on():其实bind(),live(),delegate()都可以用on()方法来代替;就像undind();die()和undeletage()一样可以用off()来实现一样;

on()的优点:1.提供了一种统一的绑定事件的机制。

on()的缺点:1.隐藏了一些前面方法的细节。

总结:用bind()的代价是非常大的,他会把所有的时间绑定到DOM上面;

live()zai JQ1.7上面已经不被推荐使用了;

deletage()可以在动态元素上添加绑定事件;

on()结合了前面3种方法,为绑定事件有个统一。但是ON()不支持绑定动态添加的元素

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
js实现左右轮播图
Jan 09 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
Vue2学习笔记之请求数据交互vue-resource
Feb 23 #Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 #Javascript
Javascript 链式作用域详细介绍
Feb 23 #Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 #Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 #Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 #Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 #Javascript
You might like
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
整理Python最基本的操作字典的方法
2015/04/24 Python
Python类的用法实例浅析
2015/05/27 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
python 字段拆分详解
2019/12/17 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
市场营销毕业求职信
2014/08/07 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
python四种出行路线规划的实现
2021/06/23 Python