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

<!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. 【Android学习笔记】 点击穿透（Click Through）

    问题:开发一个App,主界面用了Activity,子页面用了Fragment.从Activity跳转到Fragment后Fragment透明,并且点击击穿到Axtivity. 分析:刚开始没有注意到点 ...

  2. Code：template

    ylbtech-Code: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech.cn ...

  3. Django框架之第三篇模板语法

    一.什么是模板? 只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板. 二.模板语法分类 一.模板语法之变量:语法为 {{ }}: 在 Django 模板中遍历复杂数据结构的关键 ...

  4. shell入门-grep-3-egrep

    grep -E == egrep [root@wangshaojun ~]# grep --color 'r\?o' 1.txt == egrep --color 'r?o' 1.txt ^C[roo ...

  5. iOS使用VideoToolbox硬编码录制H264视频

    http://blog.csdn.net/shawnkong/article/details/52045894

  6. VS编译器中设置 输出窗口 只显示error，不显示warning 要如何配置

    VS编译器中设置 输出窗口 只显示error,不显示warning 要如何配置 在编译大型项目的时候,总是VS编译器的输出窗口总是会出现一堆warning警告,要想在里面找到error错误,要使用鼠标 ...

  7. Python及R安装包版本查看方法

    R包查询 查询已安装的所有的包:library() 或installed.packages()(括号内为空,区别以上两项) 查询具体包的信息: help(package="pheatmap& ...

  8. 项目中gulp使用发生的错误及解决

    在项目开发中,执行gulp css来生成合成的css文件时,报如下错误 Error: Cannot find module 'browserslist' 解决方法: npm install brows ...

  9. 10.Ubuntu16搭建蜜罐Cowrie

    一直都想尝试搭建一个蜜罐,因为蜜罐是一款可以对ssh,telnet,http等等协议攻击进行记录,对于输入命令和上传文件均有记录的一款软件. 记录可以设置在日志文件中或者通过配置数据库,导入数据库中方 ...

  10. jQuery 选择表格(table)里的行和列及改变简单样式

    本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...