jQuery事件处理概述

Posted 2022-02-04 橘猫吃不胖～

jQuery事件

• 1 概述
• 2 页面载入完毕响应事件
• • 2.1 window.onload
  • 2.2 $(document).ready()事件
• 3 绑定与反绑定事件监听器
• • 3.1 概述
  • 3.2 绑定事件
  • 3.3 jQuery事件处理函数的好处
  • 3.4 反绑定事件
  • 3.5 一次性的事件绑定
• 4 事件触发器
• • 4.1 trigger触发事件
  • 4.2 triggerHandler触发事件
  • 4.3 Event Helpers快捷事件
• 5 事件的交互处理
• • 5.1 hover：模仿鼠标悬停
• 6 事件对象
• • 6.1 使用jQuery事件对象
  • 6.2 Javascript中事件对象操作
  • 6.3 jQuery中事件对象
  • 6.3 jQuery中事件对象操作

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	对于鼠标事件，获取事件相对于屏幕远点的水平/垂直坐标