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英文日期(有时间)选择器
May 02 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
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
php垃圾代码优化操作代码
2010/08/05 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
基于php-fpm的配置详解
2013/06/03 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
php实现的双色球算法示例
2017/06/20 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
J2EE模式面试题
2016/10/11 面试题
综合素质自我评价怎么写
2014/09/14 职场文书
争先创优演讲稿
2014/09/15 职场文书
给客户的感谢信
2015/01/21 职场文书
奖学金感谢信
2015/01/21 职场文书
辩论会主持词
2015/07/03 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS