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. NETCONF

    NETCONF协议(Network Configration Protocol) NETCONF是一个基于XML的交换机配置接口,用于替代CLI.SNMP等配置交换机. 本质上来说,NETCONF就是 ...

  2. jQuery后续和 前端框架Bootstrap

    目录 一.jQuery后续 1. 动画效果 (1)自定义点赞动画实例 2. jQuery的自带方法 (1)each (类似for循环) (2)data() (存放隐形的数据) 二.前端框架之Boots ...

  3. python出现SyntaxError: Non-ASCII character '\xe6' in file \的错误

    出现这个问题的主要原因是因为python2的编码是ASCII码,文件中有中文的话就得使用utf8编码,只需要在文件的头部加上以下其中一种标注: 一.在文件头部添加如下注释码: # coding=< ...

  4. ESP8266-Station模式--我想连上谁

    Station模式又叫做站点工作模式,类似于无线终端 处于Station模式下的ESP8266,可以连接到AP.通过Station(简称为“STA”)模式,ESP8266作为客户端连接到路由的wifi ...

  5. 在Windows 10 操作系统打开Windows Mobile 设备中心，要么双击无反应，要么正在启动后过会就关闭了

    在Windows 10 操作系统打开Windows Mobile 设备中心,要么双击无反应,要么正在启动后过会就关闭了 解决方法: 1.运行:输入services.msc进入服务 2.找到(前提你的P ...

  6. MySQL5.7数据转移至SQL Server详解

    本文链接:https://blog.csdn.net/qq_37308779/article/details/80679358一．安装MySQL ODBC驱动为MySQL安装Connector/ODB ...

  7. toJSON() 方法，将 Date 对象转换为字符串，并格式化为 JSON 数据格式。

    JavaScript toJSON() 方法 定义和用法 toJSON() 方法可以将 Date 对象转换为字符串,并格式化为 JSON 数据格式. JSON 数据用同样的格式就像x ISO-8601 ...

  8. vue学习-day05 -- 案例：名字合并(监听data数据的改变)

    1.案例:名字合并(监听data数据的改变) 使用keyup事件监听data数据的改变 <!DOCTYPE html> <html> <head> <titl ...

  9. 泛型（三）模拟commons-dbutils

    最近在复习泛型的知识,想起以前使用commons-dbutils的时候,觉得这个工具太厉害了.所以,试着自己瞎写看能不能模拟commons-dbutils的功能. 1.commons-dbutils的 ...

  10. Charles模拟数据

    安装好Charles 桌面创建json文件