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. 界面开发工具集Telerik UI for ASP.NET AJAX发布R2 2019

    Telerik UI for ASP.NET AJAX拥有构建ASP.NET AJAX和SharePoint应用程序的80+控件,将为任何浏览器和设备构建Web Forms应用程序的时间缩短一半.Te ...

  2. 曝郭盛华公司30万美元收购Acn.ai域名，揭秘人工智能布局下的巨头们

    据域名投资人曝料,郭盛华公司已经提前拿下.ai短域名 Acn.ai,目前域名已经设置跳转到东联科技的官网.都说域名越短越值钱,而且搜索引擎都喜欢更短的域名,例如京东更换的域名“jd.com”交易价格约 ...

  3. 阅读之SQL优化

    一.性能不理想的系统中除了一部分是因为应用程序的负载确实超过了服务器的实际处理能力外,更多的是因为系统存在大量的SQL语句需要优化. 为了获得稳定的执行性能,SQL语句越简单越好.对复杂的SQL语句, ...

  4. Struts 2 实现Action的几种方式_java - JAVA

    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 Action用于处理用户的请求,因此也被称为业务控制器.每个Action类就是一个工作单元,Struts 2框架负责将用 ...

  5. 小程序获取Unionid

    小程序获取用户Unionid,必须授权获取密文.但授权成功后不是永久的.除非关注了公众号或者App微信绑定了, 解决办法是通过code获取openid,然后用openid去数据库查对应的Unionid ...

  6. TTTTTTTTTTTTTT POJ 3678 与或异或 2-SAT+强连通 模板题

    Katu Puzzle Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9129 Accepted: 3391 Descripti ...

  7. 聊聊spring-boot-starter-data-redis的配置变更

    本文主要研究一下spring-boot-starter-data-redis的配置变更 配置变更 以前是spring-boot的1.4.x版本的(spring-data-redis为1.7.x版本), ...

  8. mysql 数据增删改的总结

    一.在MySQL管理软件中,可以通过SQL语句中的DML语言来实现数据的操作,包括 1.使用INSERT实现数据的插入2.UPDATE实现数据的更新3.使用DELETE实现数据的删除4.使用SELEC ...

  9. pwd命令学习

    pwd命令学习 1.学习pwd命令 pwd命令功能为输出当前所在工作目录的绝对路径名称. 绝对路径和相对路径: 绝对路径:从根目录开始直到文件位置 相对路径:相对于程序当前所在目录到文件位置 例:程序 ...

  10. git && github 相关

    权限问题(error: The requested URL returned error: 403 Forbidden while accessing):1. 将自己机器的ssh public key ...