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)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
随机推荐
- js获取日期实例之昨天今天和明天、后天
本文介绍了js获取日期的方法,可以获取前天.昨天.今天.明天.后天. 代码: <html> <head> <meta http-equiv="Content-T ...
- cocos2d-x开发记录：二，基本概念（粒子系统，Scheduler和定时器）
七,粒子系统 1.导言 术语粒子系统是指计算机图形学技术,它使用大量非常小的精灵或其他图形对象来模拟某些种类的“模糊”现象,于传统渲染技术相比,它很难复制.通常是高度混沌无序的系统,自然现象.化学反应 ...
- 批处理学习笔记3 - 变量声明和goto代替while循环
批处理中没有while循环,只能用goto代替.下面是代码 @echo off set /a i = 0 :again echo %i% set /a i= %i% + 1 if %i% lss 10 ...
- FPGA按键去抖verilog代码
按键去抖的原因及其分类就不罗嗦了. 在这里解释一段代码,代码是网上找的,看了半天没懂,无奈查了半天想了半天,终于明白了... module sw_debounce(clk,rst_n,sw1,sw2, ...
- C++windows内核编程笔记day13 进程、线程与信号量
Windows进程 进程是一个容器,包括程序运行须要的代码.数据.资源等信息, windows进程的特点: 每一个进程都有自己的ID号 每一个进程都有自己的地址空间.进程之间无法訪问对方的地址空间. ...
- CString转char * ,string
CString头文件#include <afx.h> string头文件#include <string.h> 1.CString转char * CString cstr; c ...
- centos7 nginx安装 及MySQL-python
1.pip install MySQL-python 出错问题 pip install -r requirement.txt 发现安装MySQL-python 出错,更新setuptools也没用 解 ...
- python ——面向对象进阶（反射，双下线方法，静态方法，类方法）
属性 如果你已经了解Python类中的方法,那么属性就非常简单了,因为Python中的属性其实是普通方法的变种. 哎,其实就是这样,我们看一下当我们想查看税后工资的时候,这其实是一个人的属性,但是它却 ...
- 八、Java的可变参数例子
1.在Java中什么是可变参数 可变参数是在Java1.5中引入的特性.它准许一个方法 public static void main(String[] args) { print("a&q ...
- taglib的uri问题
最开始我在代码中看到这样的代码(运行正常): <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/fu ...