jQuery事件处理

前言
事件绑定
Query事件处理函数的好处
反绑定事件
事件触发器
- trigger触发事件
- triggerHandler触发事件
快捷事件 Event Helpers
hover：模仿鼠标悬停
jQuery中事件对象
JQuery中事件对象操作

前言

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

如在页面加载事件中，JavaScript使用window.onload()方法，它在页面的DOM树加载完毕之后执行。

<body><div id="testDiv"></div><script>let testDiv = document.querySelector("#testDiv");window.onload= function(){ testDiv.innerHTML= "<div>动态创建的div</div>"; }</script>
</body>

虽然能够在DOM完整加载后, 在添加新的元素, 但是不幸的是浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后. 所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误。

解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQuery中让这一实现变得可行。在jQuery中，我们使用ready(fn)函数。

//jQuery 使用动态创建的$(document).ready(function)方法
$(document).ready(function(){$('#testDiv').html('<div>动态创建的div</div>');});

//简便语法
//jQuery 使用$(function)方法$(function(){$('#testDiv').html('<div>动态创建的div</div>');})

事件绑定

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

基本语法格式：

$("#testDiv4").bind("click", showMsg);
我们为id是testDiv4的元素, 添加列click事件的事件处理函数showMsg.

一次性的事件绑定

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

Query事件处理函数的好处

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

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

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

反绑定事件

在对一个元素绑定了某种事件类型之后，可能在后来的某个时刻不再希望让该元素监听该类型的事件，此时就需要反绑定。所谓反绑定，就是解除与元素绑定的某种事件类型及处理函数。jQuery中的反绑定处理函数为unbind([type],[data])函数。

事件触发器

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

trigger触发事件

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

triggerHandler触发事件

jQuery中还有一个用户触发事件的函数，那就是triggerHandler(type,[data])函数。

快捷事件 Event Helpers

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

$("#testDiv").click(function(event) { alert("test div clicked ! "); });

等效于:

$("#testDiv").bind("click",function(event) { alert("test div clicked !"); });

触发单击事件:

$("#testDiv").click();

等效于：

$("#testDiv").trigger("click");

hover：模仿鼠标悬停

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

使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象.
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等.

jQuery中事件对象

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

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

件处理函数来处理多个事alert(event.type); 件，可以使用此属性获得});*

JQuery中事件对象操作

属性名称	描述	举例
type	事件类型.如果使用一个事件处理函数来处理多个事件，可以使用此属性获得事件类型,比如click	( “a”).click（function(event){ alert(event.type);})
target	获取事件触发者DM对像	$(“a[href=http: //foogle.com]”").click(function(evert) {+alert(event.target.href );v});*
data	事件调用时传入额外参数.
relatedTarget	对于鼠标事件，标示触发事件时离开或者进入的DOM元素	$(“a”").mouseout(function(event){alert(event.relatedTarget); });
currentTargete	冒泡前的当前触发事件的DOM对象，等同于this
pageX/Y	鼠标事件中，事件相对于页面原点的水平/垂直坐标	$( “a”).click(function(everit){alert("current mouse position:”+vent.pagex+ “,” + event.pageY );*);
result	上—个事件处理函数返回的值
altKeye	Alt键是否被接下．按下返回true
ctrlKey	ctrl键是否被按下，按下返回true
metakeye	Meta键是否被按下，按下返回true,meta键就是PC机器的ctrl键,或者Mac机器上面的command键
shiftKeye	对于keyup和 keydown事件返回被按下的键，不区分大小写,a和A都返回65.对于 keypress事件请使用which属性，因为 which属性跨浏览时依然可靠。
which	对于键盘事件，返回触发事件的键的数字编码.对于鼠标事件，返回鼠标按键号(1左,2中,3右).
screenX/Y	对于鼠标事件，获取事件相对于屏幕原点的水平/垂直坐标

jQuery事件处理相关推荐

jQuery事件处理概述
jQuery事件 1 概述 2 页面载入完毕响应事件 2.1 window.onload 2.2 $(document).ready()事件 3 绑定与反绑定事件监听器 3.1 概述 3.2 绑定事件 ...
jQuery事件处理一瞥
以前部门一直都是使用一个名为QTT的JS框架.最近老大提出要转用jQuery框架,需要将旧框架的一些JQ没有实现的功能移植到JQ中去.当我移植到event库的时候,以下是其代码: QTT.event ...
jquery --- 事件处理函数的event对象的几个属性(方法)说明
1.event.type: 事件的类型 $('a').click(function(event) {alert(event.type);return false; // 阻止链接跳转 }); // c ...
【前端】jQuery事件处理
<script>$(document).ready(function() {$('#btn1').click(function() {alert("Button Clicked! ...
jQuery事件处理动画效果
<目录> jQuery的几种事件语法及运用: jQuery的一些动画效果: 日常案例: 一.jQuery事件好啦,今天让我们一起来看看jQuery的事件是什么样的,和JavaScript ...
jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery ...
jQuery事件注册、jQuery事件对象、事件处理
jQuery事件注册 1.单个注册事件 element.事件(function(){函数执行程序}) 例如:鼠标点击div变化背景颜色 $("div").click(functio ...
49 jQuery事件
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery事件注册单个事件注册语法: element.事件(function() ...
Jquery 常用方法经典总结
Jquery 常用方法: 1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象( ...

jQuery事件处理

jQuery事件处理

前言

事件绑定

Query事件处理函数的好处

反绑定事件

事件触发器

trigger触发事件

triggerHandler触发事件

快捷事件 Event Helpers

hover：模仿鼠标悬停

jQuery中事件对象

JQuery中事件对象操作

jQuery事件处理相关推荐

最新文章

热门文章