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. 如何使用 vue-cli 3 的 preset 打造基于 git repo 的前端项目模板

    vue-cli 之 Preset vue-cli 插件开发指南 TLDR 背景介绍 vue-cli 3 完全推翻了 vue-cli 2 的整体架构设计,所以当你需要给组里定制一份基于 vue-cli ...

  2. Nginx静态文件服务器配置方法

    在Java开发以及生产环境中,最常用的web应用服务器当属Tomcat,尽管这只猫也能够处理一些静态请求,例如图片.html.样式文件等,但是效率并不是那么尽人意.在生产环境中,我们一般使用Nginx ...

  3. node.js入门学习（四）--Demo图书的增删改查

    需求:图书的增删改查,图书数据保存在data.json文件中. 1.Demo结构: 2.首先下载安装node.js,配置环境变量:参考博客 3.项目初始化 1)创建项目根目录node-hello,进入 ...

  4. Linux培训教程 linux下修改用户权限的方法

    一般我们日常碰到要修改用户权限的,往往是要么修改一下用户的gorupid,通过上面命令可以改;要么是把普通用户改成具有超级权限的用户,这个一般自己不能直接改,只能是root或有root权限的用户才能帮 ...

  5. 2019 Multi-University Training Contest 3 T7 Find the answer

    Find the answer Time Limit: 4000/4000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...

  6. POJ 1573 Robot Motion（模拟）

    题目代号:POJ 1573 题目链接:http://poj.org/problem?id=1573 Language: Default Robot Motion Time Limit: 1000MS ...

  7. c#翻页效果

    用c#和GDI+实现杂志翻页动画效果时间:2010-01-13 blog.csdn.net 周公 - 说明:以前本人参与个一个电子杂志项目,当时要求实现模拟现实生活中的杂志翻页动画效果,别人推荐了这篇 ...

  8. Qt 静态库与共享库(动态库)共享配置的一个小办法

    对于用 QtCreator 编写静态库,动态库,如何能够以最小的改动, 方便的实现两种形式的库文件生成:可以这麽做: 1)使用想到建立静态库 2)在项目配置文件*.pro  中: TARGET = n ...

  9. Oracle锁处理脚本

    ----处理死锁进程--查看被锁住的表select b.owner,b.object_name,a.session_id,a.locked_mode from v$locked_object a,db ...

  10. js，正则实现金钱格式化

    https://blog.csdn.net/qq_36279445/article/details/78889305 https://github.com/jawil/blog/issues/30