jQuery 的事件

1. 事件绑定

1.1 事件的获取

  • 记下方的代码为 code1
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件绑定</title>

    <script src="./jquery-1.8.3.min.js"></script>

    <style>

        #item1{

            width: 200px;

            height: 200px;

            background: red;

        }

    </style>

</head>

<body>

    <script>

        // ...... (1)

    </script>

    <div id="item1"></div>

    <script>

        // ...... (2)

    </script>

</body>

</html>

1.1.1 若在 code1 的 (1) 处加入如下程序

console.log("$('#item1') =", $('#item1'));
  • 因为 item1 在下方，且程序自上而下运行，所以此时还获取不到 item1
  • 解决办法见 1.1.2

1.1.2 两种解决办法

// 1. 当页面加载完成之后触发 ready

$(document).ready(function(){

    console.log("$('#item1') =", $('#item1')); // 加载完成之后执行此代码可以获取到 #item1

});


// 2. 当文档加载完成之后自动调用自己（与 1. 同效，并且 2 是 1 的缩写）

$(function(){

    console.log("$('#item1') =", $('#item1'));

});

1.2 基本绑定

  • 下方 1.2.1-1.2.4 的代码写在 code1 的 (2) 处，因为 (2) 处于 div 的下方，比 (1) 处方便

1.2.1 click 基本事件绑定

$('#item1').click(function(){

    console.log("click 单击事件");

});

1.2.2 dblclick 双击事件

$('#item1').dblclick(function(){

    console.log("dblclick 双击事件");

});

1.2.3 bind 方法绑定

$('#item1').bind("click", function(){

    console.log("bind 绑定事件方法");

});

1.2.4 补充：解除绑定

  • 注意

    • 如果不指定解除的事件，那么就会解除元素上的所有事件
    • 如要解除指定的事件，那就给它传指定事件的参数
$('#item1').unbind();			// 解除 #item1 上的所有事件


$('#item1').unbind("click");	// 只解除 #item1 的单击事件

1.3 动态绑定

  • 注意：live 方法在高版本(>1.8.3)的 jQuery 中被移出了，使用时请注意版本
$(element).live("click", function(){});

2. 事件触发

2.1 触发的写法

  • 当我们想要去触发某个元素的事件时，可以使用 trigger
  • 注意：需指定元素的事件类型
$(element).trigger('click');	// 必须指定元素的事件类型，如此处的 click

2.2 常用的鼠标事件

事件 对应的名称
鼠标单击事件 click
鼠标双击事件 dbclick
鼠标移入事件 mouseover
鼠标移出事件 mouseout
鼠标按下事件 mousedown
鼠标抬起事件 mouseup
鼠标移动事件 mousemove
  • 用法示例
$('div').mousedown(function(){

    console.log("鼠标被按下了");

});
  • 想要使用别的事件，只需将上方 mousedown 改成相应的事件名称即可

3. 事件冒泡和默认行为

3.1 事件冒泡

  • 当触发一个元素的事件时，其自动触发该元素的父级和先辈级的同类型事件，造成事件并发，导致页面混乱，我们称为之事件冒泡
  • 此时我们可以在元素的事件处理函数中返回一个 false 来进行阻止
  • 注意：这个方法仅限于在 jQuery 中使用

3.2 默认行为

  • 在页面中，有些元素是具备默认行为的，例如

    • a 链接的单击
    • 表单的提交
  • 以上元素都会进行跳转或提交，这些行为被称为“默认行为”
  • 但是，在绑定上事件后，它会首先先执行事件，然后执行默认行为
  • 若我们只想让其触发事件，但不执行默认行为，我们可以在该元素的事件中返回一个 false 来阻止默认行为
<a href="https://www.cnblogs.com">点我去博客园</a>


$('a').click(function(){

    alert("单击事件被触发了");

    return false;				// 阻止默认行为

});

4. 获得当前鼠标的位置和按下的按键

4.1 鼠标事件

  • 在触发事件时，如果我们想要获取鼠标的位置或键盘按键信息

    • 首先，需要在当前的事件中传递一个事件对象 event
/* event 事件对象

    通过此对象，可以获取鼠标当前单击时的位置

    clientX, clientY 相对于窗口的偏移位置

    offsetX, offsetY 相对于元素的偏移位置

    pageX,   pageY   相对于文档的偏移位置

    screenX, screenY 相对于屏幕的偏移位置

    type 事件类型

*/

$(element).click(function(e){

    // e for enent，类似于在 Python 中写 Class 时要加 self

    // 能够获取鼠标的 x 轴和 y 轴坐标，坐标位置相对于浏览器窗口

    console.log("(%d, %d)", e.clientX, e.clientY);

    // 能够获取鼠标的 x 轴和 y 轴坐标，坐标位置相对于文档

    var x = e.pageX;

    var y = e.pageY;

    console.log("(%d, %d)", x, y);

    // ...

});

4.2 键盘事件

// 可以打印 e 对象，或者直接使用该对象中的 keyCode 属性来获取按键信息

$(window).keydown(function(e){

    var key = e.keyCode;

    console.log("e =", e);

    console.log("key =", key);	// 可以试验出按键对应的编码

});

[Web 前端] 028 jQuery 事件的更多相关文章

  1. Python web前端 09 jQuery

    Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...

  2. Python之Web前端Dom, jQuery

    Python之Web前端: Dom   jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...

  3. [Web 前端] 026 jQuery 初探

    目录 1. jQuery 简介 2. jQuery 的简单操作 2.1 jQuery 选择器 2.1.1 简介 2.1.2 基础选择器 2.2 过滤获取 2.3 父子关系获取 3. jQuery 元素 ...

  4. web前端一览&jQuery

    web前端一览 html:裸体 css:好看的衣服            //通常基于bootstrap魔改 JavaScript:动起来           //通常基于JQuery魔改 jQuer ...

  5. web前端基础——jQuery编程基础

    1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...

  6. Web前端开发JQuery框架

    JQuery 是一个兼容多浏览器支持的JavaScript库,其核心理念是write less,do more(写得更少,做得更多),它是轻量级的js库,兼容CSS3还兼容各种浏览器,需要注意的是后续 ...

  7. [Web 前端] 027 jQuery 相关尺寸与事件绑定

    1. 相关尺寸 1.1 获取元素相对于文档的偏移量 var pos = $('#small').offset(); console.log(pos.left, pos.top); 1.2 获取当前元素 ...

  8. Web前端基础——jQuery（一）

    前几天回老家呆了几天,几乎没有怎么学习新的知识,这期间一直有断断续续的看<Java编程思想>,还刷了一些前沿消息,也算没闲着.今天开始学习jQuery啦,继续前进. 在网上查了,买了这本书 ...

  9. Web前端之jQuery 的10大操作技巧

    不管是做什么事情,人们习惯在工作中去找方法.找技巧,来帮助提高效率,在软件开发中更是如此.jQuery作为前端开发必学技术之一,在使用中也有各种各样的小技巧,今天小编为大家分享10条必知会的技巧,希望 ...

随机推荐

  1. Hadoop中配置环境后重启失效解决方法

    Ubuntu下设置环境变量有三种方法,一种用于当前终端,一种用于当前用户,一种用于所有用户: 一:用于当前终端: 在当前终端中输入:export PATH=$PATH:<路径> 不过上面的 ...

  2. Help library 安装arcobjects for .NET异常问题

    新建一个reg文件写入,也可以导出一个reg文件在上面重新写入. Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\CLSID\{9DAA ...

  3. Proxy Class(代理类)

    在使用二维数组时,我们可以使用a[][]来访问数组中的元素,这很显然是正确的也无需证明. 但如果要自己实现一个二维数组的时候,会发现如果想要重载符号[][],会被告知没有这个符号,这即引出了C++ o ...

  4. UNIX标准C - socket套接字

    一.计算机网络 1.计算机网络的功能 a.数据通信 b.资源共享 c.提高系统的可靠性 d.分布式网络处理和负载均匀. 2.计算机网络的组成 1.通信子网:由网卡.线缆.集线器.中继器.交换器.路由器 ...

  5. 157. [USACO Nov07] 奶牛跨栏(第三次考试大整理)

    157. [USACO Nov07] 奶牛跨栏 输入文件:hurdles.in   输出文件:hurdles.out   简单对比 时间限制:1 s   内存限制:128 MB 译 by CmYkRg ...

  6. 点云数据中的三维信息提取pcl

    https://www.hanspub.org/journal/PaperInformation.aspx?paperID=24702 https://wenku.baidu.com/view/160 ...

  7. 苹果CMSv10对接微信公众号教程

    首先声明下,对接公众号的话需要自行注册公众号“订阅号”  对接失败的原因大多是域名变红导致!简单的测试方法就是把域名链接发给qq好友或是qq群里看看有没有变红 域名变红以后大概率不会对接成功的,请知悉 ...

  8. Java虚拟机之JVM调节参数

    -XX:+PrintGC 使用这个参数,虚拟机启动后,每次GC就会打印日志. -XX:+UseSerialGC 使用串行垃圾回收器. -XX:+PrintGCDetails 打印详细信息.包括各个区的 ...

  9. sql数据库相关语句

    易错点 Where需要放在from语句之后:where中不能出现聚合函数(就是能够将几行一列合并为一行一列的函数,比如max,min,avg,count()):但是可以出现其他,如比较符,getdat ...

  10. 20175308 实验三《敏捷开发与XP实践》

    20175308 实验三<敏捷开发与XP实践> 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 完成实验.撰写实验 ...