jQuery-理解事件
一、理解事件
1、什么是事件
事件是Web浏览器通知应用程序（比如我们的js）发生了某个事情！
我们可以为这些特定的事情，事先安排好处理方案，这样就能够实现互动！
2、事件目标
你可以简单的理解为事件发生在的最具体的那个目标元素即为事件目标，有时也可能是document或者window!
3、事件类型
事件类型是一个用来说明发生了什么类型事件的字符串，你可以简单的理解为事件的名字！
常见的事件类型有哪些？
1）常用的与浏览器有关的事件类型：
①resize
当窗口或者框架的大小变化时在window对象上或框架上触发
②scroll
当用户滑动（滚动）带有滚动条的元素中的内容时在该元素上触发
滑动整个页面会在document以及window上触发
③error
当发生JavaScript错误时在window上面触发，当无法加载图像时在<img>元素上面触发，当无法加载嵌入内容时在<object>
元素上面触发，或者当有一或多个框架无法加载时在框架集上面触发
2）常用的与文档加载有关的事件类型：
①load
当页面完全加载后（包括所有图像、JavaScript文件、CSS文件等外部资源）在window对象上触发。
当所有的框架都加载完毕的时候会在框架集上面触发，
当图像加载完毕时会在img元素上面触发
使用object元素嵌入的内容加载完毕时会在object元素上触发
说白了：等内容（包括外部资源）加载完毕之后，在对应的元素对象上面触发
②beforeunload
会在window对象上面触发这个事件，让开发人员有可能在页面卸载前阻止这一操作。
这个事件会在浏览器卸载页面之前触发，可以通过它来取消卸载并继续使用原有页面。
将事件对象的returnValue 属性设置为要显示给用户的内容，并且将其返回才能够实现兼容各种浏览器;
3）常用的与表单有关的事件类型：
①blur
在元素失去焦点时在对应的元素上触发，该事件不会冒泡
②focus
在元素获得焦点时触发在对应的元素上，这个事件不会冒泡
③select
当用户选择文本框（<input>或<texterea>）中的一或多个字符时，在对应的元素上触发
④change
对于<input>和<textarea>元素，在它们失去焦点且value 值改变时在对应元素上触发
对于<select>元素，在其选项改变时在select元素上触发
⑤submit
浏览器会在将请求发送给服务器之前在对应的表单上触发submit事件
4）常用的与键盘有关的事件类型：
①keydown
当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件
事件对象中keyCode属性表示 键码
②keyup
当用户释放键盘上的键时触发
③keypress
当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件
事件对象中charCode属性表示 ASCII码
5）常用的与鼠标有关的事件类型：
我们的与鼠标有关的事件类型，最能体现”事件传播“,由于我们后面需要专门的一节课来学习”事件传播“，
所以说，我们这节课在讲鼠标有关的事件类型的时候，我们先避开”事件传播“这个概念！
①click
在用户点击鼠标或者按下回车键时或者移动用户触摸时触发
②dblclick
在用户双击鼠标时触发
③mousedown
按下鼠标按键时，会发生 mousedown 事件
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生
④mouseup
在用户释放鼠标按钮时触发
⑤mouseenter
在鼠标光标从元素外部移动到元素范围之内时触发,这个事件不冒泡
⑥mouseleave
在位于元素上的鼠标光标移动到元素范围之外时触发,这个事件不冒泡
⑦mouseover
在鼠标指针移入一个元素边界之内,或者移入任何后代元素时触发
⑧mouseout
鼠标从当前元素移动到其他元素时触发（哪怕移动到的元素是当前元素的后代元素或者离开任何后代元素）
⑨mousemove
当鼠标指针在元素内部移动时重复地触发
4、事件处理程序(事件监听程序)
其实事件一直在发生，有人会问为什么我没感觉到？因为你没有为事件作出响应！怎么作出响应？
为"元素"绑定对应的事件处理程序（一个函数，当具体的元素上发生对应的事件时的就会触发这个函数的执行）
绑定的这个函数我们可以称为事件处理程序！
我们通过DOM对象的addEventListener方法来为具体的目标绑定对应的事件处理函数
Internet Explorer 8 及更早IE版本不支持 addEventListener() ，Opera 7.0 以及更早版本也不支持。
当然我们目前只是用这个原生的方法演示一下即可，后面我们jQuery会提供一个兼容各种浏览器的方法!
addEventListener()参数说明：
eventType：字符串，表示监听的事件类型
function：事件在预定目标发生时，执行的函数
useCapture：(可选)布尔值，是否注册到捕获阶段，默认false
5、事件传播（事件流）
事件传播指的是事件在页面中传播的顺序（事件流）
既然可能有很多个元素一齐发生了同样的事件，那么总该有个先后顺序吧？
事件传播描述的是从页面中接收事件的顺序。有意思的是，IE 和Netscape开发团队在当时居然提出了差不多是完全相反的事件流的概念。
当时IE开发团队提出的的事件传播顺序为事件冒泡，而Netscape公司提出的事件传播顺序为事件捕获。
IE开发团队提出的的事件传播顺序：事件冒泡
即事件开始是由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）
Netscape公司提出的事件传播顺序：事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
“捕获”的用意在于在于一层一级的往里找，在找的过程中把事件依次传播给它们，直到找到具体的事件目标。
老版本的ie浏览器不支持（ie9以下的ie版本）
W3C规定的事件传播方式(我们可以称为DOM事件传播,或DOM事件流)
事件传播有三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段
事件捕获阶段：如果有绑定在事件捕获阶段的处理函数则按照捕获的顺序执行
处于目标阶段：如果有直接绑定在事件目标上的处理函数则按照绑定的先后顺序来执行（不管addEventListener的第三个参数是true还是false）
事件冒泡阶段：如果有绑定在事件冒泡阶段的处理函数则按照冒泡的顺序执行
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8" />
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<style type="text/css">
#div1 {
width:300px;
height:300px;
background:#eee;
border:1px solid #ccc;
}
</style>
<script type="text/javascript">
$(function(){
/*
//因为div1是事件目标，所绑定在他们身上的多个同样的事件处理程序，执行顺序是根据绑定先后而言！
var div1=document.getElementById('div1');
div1.addEventListener('click',function(){
console.log('1div_true');
},true);
div1.addEventListener('click',function(){
console.log('0div_false');
});
*/ var html=document.getElementById('html');
var body=document.getElementById('body');
var div1=document.getElementById('div1');
window.addEventListener('click',function(){
console.log('window_false');
});//冒泡阶段，接收到click事件的时候执行
window.addEventListener('click',function(){
console.log('window_true');
},true);
document.addEventListener('click',function(){
console.log('document_false');
});
document.addEventListener('click',function(){
console.log('document_true');
},true);
html.addEventListener('click',function(){
console.log('html_false');
});
html.addEventListener('click',function(){
console.log('html_true');
},true);
body.addEventListener('click',function(){
console.log('body_false');
});
body.addEventListener('click',function(){
console.log('body_true');
},true); div1.addEventListener('click',function(){
console.log('div1_true');
},true);
div1.addEventListener('click',function(){
console.log('div1_false');
});
});
</script>
</head>
<body id="body">
<div id="div1"></div>
</body>
</html>
PS:并不是所有的事件类型都支持事件冒泡！低版本的ie浏览器也没有捕获这个阶段！
一堆烂摊子，坐等我们后面jQuery来解决这个问题！
6、事件对象
当我们事件处理函数执行的时候，我们的事件处理函数会接受到参数->事件对象，我们使用一个变量接受即可
当然低版本的ie浏览器是接受不到的，并且事件对象内的一些属性名称和W3C规定的标准的属性名称也可能不一致！
事件对象内部，包含了与该事件类型以及目标有关的数据，不同的事件类型，包含的属性以及方法可能也不太一样！
bubbles Boolean 表明事件是否冒泡
preventDefault() Function 取消事件的默认行为。如果cancelable是true，则可以使用这个方法
stopImmediatePropagation() Function 忽略当前元素尚未执行的的事件处理函数；终止事件在元素树种的传播
stopPropagation() Function 执行完当前元素的所有事件处理函数后；终止事件在元素树中的继续传播
target Element 事件的目标
currentTarget Element 其事件处理程序当前正在处理事件的那个元素
当前执行的事件处理函数所绑定在的那个元素对象！
注意：在事件处理程序内部，this始终等于currentTarget的值，而target则只包含事件的实际目标
type String 被触发的事件的类型
7、事件委托
正常思路：
直接将事件处理函数绑定到事件目标上！
事件委托：
将事件处理函数委托给他们的祖先对象！
事件冒泡！
退一步，海阔天空！
注意点：
事件类型必须要支持事件冒泡！
大家最好将委托对象选择为 是举例事件目标近一点的！
jQuery-理解事件的更多相关文章
- jquery的事件命名空间详解
jquery现在的事件API:on,off,trigger支持带命名空间的事件,当事件有了命名空间,就可以有效地管理同一事件的不同监听器,在定义组件的时候,能够避免同一元素应用到不同组件时,同一事件类 ...
- 不写完不让回家的JQuery的事件与动画
在这看不见太阳的小黑屋里,苦逼的一天又开始了 好了闲话我也就不扯了,接下来我就来说说我对jQuery事件和动画的理解吧!!! 还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们 ...
- jQuery scroll事件实现监控滚动条分页示例（转）
这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...
- js 事件冒泡是什么如何用jquery阻止事件冒泡
什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈 (1)什么是事件起泡 首先你要明 ...
- 事件冒泡是什么如何用jquery阻止事件冒泡
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
- 第4章 jQuery的事件和动画(1)——事件篇
jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力 一. jQuery的事件 1. $(document).ready(function(){})加载方式 再次回到win ...
- [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- jQuery之事件和批量操作、事件委托示例
一.常用事件 click(function(){...}) // 点击时触发 focus(function(){...}) // 获得焦点触发 blur(function(){...}) // 失去焦 ...
- 【jQuery】(4)---jQuery常用事件
[jQuery入门](4)---jQuery常用事件 一.常用事件列表 1.blur() 当失去焦点时触发.包括鼠标点击离开和TAB键离开. 2.change() 当元素获取焦点后,值改变失去焦点事触 ...
- 【JQuery】事件冒泡及使用jQuery阻止
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
随机推荐
- env命令详解
env命令时gnu的coreutils包内的一个软件,它的功能是:在一个修改后的环境里执行命令. 通俗的讲:一个linux软件可能被安装在好几个地方,举个例子:在最新的centos中perl的版本为5 ...
- #ifndef用于避免多重包含
原因:C中,某一个重要的头文件可能被多个文件包含,如果编译的多个文件均包含了同一个头文件, 就可能存在,一个头文件被多次包含的问题. 用法:这个问题,一般用#ifndef来解决. 1.定义一个与文件名 ...
- [k8s]dashboard1.8.1搭建( heapster1.5+influxdb+grafana)
dashboard最终效果 多了执行sh的窗口 heapster+influxdb+grafana搭建 整个架构是 dashboard去检测 hepster service服务, heapster通过 ...
- 每日英语：Secrets Of Effective Office Humor
Margot Carmichael Lester loves making good-natured jokes at work. As owner of The Word Factory, a Ca ...
- 08、通过自定义依赖属性，用 StateTrigger 修改全局主题样式
在 Win 10 的 UWP 中,需要在 xaml 中,通过使用 StateTrigger 修改全局的文本大小.Background.画刷等依赖属性等主题样式.下面只针对字体大小进行描述,其它依赖属性 ...
- 由sqlite在手机上的存储位置，引发的onCreate在哪里执行的小结
我们都知道,android为了操作数据库,一般是继承SQLiteOpenHelper类,并实现他的三个函数. 如下所示: package jz.his.db; import android.conte ...
- OCILIB开源的C/C++ Oracle驱动
OCILIB是一个开源的.跨平台的Oracle驱动,可以高效的操作Oracle数据库. OCILIB库: - 提供丰富的.全特性的.容易使用的API - 运行在所有的Oracle平台 - 使用标准的I ...
- centos修改ip mac等
CentOS修改mac http://www.haowlan.com/jishuluntan/488.html CentOS 修改IP地址, DNS, 网关 http://www.21andy.com ...
- Ubuntu下SSH安装及提高SSH登陆认证速度的办法
Ubuntu 下安装 OpenSSH Server 是无比轻松的一件事情,需要的命令只有一条: sudo apt-get install openssh-server (查看返回的结果,如果没有出错, ...
- STM32F10x_ADC三通道逐次转换(单次、单通道软件触发)
Ⅰ.概述 本文讲述关于STM32功能比较强大的ADC模块.ADC(Analog to Digital Converter)也就是模拟量转化为数字量,而STM32的ADC模块功能比较多,本文主要讲述“三 ...