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

<!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. 用WinDbg分析Debug Diagnostic Tool生成的Userdump文件

    1.下载WinDbg(Debugging Tools for Windows):http://www.microsoft.com/whdc/devtools/debugging/default.msp ...

  2. [转]基于phantomJS实现web性能监控

    1.web性能监控背景描述 上期分享的<Web性能监控自动化探索之路–初识WebPageTest>从依赖webpagetest的角度给出了做性能日常检查的方案,但由于依赖结构相对复杂我们需 ...

  3. BZOJ3545：[ONTAK2010]Peaks

    浅谈线段树合并:https://www.cnblogs.com/AKMer/p/10251001.html 题目传送门:https://lydsy.com/JudgeOnline/problem.ph ...

  4. BZOJ1720：[Usaco2006 Jan]Corral the Cows 奶牛围栏

    我对二分的理解:https://www.cnblogs.com/AKMer/p/9737477.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem ...

  5. CF 293E Close Vertices——点分治

    题目:http://codeforces.com/contest/293/problem/E 仍旧是点分治.用容斥,w的限制用排序+两个指针解决, l 的限制就用树状数组.有0的话就都+1,相对大小不 ...

  6. long long 与__int64使用总结

    本文摘自网络.原文网址:http://blog.sina.com.cn/s/blog_6aa178410100vlwr.html 前言: 在16位环境下,int/unsigned int 占16位,l ...

  7. SqlServer2005的备份和还原（不同服务器）

    1 备份数据库NorthSJ 进入服务器,进入SqlServer2005,选择数据库NorthSJ进行备份

  8. JavaScript-Tool：my97datepicker

    ylbtech-JavaScript-Tool:my97datepicker 1.返回顶部 1. 2.下载 https://files.cnblogs.com/files/storebook/java ...

  9. Golang Channel用法简编

    转自:http://tonybai.com/2014/09/29/a-channel-compendium-for-golang/ 在进入正式内容前,我这里先顺便转发一则消息,那就是Golang 1. ...

  10. PID控制及整定算法

    一.PID控制算法 PID是比例.积分.微分的简称,PID控制的难点不是编程,而是控制器的参数整定.参数整定的关键是正确地理解各参数的物理意义,PID 控制的原理可以用人对炉温的手动控制来理解.阅读本 ...