绑定事件的其他方法 以及 取消绑定 事件：：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
           $(function () {
               $('#btn').bind('click mouseover',function () {
                   alert('hello!');

                   $(this).unbind('mouseover');
               })
           })
    </script>
</head>
<body>
    <input type="button" name="" value="press me" id="btn">
</body>
</html>

自定义事件：除了系统事件外，可以通过bind方法自定义事件，然后用tiggle方法触发这些事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>

    <script type="text/javascript">

           $(function () {

               //给#btn绑定hello事件

               $('#btn').bind('hello',function () {

                   alert('hello!');

               });

               $('#btn').bind('click',function () {

                   alert('click');

               });

               //触发hello事件

               $('#btn2').click(function () {

                   $('#btn').trigger('hello');

                   $('#btn').trigger('click');

               });

           });

    </script>

</head>

<body>

    <input type="button" name="" value="press me" id="btn">

    <input type="button" name="" value="press me2" id="btn2">

</body>

</html>

1.click事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>click事件</title>

    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $('#btn').click(function () {

                //重复切换sty样式

                $('.box').toggleClass('sty');

            });

        })

    </script>

    <style type="text/css">

        .box{

            width:200px;

            height:200px;

            background-color: hotpink;

        }

        .sty{

            background-color: chartreuse;

        }

    </style>

</head>

<body>

    <input type="button" name="" value="切换" id="btn">

    <div class="box"></div>

</body>

</html>

2.mouseover（）：鼠标进入；mouseout（）：鼠标离开；（进入/离开子元素也触发）

moseenter() : 鼠标进入；mouseleave()：鼠标离开。（进入/离开子元素不触发）

3. 页面滚动事件：

$(window).scroll(function){

    ......

}

4. blur() 元素失去焦点、focus() 元素获得焦点、change() 表单元素的值发生变化

5. mouseup()松开鼠标、mousedown() 按下鼠标、mousemove() 鼠标在元素内部移动

6. keydown() 按下键盘、keypress()按下键盘、keyup() 松开键盘

7. resize() 浏览器窗口大小发生改变

8. submit() 用户提交表单

9.toggle() 根据鼠标点击的次数，依次运行多个函数

10. unload() 用户离开页面的事件

jquery——事件的更多相关文章

  1. JQuery选择器JQuery 事件

    JQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...

  2. HTML Select 标签选择后触发jQuery事件代码实例

    页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...

  3. jquery事件核心源码分析

    我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...

  4. 解密jQuery事件核心 - 委托设计（二）

    第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...

  5. 解密jQuery事件核心 - 模拟事件（四）

    前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...

  6. 深入学习jQuery事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...

  7. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  8. jquery 事件冒泡的介绍以及如何阻止事件冒泡

    在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...

  9. jQuery源代码学习之九—jQuery事件模块

    jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...

  10. jQuery事件总结

    blur() 触发或绑定blur事件.$("input").blur(function(){ $("input").css("background-c ...

随机推荐

  1. 转载 ： 10大H5前端框架

    原文作者: http://www.cnblogs.com/kingboy2008/p/5261771.html 作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知 ...

  2. Poj1062 昂贵的聘礼 （dijkstra算法）

    一.Description 年轻的探险家来到了一个印第安部落里.在那里他和酋长的女儿相爱了,于是便向酋长去求亲.酋长要他用10000个金币作为聘礼才答应把女儿嫁给他.探险家拿不出这么多金币,便请求酋长 ...

  3. Unreal引擎术语表

    转自:http://www.cnblogs.com/hmxp8/archive/2012/02/10/2345274.html Unreal引擎术语表 转载自UDN: ‍Actor - 一个可以放置在 ...

  4. Spring 3.x 企业引用开发实战（陈雄华/林开雄）

    目录 ... 第一章:Spring概述 IoC:BeanFactory.Context.El(SpringEL表达式) AOP:允许JVM虚拟机启动时使用代理类在运行时期修改指定类的字节码,改变一个类 ...

  5. [hdu2159]FATE二维多重背包(背包九讲练习)

    解题关键:二维约束条件,只需加一维状态即可. 转移方程:$f[j][k] = \max (f[j][k],f[j - w[i]][k - 1] + v[i])$ #include<bits/st ...

  6. layui 常用方法 readme

    layui样式加载: layui.use(['table', 'element', 'laydate', 'layer'], function () { var table = layui.table ...

  7. Entity Framework Code-First（13）：Configure Many-to-Many

    Configure Many-to-Many relationship: Here, we will learn how to configure Many-to-Many relationship ...

  8. 3. XML实体注入漏洞的利用与学习

    XML实体注入漏洞的利用与学习 前言 XXE Injection即XML External Entity Injection,也就是XML外部实体注入攻击.漏洞是在对非安全的外部实体数据进行处理时引发 ...

  9. idea调试SpringMvc, 出现：”Can't find catalina.jar"错误的解决方法

    用gradle构建的项目,点击运行出现以下错误提示: Error running PraticeWeb: Can't find catalina.jar 21:54 Error running Pra ...

  10. hdu 2897 邂逅明下 （简单巴什博弈）

    题目链接 邂逅明下 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...