文章目录
一、基本概念
1、W3C规定：
要求我们的结构（html），表现（css），行为（js）相互分离
2、JS简介
Js是运行在客户端浏览器的，弱类型 语言
用途：
添加页面交互效果，js刚出现时主要用于表单验证
使用时注意：
1 方法：对一件事的功能的代码描述
2 只要不是js里的东西必须用引号（单引号双引号都可以）括起来，数字除外
3 js放在script标签里面
4、相对路径不能作为逻辑条件的判断条件
5、首字母大写的函数是构造函数
一些使用技巧
-
如何获取可视区的宽高：
window.innerWidth; -
如何获取整个页面的宽高：
document.body.clientHeight -
设置页面加载完再运行js语句（load事件）
window.function(){js语句}
此语句只能出现一次，外链js时也需要它
-
页面跳转函数
location.href = “http://www.baidu.com”;
3、JS注释的方式
单行: //
多行：/* */
4、JS引入页面的方式
-
1、 行间
Div(Onclick=”fn()”):单击执行一段代码 -
2、 内部js
script标签
位置任意，但一般放在body/head下面 -
3外部js
位置任意
4、JS常用的调试方法
1、 alert（“对话框内容”）；弹出对话框
2、 console.log("内容")：在控制台输出内容，调试bug常用的方法
3、 document.write("内容")：往页面中写入内容和标签
5、JS声明变量
a 使用关键字var：
var q=1; 声明js变量的一条基本语句；
var q=1,a=2;
关键字/保留字：为我js使用，别的不允许使用
b 规则：
- 1、 严格区分大小写，不能以数字开头，可以使用字母、下划线、数字、$等
注意：像1a不行 - 2、 不成文的规则：驼峰命名法（第二个单词的首字母大写）
6、js声明变量数据类型
基本数据类型：number、boolean、String、Function、Object、Undefined
Number数字
NaN:(not a number的缩写) 不是一个数字但它的数据类型是数字，NaN与其它的任何变量都不相等包括自身
- 常用方法：
| 序号 | 方法名 | 描述 |
|---|---|---|
| 1、 | parseInt() | 取整、（对于字符串）自左向右依次提取数字直到遇见非数字为止，若第一个就是非数字类型则返回NaN |
| 1.1 | parseInt(数，进制) | 转化为十进制显示 |
| 1.2 | parseFloat(数，进制) | 转化为浮点数显示 |
| 2、 | isNaN() | 判断是否为NaN，是返回true否则返回false |
| 3 | isFinite() | 判断是否是有限（限：指界限）数，是返回true否则返回false |
| 3.1 | 注意 | isFinite(1/0) 为false；isFinite(1/3) 为 true |
| 4、 | Number() | 将其它数据类型强制转化为数字类型 |
Boolean 布尔值
常用方法：Boolean()：强制转化为布尔值；
String字符串
-
属性：本身具有的性质
length：整个字符串的长度，用的时候需要调用 -
方法： 一般的用字符串来调用
| 序号 | 方法名 | 描述 |
|---|---|---|
| 1、 | charAt(index) | （index查找字符的索引，字符串中的元素从0开始）查找索引所对应的字符 |
| 2、 | charCodeAt(index) | 查找字符，返回字符所对应的ASCLL码值 |
| 3、 | String.fromCharCodeAt() | 将ASCLL码转为对应字符 |
| 4、 | substring(start ,end) | 从start开始到end结束截取字符串并返回，注意不包含end所对应的字符 |
| 5、 | substr(start ,length) | 从start开始截取length长字符串并返回 |
| 6、 | slice(start ,end) | 从start开始到end结束截取字符串并返回，注意不包含end所对应的字符，对原字符串没有影响 |
| 7、 | indexof(字符) | 从前往后找查找字符；如果找到则返回该字符第一次出现时所对应的索引否则返回-1 |
| 8、 | last Indexof(字符) | 从后往前找查找字符；如果找到则返回该字符第一次出现时所对应的索引否则返回-1 |
| 9、 | split(从哪截断) | 将字符串转为数组 split(‘ ’) 每个字符成为一个数组 |
-
字符串的拼接
使用加号：
首先看需要拼接的外围是什么符号，那么在需要拼接的位置加上该符号，在该符号之间添加两个加号，在两个加号之间添加所需添加的内容
注意单引号里面只能写双引号，双引号里面只能写单引号例如：var str=’<h1 class=””></h1>’
Function 函数：实现某一完整功能的代码的集合也就是方法
一、函数返回值：
-
1、 函数的分类：
有名函数与匿名函数（参数/作为事件处理函数） -
2、 函数的声明
方式一 function 函数名（参数）{函数体} 方式二 var 函数名= Function（参数）{函数体} -
3、 函数的调用
函数名（参数）; -
4、 函数的参数
形参：一般是函数声明时的参数， 实参：一般是函数调用过程中传进去的参数 -
5、 函数返回值：函数调用之后返回结果
关键字：return：结果;
所有的函数都有返回值，有return时返回return；没有return时返回undefined。
return之后的语句不再执行
二 方法：
| 序号 | 方法 | 描述 |
|---|---|---|
| 1、 | 函数名.Length | 返回形参的个数，一般在函数体内部用 |
| 2、 | arguments.Length : | 返回实参的个数，一般在函数体内部用 |
Object：对象（声明对象 、数组、null）
基本概念
顶级对象window
对象由属性和方法组成
方法名与方法之间、属性名与属性之间用冒号
属性与属性之间、方法与方法之间用逗号
一、 声明对象
字面量：var 对象名={ };
new关键字：var 对象名=new Object();
二、 为对象添加属性
对象名.属性名=属性值
对象名[属性名]=属性值
三、 为对象添加方法
对象名.方法名=function(){};
四、 访问对象的属性和方法：对象名.属性名或方法名
对象名[属性名或方法名]:属性值或方法是变量的时候用
数组 （存储数据、属于对象）
1、声明数组
1 字面量：var arr=[1,2,3]
2 new关键字var arr= new Arrary()
2、访问数组
通过数组的下标 数组名[下标]
3、数组属性和方法
- 属性：
length： 数组的长度可读可写 - 方法：
| 序号 | 方法名 | 描述 |
|---|---|---|
| 1、 | push(元素) | 往数组末尾添加多个元素（数据）返回值是新数组的长度 |
| 2、 | pop() | 没有参数，删除数组末尾元素,返回值是删除的元素 |
| 3、 | unshift(元素) | 往数组头部添加多个元素（数据）返回值是新数组的长度 |
| 4、 | shift() | 没有参数，删除数组头部元素,返回值是删除的元素 |
| 5、 | slice(start ,end) | 从start开始到end结束截取数组并返回，注意不包含end所对应的元素，对原数组没有影响 |
| 6、 | splice(start ,length) | 从start开始截取length长数组并返回，改变了原数组 |
| 7、 | splice(start ,length, 元素) | 先截取再在该位置添加，当length为0时，在该位置之前添加元素 |
| 8、 | indexof/lastindexof | 跟字符串一样 |
| 9、 | reverse() | 让数组反向输出 |
| 10、 | cancat() | 将数组合并并返回，数组1. cancat(数组2)将数组2合并到数组1之中 |
| 11 | join(字符之间的连接符) | 数组转为字符串，返回字符串，若不加连接符则输出默认值即逗号 |
| 12 | sort() | 数组排序，默认按照ASCLL码值升序 加参数sort( function(a,b){return a-b;} )按数字大小升序排列 sort( function(a,b){return math.random()-0.5;} ) 对数组随机排序 |
Undefined：伪定义
1、未定义就用的变量
2、一般指声明变量未赋值
适用于所有数据类型的方法
-
方法Typeof() 操作符; 查看数据类型
语法：1、typeof a; typeof (a); -
constructor属性
constructor 属性返回所有 JavaScript 变量的构造函数。
运算符
1算术运算符
加、减、乘、除
%：取余，设置范围，对5求模在0-4之间
/ ： 取整
注意加号的使用：
+：如果加号遇到字符串时就变为连接符，
其它的运算符遇到数字和其它运算符时，会将其它数据类型转为数字
a=1, 如c=a++; c=1, a=2 ；如 c=++a; a=2，c=2
2关系运算符
!= 、!== 、 ==、 ===：结果是一个布尔值
注意加号的使用：
== : 只要值相等就为真
===：值与数据类型都相等
!= ：只要值不等就为真
!==：只要不全等就为真
3 逻辑运算符
用在逻辑判断里面，返回布尔值。
-
&&逻辑与的使用（面试）：
短路问题：如果表达式一为假，表达式二没有执行的机会直接为假
当逻辑运算符参与赋值运算，如果表达式一为真，表达式二直接赋值给变量
例如：
var c= 1<2&&2; 结果c=2
注意：隐式转换（隐式转换并不改变它实际的值）（面试） 逻辑值为假的是：0，null，空字符串，NaN，undefined，false，不存在的东西(undefined） 逻辑值为真的是：空的数组，空的对象 若逻辑与的前后是赋值表达式的逻辑值根据赋的值决定 -
|| 或 ：
短路问题：如果表达式一为真，表达式二没有执行的机会直接为真 -
! 非：取反
3、 三目运算符
表达式1？表达式2：表达式3；
运算符的优先级
‘++、- -’ 大于 ‘ 、%’ 大于 ‘加、 减 ’ 大于 ‘关系运算符’ 大于 ‘逻辑运算符’
控制结构
分支结构（选择）
If选择语句
1、 if(逻辑表达式或逻辑值){语句} 其实if语句就相当于逻辑与
2、 if(){}else{} 其实if…else语句就相当于逻辑三目运算符
3、 if(){}else if{} else if{}……..else{}
if语句可以嵌套使用
switch选择语句
switch(){
case(): 语句:break;
………..
default: 语句 ;
}
switch中的break：若不加break，case会穿透（即会继续执行满足条件的下一个case的语句，程序不会报错但不符合逻辑）
循环结构
-
两个关键字：
break：跳出循环体 Continue：跳出本次循环（continue之后的语句不再循环），但不跳出循环体 -
For循环语句
一般在知道循环次数的情况下用:for(赋初值,循环条件判断,语句){ 循环体 }当不知道循环次数时也可用for循环，非主流方式
-
While循环语句
一般在不知道循环次数的情况下用While(循环条件){循环体} -
do-while循环语句
一般在不知道循环次数的情况下用do{循环体}while(循环条件) -
for….in循环:遍历对象
for(attr in obj){} attr:对象的属性或方法 obj:所需要遍历对象
循环也可以嵌套
数学函数
1、Math.random()在[ 0，1)之间随机取小数
2、Math.floor()：向下取整
3、Math.ceil():向上取整
4、Math.round():四舍五入
5、Math.abs():取绝对值
6、Math.pow(a,b):a的b次方
7、Math.sqrt():算术平方根
8、Math.sin():求正弦值
9、Math.PI：π值
递归思想：
用方法调用方法：例如计算n 的阶乘
function(){
if(n==1){
return 1;
}
return n*fn(n-1);
}
JS操纵页面上的元素
一、如何获取（定位）元素
一般方法
document:是整个文档的对象，前三种一般使用父级对象，后两种一般使用父级元素
-
1、 通过id名获取元素：
如果是H5的文档声明，那么id名就代该元素； 若不是H5的文档声明则document或父级元素.getElementById(id) -
2、 通过类名获取元素：
document或父级元素. getElementsByClassName (类名)： 通过类名获取元素即便页面中该类名只有一个，获取的元素也存在一个数组中 -
3、 通过标签名获取元素：
documen或父级元素.getElementsByTagName(标签名)： 通过标签名获取元素即便页面中该类名只有一个，获取的元素也存在一个数组中
H5新增的方法
ie低版本不支持
| 序号 | 方法名 | 描述 |
|---|---|---|
| 1 | document或父级元素.querySelector(‘选择器’) | 获取的是选择器选择中的第一个，一般使用document |
| 2 | document或父级元素.querySelectorAll(‘选择器’) | 获取的是选择器选择中所有，一般使用document |
二、改变元素样式
1、 基本概念
dom对象：doucument object modle 标签内部的都可以看作属性
访问style：将选择的元素看作对象，style看作属性
访问style的样式：将style看作属性，样式看作属性，这样就可以改变样式
例如：div{ background：red;} 注意js中不可以出现中划线
div.style.backgroundColor:blue; 或者div.style.background:blue;
2、优先级
js设置的样式会出现在行间，优先级大于css中设置样式，会覆盖
3、一次设置多条样式
Dom对象.stylecssText=“width：100px;。。。” ;
三、给元素绑定事件
1、 常用的事件名称：
单击 (click)，鼠标移入(mouseover/ mouseenter)，鼠标移出(mouseout /mouselive )，表单元素获取焦点(focus)，表单元素获取焦点(blur)
2、 绑定：
Dom对象. on+事件名称 例如：div.onclik
3、 例子
Dom对象. on+事件名称=事件处理函数（有名的函数或者匿名的函数体）
4、注意
当遇到一种触发事件，引出两种结果的时候，往往引入一个boolean变量进行判断，或者添加一个boolean属性
例如：var a=true;
img.function(){
if(a){
ul.style.height='96px';
}else{
ul.style.height='48px';
}
a=!a;
}
四、属性操作
一、普通方法
属性标签内部的id class等
属性的读操作：dom对象.属性名或者dom对象[属性]
注意：
1、此方法获得的属性是绝对路径不能作为逻辑判断的条件
类名比较特殊，需要className读取
设置属性：dom对象.自定义的属性名=属性值 或者dom对象[自定义的属性名]=属性值
注意：
此方法设置的属性在标签的内部并不显示
二、读取页面中的内容
1、常用方法
| 序号 | 方法名 | 描述 |
|---|---|---|
| 1 | 对象.innerHTML | 获取/设置html里面的所有内容，包括标签可以利用此方法往ul标签里面自动的添加li，例子： 对象.innerHTML+=”一组li标签” 往对象中添加li标签 |
| 2 | 对象.innerTEXT | 获取/设置html里面的文本内容，不包括标签 |
2、利用js提供的方法
| 序号 | 方法名 | 描述 |
|---|---|---|
| 1 | Dom对象.setAttribute(name, value) | 设置属性 |
| 2 | Dom对象.getAttribute(属性名 ) | 读取属性 |
| 3 | Dom对象.removeAttribute(属性名) | 删除属性 |
注意与类有关时属性名用class而不是className
3、H5 新增的data-api，一般是自定义的
-
添加data-自定义属性：
例如添加data-index=1, Dom对象.dataset.index=1；
例如添加data-name-age=50, Dom对象.dataset.nameAge=50; -
读取data-自定义属性：
Dom对象.dataset.属性名（去掉中划线第二个单词的首字母大写）
五、定时器
循环执行
方法：
| 序号 | 方法名 | 描述 |
|---|---|---|
| 1 | setInterval(fn,time) | 每隔time毫秒，fn函数执行一次 |
| 2 | ClearInterval(定时器名称) | 清除定时器 |
轮播图中清除定时其实一定要在最外层
延迟执行
| 序号 | 方法名 | 描述 |
|---|---|---|
| 1 | setTimeOut(fn,time) | time毫秒之后，fn执行 |
| 2 | clearTimeOut(名称) | 清除延迟执行 |
JS中节点的操作
1、节点定义：页面中的标签
2、节点的方法
查找节点
-
父亲找孩子：父元素.children
Document.firstElement.children：获取到第一个孩子 -
孩子找父亲: 子元素.parentNode;
定位父级：子元素.offsetParent; 定位父级：指含有定位属性（relative等）的元素，若没有的话默认为body -
找兄弟节点:元素.previousElementSibling/nextElementSibling
创建节点的名称
创建节点：Document.createElement(创建节点名称);
插入节点：先创建再插入
往父节点末尾插入节点：父节点.appendChild(要插入的节点)
往指定元素之前插入节点：父节点.insertBefore(要被插入的节点，在谁之前插入)
替换节点：父节点.replaceChild(新节点，被替换的节点)
删除节点：父节点.removeChild(被删除的节点)
克隆节点：被克隆的节点.cloneNode();不加参数只克隆标签，加上参数true会带着内容
Js当中关于类名的操作
1、给dom对象添加一个类名
setAttribute()
2、H5操纵类名
-
Dom对象.classList：获取当前对象的所有类名，返回一个字符串
-
Dom对象.classList下的方法：
add():给该元素添加一个类名 remove():删除一个类名 contains():是否包含某个类名 返回boolean toggle():切换类名 如果该元素有该类名，那么删除，如果没有，就添加
循环绑定事件
1、出现现象：循环中，在事件处理函数当中不能出现i，因为事件还没有处理循环已经完成，此时i是定值
解决方法：
1、 将变量i的值以自定义属性的方式存起来，利用this.属性的方式读取
2、 直接用this关键字进行绑定事件
JS中的运动（显示出变化的过程）
1、 利用定时器可做
2、 利用已经封装好的time move方法
timeMove(obj,json,fx,time,fn)
参数：obj：参与的运动对象
json 对象：obj都有那些样式参与运动{width:500,height:500}
fx:过度的运动形式（匀速，加速，减速）
time：运动持续的时间
fn：回调函数（当运动完成之后是否还做其他的事）
注意：写json对象的实参时不需加参数，fn可以不传，其他参数必须传
3、轮播图
利用封装好的js方法
-
1、 loop.js：左右轮播
首字母大写是构造方法，所以使用之前必须new实例化并初始化。 -
2、 opacityLoop.js：透明度轮播
new OpacityLoop(loop,imgUrl).inite();
绑定事件的第二种方式
1、标准浏览器: obj.addEventListener(事件名称,事件处理函数,事件流)
事件流:
false—冒泡 （我们通常直接用false就好）事件会由子元素向父元素一层一层的向外冒泡由里向外
阻止冒泡利用stopPropagation()函数，一般只有分享到时需要阻止向外冒泡 true—捕获
事件先执行父级然后执行子元素，由外向里
2、IE低版本: obj.attachEvent(on+事件名称,事件处理函数)
- 第二种绑定事件的特点：给同一个对象绑定多个相同的事件，可以做不同的事
。
利用封装方法解决ie低版本的兼容行问题： bing(obj, ev,fn)
-
事件对象
事件对象记录的是事件发生过程当中的一些细节信息，通过for…in…循环遍历keydown:当有按键按下时触发 ctrlkey：当ctrl键按下时返回值为真 -
例如：
| 序号 | 事件名 | 描述 |
|---|---|---|
| 1 | Type | 事件的类型 |
| 2 | clientX/clientY | ：鼠标的坐标，原点在左上角 |
| 3 | keyCode | 键盘的键值 空格32 enter 13 |
| 4 | target | 事件原对象事件，属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口 |
| 5 | currentTarget | 事件属性返回其监听器触发事件的节点（即this），即当前处理该事件的元素、文档或窗口。 在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。（事件会像冒泡一样一层一层往外冒） |
| 6 | stopPropagation()方法 | 阻止事件冒泡 |
-
重要例子：在拖拽中经常用
div.onmousedown = function(ev){ //ev是事件对象 var ev = ev || event;//解决浏览器的兼容性问题 }
拖拽
原理：
根据鼠标的位置相对于所要移动的元素的位置不变，通过鼠标的位置确定元素的位置
补充知识
获取定位元素的left top: dom对象.offsetLeft/offsetTop
获取元素大小的属性: dom对象.clientWidth/clientHeight 不包含边框
Dom对象.offsetWidth/offsetHeight 包含边框
获取文档可视区的大小：Document.documentElment.clientWidth/clientHeigh
获取文档的大小：Document.documentElment.scrollWidth/scrollHeight
-
获取元素的样式的值：
标准浏览器：getComputedStyle(div,false)['background']（颜色不能作为逻辑运算的条件） IE浏览器 : obj.currentStyle[attr] -
需要解决浏览器兼容问题
/* 获取元素的样式的值 解决浏览器兼容问题*/
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
}
具体实现 分为三部：
-
第一步：鼠标按下 mousedown
获取鼠标的位置到拖拽元素边界的差值 = 鼠标的位置到边界的值 – 元素的位置到边界的值 -
第二步：鼠标移动 mousemove
元素的位置到边界的值 = 鼠标的位置到边界的值 – 获取鼠标的位置到元素边界的差值 -
第三部：鼠标抬起 mouseup
将mousemove与mousedown两个事件置null
解决问题：
1、文字移动时默认选中的问题：在mousedown事件里面添加return：false；
2、解决在移动时，鼠标离开元素后依然在动的问题：将鼠标移动与抬起事件的触发对象添加到document上
日期对象
1、创建日期对象:
new Date(); 获取的是当时当地的时间
2、一些常用的方法
| 序号 | 方法名 | 描述 |
|---|---|---|
| 1 | get() | 方法获取时间 |
| 2 | getFullYear() | 获取年份 |
| 3 | getMonth() | 获取月份，实际月份等于获得的月份加1 |
| 4 | getDate() | 获取日子 |
| 5 | getDay() | 获取星期 |
| 6 | getHours() | 获取小时 |
| 7 | getMinutes() | 获取分钟 |
| 8 | getSeconds() | 获取秒 |
| 9 | getTime() | 获取毫秒 现在的时间距离1970-1-1 00:00:00 的毫秒数 |
还有一系列相应set方法设置时间
3、New Date() 传参
将日期对象设置为中国人习惯的方式的方法：
也可以利用定时器在页面中设置实时的显示当前时间
设置倒计时
1、 可以设置一个将来的时间
2、 获得一个现在的时间，两个时间相减，可以获得一个毫秒数
3、 将毫秒数装换成秒，除以1000取整，并将数据类型转化为int类型
Js当中常用数学方法
| 序号 | 方法名 | 描述 |
|---|---|---|
| 1、 | Math.random() | 在[ 0，1)之间随机取小数 |
| 2、 | Math.floor() | 向下取整 |
| 3、 | Math.ceil() | 向上取整 |
| 4、 | Math.round() | 四舍五入 |
| 5、 | Math.abs() | 取绝对值 |
| 6、 | Math.pow(a,b) | a的b次方 |
| 7、 | Math.sqrt() | 算术平方根 |
| 8、 | Math.sin() | 求正弦值 |
| 9、 | Math.PI | π值 |
1~2: Math.random()+1
5~7:Math.random()*2+5
BOM：浏览器对象模型
1、结构：
navigator：浏览器对象
Navigator.userAgent 浏览器信息
Window: 顶级对象 alert() s、setInterval() …
Open():打开一个新的页面,实现页面的跳转（参数_self）设置在当前页面打开
Prompt(“提示信息”):在打开页面时弹出窗口提示，也可以在里面输入信息
Confirm():弹出窗口，避免失误删除信息
Location:地址栏对象 操纵我们的地址栏
1、属性
注意：
1、当location的属性被重新赋值时，浏览器会自动刷新
2、锚点：地址栏中#后面的部分
2、方法
主要是页面的跳转
| 序号 | 方法名 | 描述 |
|---|---|---|
| 1 | location.assign(“http://www.dangdang.com”) | 会在历史记录当中生成一条新的纪录 |
| 2 | location.replace(“http://www.taobao.com”) | 不会生成一条新的，而是替换当前的 |
| 3 | location.reload(true) | 重加载 |
History对象:记录访问历史
方法：
| 序号 | 方法名 | 描述 |
|---|---|---|
| 1 | History.back() | 回到上一页 |
| 2 | History.forward() | 跳到下一页 |
| 3 | History.go(数值) | 数值可以为负数（负数代表返回），设置跳转到某一页 |
原生JS中的事件对象
可以获取事件 client
事件委托
1、 基本概念
事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素；
一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数；
举个例子，比如一个宿舍的同学同时快递到了，一种方法就是他们都傻傻地一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个宿舍同学；
在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。
2、事件冒泡
前面提到 DOM 中事件委托的实现是利用事件冒泡的机制，那么事件冒泡是什么呢？ 在 document.addEventListener 的时候我们可以设置事件模型：事件冒泡、事件捕获，一般来说都是用事件冒泡的模型；
- 事件模型是指分为三个阶段：
• 捕获阶段：在事件冒泡的模型中，捕获阶段不会响应任何事件；
• 目标阶段：目标阶段就是指事件响应到触发事件的最底层元素上；
• 冒泡阶段：冒泡阶段就是事件的触发响应会从最底层目标一层层地向外到最外层（根节点），事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；
3、事件委托的优点
1、减少内存消耗
2、动态绑定事件
4、jQuery 中的事件委托
jQuery 中的事件委托相信很多人都用过，它主要这几种方法来实现：
-
• $.on: 基本用法:
$(’.parent’).on(‘click’, ‘a’, function () {console.log(‘click event on tag a’); })，它是 ‘.parent’ 元素之下的 a 元素的事件代理到 $(’.parent’) 之上，只要在这个元素上有点击事件，就会自动寻找到 .parent 元素下的 a 元素，然后响应事件； -
• $.delegate: 基本用法:
$(’.parent’).delegate(‘a’, ‘click’, function () { console.log(‘click event on tag a’); })，同上，并且还有相对应的 $.delegate 来删除代理的事件； -
• $.live: 基本使用方法:
$(‘a’, ( ′ . p a r e n t ′ ) ) . l i v e ( ′ c l i c k ′ , f u n c t i o n ( ) c o n s o l e . l o g ( ′ c l i c k e v e n t o n t a g a ′ ) ; ) ， 同 上 ， 然 而 如 果 没 有 传 入 父 层 元 素 ('.parent')).live('click', function () { console.log('click event on tag a'); })，同上，然而如果没有传入父层元素 (′.parent′)).live(′click′,function()console.log(′clickeventontaga′);)，同上，然而如果没有传入父层元素(.parent)，那事件会默认委托到 $(document) 上；(已废除)
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
