jQuery事件处理概述_jq 再次点击-程序员宅基地

技术标签: jQuery  前端  jquery  javascript  

1 概述

所谓事件处理,就是指在某一时刻页面上的元素对某一种操作的响应处理。

jQuery在JavaScript基本的事件处理机制的基础上,对其进行了增强和扩展。jQuery不但提供了十分优雅的事件处理语法,而且也对事件处理机制本身作了很大的增强。

2 页面载入完毕响应事件

用户浏览一个网站,需要从服务器端请求数据,并载入到本地进行显示。

前面已经介绍过,对于一个页面而言,其组织方式可以看做一个DOM树,在树还没有成形之前,对其操作是没有任何意义的。因此,需要等待页面加载完毕之后才能对其上的元素进行各种操作。

所谓页面载入完毕,即是指DOM元素载入就绪能够供读取和操纵的时刻。

2.1 window.onload

对JavaScript比较熟悉的读者应该对JavaScript中的window.onload()事件十分熟悉。通过这个方法,用户可以设定一些特定的操作,让其在页面的DOM树加载完毕之后执行。

DOM加载完毕后添加元素,传统方法

let testDiv = document.querySelector(".testDiv");
window.onload = function () {
    
    testDiv.innerHTML = "动态创建的div";
}

在这里插入图片描述
虽然能够在DOM完整加载后,再添加新的元素,但是不幸的是浏览器执行window.onload函数不仅仅是在构建完DOM树之后,也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后。

所以如果某个图片或者其他资源加载很长时间,访问者就会看到一个不完整的页面,甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误。

解决办法就是等DOM被解析后,在图像和外部资源加载之前执行我们的函数。

2.2 $(document).ready()事件

jQuery让这一实现变得可行。在jQuery中,与window.onload功能类似的函数是ready(fn)函数。

函数名 ready(fn)
作用 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
返回值 Object
参数 fn(Function):要在DOM就绪时执行的函数

使用动态创建的$(document).ready(function)方法:

$(document).ready(function () {
    
    $(".testDiv").html("使用动态创建的$(document).ready(function)方法");
})

或者使用简便语法:

$(function () {
    
    $(".testDiv").html("使用动态创建的$(document).ready(function)方法");
})

在这里插入图片描述

3 绑定与反绑定事件监听器

3.1 概述

一个事件的响应本身可能实现为一个函数,但是真正要使其得到执行,还需要将其与相应的元素动作绑定到一起。

所谓绑定,其实就是将页面元素的事件类型与其在收到该事件之后期望进行的操作联系到一起。

例如经常提到的“当我们单击这个按钮的时候,就会执行某些动作”,让这里的“单击”动作与“执行某些动作”连接到一起的操作就是绑定了。

<div id="testDiv1" onclick="showMessage()">单击事件1</div>
<div id="testDiv2">单击事件2</div>
<script>
    function showMessage() {
      
        console.log("橘猫吃不胖!");
    }
    document.getElementById("testDiv2").onclick = showMessage;
</script>

在这里插入图片描述
无论点击哪个div,都会在终端输出“橘猫吃不胖”这个信息。

为testDiv2的添加onclick事件的方式是修改Dom属性。虽然两个方式效果相同,但是并不等效。document.getElementById("testDiv2").onclick = showMessage;等效于:<div id="testDiv1" onclick="console.log("橘猫吃不胖!");">单击事件1</div>

这两种方式的区别是:我们常用的修改元素属性添加事件的方式,实际上是建立了一个匿名函数:

document.getElementById("testDiv1").onclick = function (event) {
    
    console.log("橘猫吃不胖!");
}

这个匿名函数的签名和我们手写的showMessage签名相同,所以可以把showMessage直接赋值给onclick。

这种方式的弊端是:
1、只能为一个事件绑定一个事件处理函数。使用“=”赋值会把前面为此事件绑定的所有事件处理函数冲掉。
2、在事件函数(无论是匿名函数还是绑定的函数)中获取事件对象的方式在不同浏览器中要特殊处理。

3.2 绑定事件

jQuery中处理事件绑定的函数是bind(type,[data],fn)函数。该函数将为调用它的每个匹配元素的特定事件绑定一个事件处理函数。它最多可以有三个参数,其中事件类型和处理函数为必选参数。

函数名 bind(type,[data],fn)
作用 为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数
返回值 Object
参数 type(String):事件类型
data(Object):(可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function):绑定到每个匹配元素的事件上面的处理函数

因此上面的点击事件使用jQuery后,代码如下:

    <div id="testDiv">单击事件</div>
    <script>
        $(function () {
      
            $("#testDiv").bind("click", showMessage);
        })
        function showMessage() {
      
            console.log("橘猫吃不胖!");
        }
    </script>

在这里插入图片描述

3.3 jQuery事件处理函数的好处

1、添加的是多播事件委托。也就是为click事件又添加了一个方法,不会覆盖对象的click事件原有的事件处理函数。

    <div id="testDiv">单击事件</div>
    <script>
        $(function () {
      
            $("#testDiv").bind("click", function (event) {
      
                console.log(1);
            });
            $("#testDiv").bind("click", function (event) {
      
                console.log(2);
            });
        })
    </script>

在这里插入图片描述
单机div时,会同时在终端输出1和2。

2、统一了事件名称。添加多播事件委托时,ie中是事件名称前面有"on"。但是使用bind()函数我们不用区分ie和dom,因为内部jQuery已经帮我们统一了事件的名称。

3、可以将对象行为全部用脚本控制。让HTML代码部分只注意"显示"逻辑。现在的趋势是将HTML的行为、内容与样式切分干净。其中用脚本控制元素行为,用HTML标签控制元素内容,用CSS控制元素样式。使用jQuery事件处理函数可以避免在HTML标签上直接添加事件。

3.4 反绑定事件

在对一个元素绑定了某种事件类型之后,可能在后来的某个时刻不再希望让该元素监听该类型的事件,此时就需要反绑定。

所谓反绑定,就是解除与元素绑定的某种事件类型及处理函数。jQuery中的反绑定处理函数为unbind([type],[data])函数。

函数名 unbind([type],[data])
作用 bind()的反向操作,从每一个匹配的元素中删除绑定的事件。如果没有参数,则删除所有绑定的事件。可以将用户用bind()注册的自定义事件取消绑定。如果提供了事件类型作为参数,则只删除该类型的绑定事件
返回值 Object
参数 type (String):(可选)事件类型
data (Function):(可选)要从每个匹配元素的事件中反绑定的事件处理函数

示例:将所有段落的所有事件取消绑定

$("p").unbind();

示例:将段落的click事件取消绑定

$("p").unbind("click");

示例:删除段落click事件foo函数的绑定

$("p").unbind("click", foo);

3.5 一次性的事件绑定

一次性的事件绑定,是指与元素绑定的事件只能被使用一次,也就是说在触发一次之后即便再执行该类型的事件也不会去执行对应的处理函数。jQuery中用于一次性事件绑定的函数是one(type,[data],fn)函数。

函数名 one(type,[data],fn)
作用 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。
返回值 Object
参数 type (String):事件类型
data (Object):(可选)作为event.data属性值传递给事件对象的额外数据对象
fn ( Function):绑定到每个匹配元素的事件上面的处理函数

示例:当段落被点击时,在终端输出其文本

    <p>橘猫吃不胖</p>
    <script>
        $(function () {
      
            $("p").one("click", function () {
      
                console.log($(this).text());
            })
        })
    </script>

在这里插入图片描述
此事件只能执行一次,再次点击p标签不会有效果。

4 事件触发器

当给一个页面元素对象绑定一个事件之后,这个事件对应的处理函数不会立即就被执行,需要有相应的动作来触发其执行。

例如,在上面的例子中多次用到的click事件类型,则是需要在用户单击鼠标左键的时候才会执行响应函数。

jQuery还提供了一种模拟用户动作的方式,这就是事件触发器。所谓事件触发器,简单的说就是通过代码来模拟用户的操作动作来实现事件的触发。

4.1 trigger触发事件

trigger(type,[data])函数是jQuery中提供的事件触发器之一,其用于对页面上所有匹配的元素触发某一种类型的事件。

函数名 trigger(type,[data])
作用 在每一个匹配的元素上触发某类事件。这个函数也会导致浏览器同名的默认行为的执行。例如,如果用trigger()触发一个’submit’,则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。也可以触发由bind()注册的自定义事件
返回值 Object
参数 type (String):要触发的事件类型。data (Array):(可选)传递给事件处理函数的附加参数

4.2 triggerHandler触发事件

jQuery中还有一个用户触发事件的函数,那就是triggerHandler(type,[data])函数,该函数的声明、返回值以及参数等信息如表所示。

函数名 type (String):要触发的事件类型。data (Array):(可选)传递给事件处理函数的附加参数
作用 这个方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作
返回值 Object
参数 type (String):要触发的事件类型。
data (Array):(可选)传递给事件处理函数的附加参数

4.3 Event Helpers快捷事件

我们可以使用事件处理函数完成对象事件的几乎所有操作,jQuery提供了对常用事件的封装。比如单击事件对应的两个方法click()和click(fn)分别用来触发单击事件和设置单击事件。

设置单击事件,点击div在终端输出1:

    <div id="testDiv">橘猫吃不胖</div>
    <script>
        $(function () {
      
            $("#testDiv").click(function () {
      
                console.log(1);
            })
        })
    </script>

等效于:

    <div id="testDiv">橘猫吃不胖</div>
    <script>
        $(function () {
      
            $("#testDiv").bind("click", function () {
      
                console.log(1);
            })
        })
    </script>

触发单击事件:$("#testDiv").click();等效于$("#testDiv").trigger("click");

5 事件的交互处理

事件的交互处理,是指根据用户在浏览网页时操作方式本身或者操作次数的不同,作出不同的事件响应。

例如当鼠标移入以及移出某个区域,或者单击某个按钮一次或者多次,可以分别给出响应的不同的显示效果。

事件的交互处理,是为了为用户提供更好的交互体验,使网站本身更加人性化,可操作性更强。

5.1 hover:模仿鼠标悬停

jQuery中的hover(over,out)函数用来模仿鼠标操作的悬停事件,即在鼠标移动到一个对象上面及移出这个对象时分别作出响应。这是一个自定义的方法。

函数名 hover(over,out)
作用 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法
返回值 Object
参数 over (Function):鼠标移到元素上要触发的函数。
out (Function):鼠标移出元素要触发的函数

6 事件对象

6.1 使用jQuery事件对象

使用事件自然少不了事件对象。因为不同浏览器之间事件对象的获取,以及事件对象的属性都有差异,导致我们很难跨浏览器使用事件对象。

IE中,事件对象是window对象的一个属性。事件处理函数必须这样访问事件对象:

obj.onclick = function () {
    
    var oEvent = window.event;
}

在DOM标准中,事件对象必须作为唯一参数传给事件处理函数:

obj.onclick = function () {
    
    var oEvent = arguments[0];
}

除了使用argument[0]访问此参数,我们也可以指定参数名称,上面的代码等同于:

obj.onclick = function (oEvent) {
     };

目前兼容DOM的浏览器Firefox,Safari,Opera,IE7等。

6.2 Javascript中事件对象操作

1、获取事件类型

var eventType = oEvent.type;

2、获取键盘按键代码:需要在keydown和keyup事件中使用。

var eventKeyCode = oEvent.keyCode

3、检测Shift,Alt,Ctrl键是否被按下

var isShift = oEvent.shiftKey; 
var isAlt = oEvent.altKey; 
var isCtrl = oEvent.ctrlKey; 

返回的是boolean值。

4、获取鼠标指针坐标

var x = oEvent.clientX;
var y = oEvent.clientY; 

6.3 jQuery中事件对象

jQuery中统一了事件对象,当绑定事件处理函数时,会将jQuery格式化后的事件对象作为唯一参数传入:

$("#testDiv").bind("click",function(event) {
     });

6.3 jQuery中事件对象操作

属性名称 描述
type 事件类型,如果使用一个事件处理函数来处理多个事件,可以使用此属性获得事件类型
target 获取事件触发者DOM对象
data 事件调用时传入额外参数
relateTarget 对于鼠标事件,标示触发事件时离开或者进入的DOM元素
currentTarget 冒泡的当前触发事件的DOM对象,等同于this
pageX/Y 鼠标事件中,事件相对于页面原点的水平/垂直坐标
result 上一个事件处理函数返回的值
altKey Alt键是否被按下,按下返回true
ctrlKet ctrl键是否被按下,按下返回true
metaKey Meta键是否被按下,按下返回true。Meta键就是就是PC机器的Ctrl键,或者Mac机器上面的Command
shiftKey Shift键是否被按下,按下返回true
KeyCode 对于keyup和keydowm事件返回被按下的键,不区分大小写,a和A都返回65.对于keypress事件请使用which属性,因为which属性跨浏览时依然可靠
which 对于键盘事件,返回触发事件的键的数字编码,对于鼠标事件,返回鼠标按键号(1左,2中,3右)。
screenX/Y 对于鼠标事件,获取事件相对于屏幕远点的水平/垂直坐标
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_46612221/article/details/122014700

智能推荐

ramdisk tmpfs_site:csdn.net ramdisk的概念-程序员宅基地

文章浏览阅读772次。http://www.lupaworld.com/home-space-do-blog-uid-56821-id-139835.html一)ramdisk1)概念ramdisk就是指使用一部分内存空间来模拟硬盘分区,也就是说ramdisk是一个块设备,要用mkfs格式化,才能真正使用它..ramdisk在内核2.0/2.2版本就已经支持..ramdisk设备是它不允许重新声_site:csdn.net ramdisk的概念

C语言中除法怎么取得小数_c语言如何除法得到小数-程序员宅基地

文章浏览阅读3.1w次,点赞22次,收藏23次。除了一开始用float进行定义之外,后面进行除法运算的时候要加.0,否则算出的结果电脑会自动取整~~如:3/2的结果和3.0/2的结果就不同~~因为没有定义3/2为浮点型,所以3/2自动取整,结果等于1而3.0/2,由于预先用浮点型表示其结果显然为:1.5_c语言如何除法得到小数

python+django+uwsgi+nginx+virtualenv 部署高可用的python web环境_1397981667-程序员宅基地

文章浏览阅读4.2k次。【摘要】 最近开始部署python的web环境,说实话对于python的单一站点部署还是有经验的,毕竟带团队已经多年(吹一下NB)。那么问题来了,不同版本的python环境部署还是必须了解的。今天,终于解决了python不同版本的环境配置。进入正题,我采用virtualenv 进行python环境隔离,部署不同的版本。然后在Nginx上进行反向代理,实现pythonweb环境。一、_1397981667

linux grep -a命令 grep用法-程序员宅基地

文章浏览阅读4.3k次。Linux grep _grep -a

公司电脑监控软件能看到哪些内容_公司监控员工电脑看什么-程序员宅基地

文章浏览阅读3.2k次。  想要知道公司电脑监控软件可以监控哪些内容首先要了解公司电脑监控软件都有哪些功能,下面就以易掌电脑监控为例讲解它所能监控的内容。1、电脑屏幕实时监控  易掌电脑监控软件可以让管理者可实时查看当前被管控电脑的画面情况及被控端的摄像头的画面,并且可同时观看多个电脑的画面情况。2、鼠标键盘使用频率监控  易掌可以统计员工电脑鼠标键盘使用频率,通过数据生成图表让管理者对员工的工作、空闲时间等一目了然。3、屏幕录像  将屏幕活动录制成视频,员工端电脑开机后自动录制屏幕,保存在管._公司监控员工电脑看什么

FPGA初识:四选一多路选择器实例练习_四选一多路选择器仿真文件-程序员宅基地

文章浏览阅读4.2k次,点赞10次,收藏64次。vivado初识:四选一多路选择器实例练习一、项目创建1、creat project2、确认项目名和项目位置,“√”确认生成子目录3、生成RTL项目文件,且“√”不添加特殊源文件4、根据上面的筛选项或直接输入型号,找到对应FPGA开发板5、确认信息二、编辑源文件1、添加设计源文件及顶层文件(1)设计源文件添加源文件(add sources →design sources)确认源文件名添加源文件代码module mux4_1_des(input wire [1:0]sel_四选一多路选择器仿真文件

随便推点

PLS中的权值和载荷_pls 载荷-程序员宅基地

文章浏览阅读2.7k次。很多人学习PLS之前是从PCR入手的,我个人认为这是PLS不错的打开方式,PCR和PLS主要区别是两者在权值W的选择上有本质的区别。PCR的权值选择是基于X本身的特征向量,而PLS则根据X‘Y的特征向量来选择。PLS早在80年代就已经提出来,当时计算特征向量并不像今天这么容易,随便调用一个SVD就行。当时求特征向量是通过幂法得到,所以,在PCR和PLS中都能找到NIPALS算法,这个迭代算法主..._pls 载荷

Tableau笔记(15)静态分组、动态分组、数据桶(生成度量区间维度)-程序员宅基地

文章浏览阅读5.8k次,点赞5次,收藏21次。1、静态分组当我想对种类的成员值进行分组(如利润大于600000为一组,剩余的为其他组)时,步骤如下:(1)右键种类字段,选择创建分组(2)选好成员值点击分组,并命名组名(注:这种分组方式是静态,并且需要知道大于600000的成员值)(3)最终效果2、动态分组动态分组可以编辑函数或者参数实现。对利润大于100000的子类别进行动态分组步骤如下:(1)在数据编辑区右键创建计算字段,并编辑脚本(2)把该字段拖入颜色标记卡,得到最终效果通过输入参数对利润的子类别进行动态分组

OVER(PARTITION BY)函数介绍_min over-程序员宅基地

文章浏览阅读6k次,点赞2次,收藏10次。问题场景    最近在项目中遇到了对每一个类型进行求和并且求该类型所占的比例,当时考虑求出每种类型的和,并在java中分别对每一种类型的和与总和相除求出所占比例。后来,想到这样有点麻烦,并且项目中持久层使用的是iBatis框架,所有考虑从SQL方面进行入手来简化这个问题。  后来SQL的解决方法就为:1 SELECT T.CHANNEL AS PATTERN,2 COUNT(T.T..._min over

zookeeper 启动正常无法进入客户端_无法进入zookeeper-client-程序员宅基地

文章浏览阅读2.8k次。./zkServer.sh status 显示正常进入客户端,./zkCli.sh -server localhost:2181无法进入客户端,仔细查看,红色的是什么鬼,里面检查hostslocalhost也是正常的,不明觉厉,不知道那错了,就一顿各种搜各种试,感谢这位博主的分享https://blog.csdn.net/qq_32447321/article/deta..._无法进入zookeeper-client

MySQL innodb_autoinc_lock_mode设置-程序员宅基地

文章浏览阅读4.1k次,点赞5次,收藏5次。转https://www.jianshu.com/p/f72b7bfa7467https://dev.mysql.com/doc/refman/8.0/en/innodb-auto-increment-handling.html国内的文章看得真是蛋疼,跟官网的文档意思差别太大。insert 语句分类insert 语句分三种类型:simple insert, bulk insert, mixed insert simple insert insert 时可以预先知道插入的行记录数量。例如_innodb_autoinc_lock_mode

实用解决当无法在web.xml或使用此应用程序部署的jar文件中解析绝对uri:[http://java.sun.com/jsp/jstl/core]_类型 异常报告 消息 无法在web.xml或使用此应用程序部署的jar文件中解析绝对uri:[-程序员宅基地

文章浏览阅读3.6w次,点赞43次,收藏70次。错误提示:无法在web.xml或使用此应用程序部署的jar文件中解析绝对uri:[http://java.sun.com/jsp/jstl/core]试过网上很多方案都没有用,比如导入jstl包、standard包,但都没有用。错误显示无法在web.xml中解析,在导包无果的情况下,我在想是不是tomcat版本或者jdk版本的问题。经过查看tomcat的jar包以及jdk,得出以下解决办法和原因。1.serlet和jsp对应版本不支持EL表达式或者没有开启EL表达式解决办法:EL表达式是从js_类型 异常报告 消息 无法在web.xml或使用此应用程序部署的jar文件中解析绝对uri:[