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

<!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. 自定义Panel中添加依赖属性需要注意的问题

    今天帮忙同事调试一个自定义Panel的问题, 很奇怪, 利用Binding可以通过ItemSource来添加控件,但是在Listbox的xaml里添加几个ListboxItem却报异常: Visual ...

  2. boost asio中io_service类的几种使用

    io_service类 你应该已经发现大部分使用Boost.Asio编写的代码都会使用几个io_service的实例.io_service是这个库里面最重要的类:它负责和操作系统打交道,等待所有异步操 ...

  3. vue 给嵌套的iframe子页面传数据 postMessage

    Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: < ...

  4. translate 实现元素垂直居中

    <div class="demo2"> <span>about me</span> </div> css .demo2{ width ...

  5. unittest单元测试生成HTML测试报告

    前言: HTMLTestRunner 是 Python 标准库的 unittest 模块的一个扩展,它可以生成 HTML的 测试报告. 一.下载HTMLTestRunnerNew.py文件: 下载链接 ...

  6. w25q128 优化读写函数

    #include "w25qxx.h"  #include "spi.h" #include "delay.h"    #include & ...

  7. CentOS配置LDAP服务器

    环境:centos 5.8 安装: 1.yum安装oepnldap.openldap-servers.openldap-clients.openldap-devel [root@hao-linux ~ ...

  8. 解决启动SQL Server Management Studio 17时报Cannot find one of more components...的问题

    刚装好SSMS 17.1准备体验,弹出: 一番搜索,普遍办法都是安装VS2015独立shell.删除某个注册表项什么的,没用,首先这个shell我是装了的,然后也没有那个注册表项.我自己尝试过重装sh ...

  9. win7 32位安装 python 及Numpy、scipy、matplotlib函数包

    操作系统: win7 64位,但选择安装32位的python. 1,python下载安装 https://www.python.org/downloads/ 下载2.7版,一路下一步安装. 并在pat ...

  10. windows10 启用Linux子系统

    转载 https://jingyan.baidu.com/article/e2284b2b99a327e2e6118d38.html 打开Windows下 设置--更新和安全--针对开发人员--选中“ ...