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

<!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. [转]JS的内存泄露处理

    问题: 1.给DOM对象添加的属性是一个对象的引用.范例: var MyObject = {}; document.getElementByIdx_x('myDiv').myProp = MyObje ...

  2. Marionettejs

    Marionette是牵线木偶的意思,这个库是对Backbone的一次更高层次封装.这样的封装有两个目标: 减少重复的工作,提高使用Backbonejs时的生产效率给复杂应用页面提供更多的结构,以支撑 ...

  3. BZOJ3401：[USACO2009MAR]Look Up

    浅谈栈:https://www.cnblogs.com/AKMer/p/10278222.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php?id ...

  4. IP 地址漂移

    1.概念 应用访问虚拟ip,当主服务器正常工作时,虚拟ip指向主服务器,当主服务器宕掉后,虚拟ip自动指向从服务器,当主服务器被人修好后,再自动指向主服务器, 这种虚拟ip的指向方式称为ip地址漂移. ...

  5. CentOS 配置RDP

    XRDP服务器 CentOS安装XRDP实现远程桌面访问: 由于安装的是远程桌面,因此需要安装桌面显示服务:# yum install vnc-server 下面开始配置XRDP服务 l  配置环境: ...

  6. C#设计模式(12)——享元模式

    一.概念 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观定义了一个高层接口,让子系统更容易使用.使用外观模式时,我们创建了一个统一的类,用来包装子系统中一个或多个复杂的类,客户端可以直 ...

  7. 关于android上dpi/screen-size的厘清解释

    android定义了四种screen-size: small normal large xlarge 同时定义了六种dpi级别: ldpi (low) ~120dpimdpi (medium) ~16 ...

  8. EIP权限工作流平台总结-4跨域配置

    1.预览地址:www.eipflow.com (1) 权限工作流:www.demo.eipflow.com/Account/Login (2) 基础权限版:www.auth.eipflow.com/A ...

  9. 死磕 java同步系列之开篇

    简介 同步系列,这是彤哥想了好久的名字,本来是准备写锁相关的内容,但是java中的CountDownLatch.Semaphore.CyclicBarrier这些类又不属于锁,它们和锁又有很多共同点, ...

  10. Python包管理工具setuptools之setup函数参数详解

    **********************************************************对所学内容的简单汇总******************************** ...