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. 移动端h5模拟长按事件

    为啥写这篇文章 最近接了个需求,要求长按某个标签显示删除一个悬浮的删除按钮.这个需求其实在app上很常见,但是在移动端h5中,我们没有长按的事件,所以就需要自己模拟这个事件了. 大概效果如下: ps: ...

  2. ZROI 19.08.01 树上数据结构

    1.总览 LCT 链分治(树剖) 点/边分治 2.点分治 一棵树,点有\(0/1\),多次修改,询问最远的两个\(1\)距离. 建出点分树,每个子树用堆维护:①最远的\(1\)距离:②它的每个儿子的① ...

  3. 【UOJ#394】[NOI2018] 冒泡排序

    题目链接 题意 求有多少个字典序严格大于给定排列 \(q_i\) 的排列满足其逆序对数(冒泡排序需要交换的次数)达到下限 \(\frac{1}{2}\sum_{i=1}^n |i-p_i|\) Sol ...

  4. C++ fstream 用法

    #include <fstream> #include <iostream> main() { int a,b,c,d; std::ifstream infile (" ...

  5. jvm——NIO

    https://blog.csdn.net/Evankaka/article/details/48464013 https://www.cnblogs.com/aspirant/p/9166944.h ...

  6. 12. ClustrixDB 为容错和可用性分配磁盘空间

    集群必须包含足够的空闲磁盘空间,以便从节点或区域故障中自动恢复.要计算在发生故障后仍然允许ClustrixDB完全重新保护数据的情况下可以使用的最大磁盘空间量,可以使用以下公式: 最大磁盘利用率% = ...

  7. 对MySQL binlog日志解析，统计每张表的DML次数

    想要获取每天数据库每张表的DML的次数,统计热度表,可以使用该脚本 # coding:utf-8 # 解析binlog,统计热度表,表的DML个数 import sys import os # mys ...

  8. Mysql包的下载

    官方下载地址: https://dev.mysql.com/downloads/mysql/5.5.html#downloads mysql的下载界面 二进制的包 通用的RPM包 源码包

  9. sh_07_火车站安检

    sh_07_火车站安检 # 定义布尔型变量 has_ticket 表示是否有车票 has_ticket = True # 定义整型变量 knife_length 表示刀的长度,单位:厘米 knife_ ...

  10. 【CF1243D&CF920E】0-1 MST（bfs，set）

    题意:给定一张n个点的完全图,其中有m条边权为1其余为0,求最小生成树的权值和 n,m<=1e5 思路:答案即为边权为0的边连接的联通块个数-1 用set存图和一个未被选取的点的集合,bfs过程 ...