1 事件操作

1.1 页面载入事件

$(document).ready(function(){

  // 在这里写你的代码...

});

或者

$(function($) {

  // 你可以在这里继续使用$作为别名...

});

1.2 事件绑定

on(eve,[sel],[data],fn)      1.7+ 在选择元素上绑定一个或多个事件的事件处理函数

bind(type,[data],fn)         3.0- 请使用on()

one(type,[data],fn)            为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数

1.3 解除事件绑定

off(eve,[sel],[fn])         1.7+ 在选择元素上移除一个或多个事件的事件处理函数

unbind(t,[d|f])                3.0- 请使用off()

1.4 触发事件

trigger(type,[data])         在每一个匹配的元素上触发某类事件

triggerHandler(type, [data])

这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡

这个方法的行为表现与trigger类似，但有以下三个主要区别：

* 第一，他不会触发浏览器默认事件。

* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。

* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery事件</title>

</head>

<body>

    <h1>jquery事件</h1>

    <hr>

    <button id="btn">按钮</button>

    <button id="btn2">解除绑定</button>

    <hr>

    <button id="btn3">下载</button>

    <br>

    <a href="1.html" id="a1">超链接</a>

    <hr>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dolores eos quasi laborum earum libero est doloremque, tempora error at tempore nostrum! Fugit saepe ipsam deserunt commodi asperiores, unde.</p>

    <script src="../jquery-3.3.1.js"></script>

    <script>

        $(function(){

            // 绑定事件

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

                alert('啊，你点我了')

            });

            // off()解除绑定

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

                $('#btn').off();

            });

            //one()绑定一个一次性事件，即该事件只会被触发一次

            $('#btn3').one('click', function(){

                alert('哈哈哈');

            });

            $('#a1').on('click', function(){

                alert('啊，我是超链接');

                //阻止事件冒泡 和 默认动作

                return false;

            });

            //手动 代码触发 事件

            //$('#btn').click()       //刷新网页是会自动触发

            /*$('#btn').trigger('click')   //刷新网页时也会出发啊

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

            $('#btn').trigger('click')*/

            // 鼠标悬停在p元素上，事件就被执行一次

            $('p').hover(function(){

                console.log('OK');

            })

        })

    </script>

</body>

</html>

1.5 事件委派

live(type,[data],fn)    1.7-

die(type,[fn])            1.7-

delegate(s,[t],[d],fn)    3.0-

undelegate([s,[t],fn])    3.0-

全部移除了，请使用 on()


$(document).on('click', 'button', fn)

1.6 事件切换

hover([over,]out)           一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

toggle([spe],[eas],[fn])   1.9-用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件

2 事件列表

blur([[data],fn])

change([[data],fn])

click([[data],fn])

dblclick([[data],fn])

error([[data],fn])

focus([[data],fn])

focusin([data],fn)

    当元素获得焦点时，触发 focusin 事件。 focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况

focusout([data],fn)

    当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

keydown([[data],fn])

keypress([[data],fn])

keyup([[data],fn])

mousedown([[data],fn])

mouseenter([[data],fn])

    当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

mouseleave([[data],fn])

    当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

mousemove([[data],fn])

mouseout([[data],fn])

mouseover([[data],fn])

mouseup([[data],fn])

resize([[data],fn])

scroll([[data],fn])

select([[data],fn])

submit([[data],fn])

unload([[data],fn])

3 事件对象

属性

eve.currentTarget        在事件冒泡阶段中的当前DOM元素

eve.data                当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind

eve.delegateTarget        1.7+ 当currently-called的jQuery事件处理程序附加元素

eve.namespace            当事件被触发时此属性包含指定的命名空间

eve.pageX                鼠标相对于文档的左边缘的位置

eve.pageY                鼠标相对于文档的顶部边缘的位置

eve.relatedTarget        在事件中涉及的其它任何DOM元素

eve.result                这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined

eve.target                最初触发事件的DOM元素

eve.timeStamp            返回事件触发时距离1970年1月1日的毫秒数

eve.type                事件类型

eve.which                针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮

方法

eve.preventDefault()            阻止默认事件行为的触发

eve.isDefaultPrevented()        根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值

eve.stopPropagation()            防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

eve.isPropagationStopped()        检测 event.stopPropagation() 是否被调用过

eve.stopImmediatePropagation()     阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上

eve.isImmediatePropagation()     检测 event.stopImmediatePropagation() 是否被调用过
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery事件对象</title>

    <style>

        #box {

            width:300px;

            height:200px;

            border:2px solid #ccc;

            margin:100px auto;

        }

    </style>

</head>

<body>

    <h1>事件对象</h1>

    <hr>

    <div id="box"></div>

    <script src="../jquery-3.3.1.js"></script>

    <script>

        $(function(){

            $('#box').on('click', function(en) {

                //鼠标的位置

                console.log(en.clientX, en.clientY); //鼠标相对于视口的位置

                console.log(en.pageX, en.pageY);   //鼠标相对于页面的位置，不滑动滚动条的情况下，和client获取的位置一样，滑动时高就会不同

                console.log(en.offsetX, en.offsetY); //鼠标在本元素的位置，即鼠标相对于框的左上角的位置

            });

            $(document).on('keyup', function(en) {

                console.log(en.which)    //按键按下并释放时事件会被触发,打印按键对应的ASCII码值

            });

            $('#box').on('mousedown', function(en) {

                console.log(en.which)     //鼠标键按下时会被触发，打印出对应的ASCII码值（1 2 3  ）

            })

        })

    </script>

</body>

</html>
 

JQuery事件机制的更多相关文章

  1. JQuery操作样式以及JQuery事件机制

    1.操作样式     1.1 css的操作     功能:设置或者修改样式,操作的是style属性 操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...

  2. JQuery事件机制笔记

    一.事件绑定及移除 1.bind() bind()为每个匹配的元素绑定一个或多个事件处理函数: 语法:bind(event,fn)//不能给未来元素添加事件: bind(event,fn); bind ...

  3. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  4. javascript事件机制

    ① javascript绑定事件的方式 http://blog.iderzheng.com/dom-javascript-event-binding-comparison/ ② javascript事 ...

  5. 第78天：jQuery事件总结（一）

    jQuery事件总结(一)    现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery. JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理 ...

  6. jQuery事件：bind、delegate、on的区别

    最近在AngularJS的开发中,遇到一个神奇的事情:我们用到livebox来预览评论列表中的图片, 然而评论列表是由Angular Resource动态载入的.不可思议的是,点击这些动态载入的图片仍 ...

  7. jQuery中的事件机制深入浅出

    昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...

  8. jQuery的事件机制和其他知识

    jQuery 设置宽度和高度 宽度操作: $(selector).height(); //不带参数表示获取高度 $(selector).height(200); //带参数表示设置高度   宽度操作: ...

  9. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

随机推荐

  1. luogu P2742 【模板】二维凸包

    嘟嘟嘟 没错,我开始学凸包了. 其实挺简单的. 前置技能: 1.极坐标系 2.向量叉积 1.极坐标系 就是一种二维坐标系.只不过两个坐标分别表示向量和极轴的角度和自身的长度.对于不同的问题,极轴可以自 ...

  2. 五子棋项目总结 JavaScript+jQuery（插件写法）+bootstrap（模态框）

    Html部分(界面): 1.五子棋棋盘由canvas完成: 2.两个按钮,样式由bootstrap完成: 3.菜单按钮对应的模态框,可以选择游戏模式:玩家自由对战,和电脑对战,还可以指定谁先执子和哪个 ...

  3. 使用Apache HttpClient 4.5设置超时时间

    使用HttpClient,一般都需要设置连接超时时间和获取数据超时时间.这两个参数很重要,目的是为了防止访问其他http服务时,由于超时导致自己的应用受影响. 4.5版本中,这两个参数的设置都抽象到了 ...

  4. winrar 弹窗处理

    https://www.rarlab.com/ 1.下载英文版 2.把下面这段code文本复制到一个新建的记事本txt文档中,然后另存为rarreg.key文件,注意后缀名.txt改为.key才行. ...

  5. T-SQL查询：WITH AS 递归计算某部门的所有上级机构或下级机构

    drop table #Area; CREATE TABLE #Area ( id INT NOT NULL, city_name NVARCHAR(100) NOT NULL, parent_id ...

  6. 水仙花数（类型：一级、C++）

    题目描述: 输入一个三位数n,判断是否为水仙花数,如果是则输出“YES”,不是则输出“NO”.水仙花数:是指一个3位数,它的每个位上的数字的3次幂之和等于它本身.(例如:1^3 + 5^3+ 3^3 ...

  7. #leetcode刷题之路31-下一个排列

    实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列.如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列).必须原地修改,只允许使用额外常数空间. 以下 ...

  8. 偏前端 - ios下position:fixed失效的问题解决

    如图,考虑到用户体验的问题,一般页面的下方提交按钮都会随着固定在页面上,方便用户点击. 有些人肯定就说了,这还不简单,position:fixed: 但是在ios这个坑货系统上这个position:f ...

  9. 苹果App Store提交app审核时EULA(终端用户软件使用条款)的注意事项等政策解读

    写在前面,今天是2014年10月14日,以下内容可能会随着时间的推进而失效,请注意时效性 当在App Store提交app审核的时候,苹果通常会要求开发者提供一个EULA,苹果默认提供了一个,地址:  ...

  10. win下python环境搭建以及安装pip、django

    1. 安装python并配置 下载安装python,这里我下载的是python2.7,听说2.7比较好用 地址:https://www.python.org/downloads/source/ 记住你 ...