今天主要还是做练习和昨天的回顾吧，还有对事件的学习
一、事件流
-
概念：事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程也叫做DOM事件流。
-
事件流：分为事件冒泡与事件捕获两种
-
一个完整事件包含 捕获阶段 —> 目标阶段 —>冒泡阶段
-
事件冒泡：
当事件发生后，这个事件就要开始传播（从里向外或者从外向里）。所以，当最里面的元素触发了事件的时候，会依次向上触发所有元素的相同事件（从触发事件的元素开始一直向上触发），但是事件冒泡对我们几乎没有任何好处，所以我们需要阻止事件冒泡。
存在兼容问题
eve.stopPropagation();
eve.cancelBubble = true; //兼容IE
//兼容写法：
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
- 事件捕获：
与事件冒泡正好相反。它认为当某个事件发生时，父元素应该更早接收到事件，具体元素则最后接收到事件。
二、事件监听
- 事件触发阶段主要由于事件流：DOM0级事件处理阶段和DOM2级事件处理；
- DOM0级（事件绑定），是一种赋值方式，是被所有浏览器所支持的，简单易懂容易操作；
元素.onclick = function(){} - DOM2级（事件监听），是所有DOM节点中的方法，可以重复绑定，但是浏览器兼容存在问题；
- 语法
obj.addEventListener(‘click’,funcation(){},false);
参数1表示要绑定的事件（需要加on） ； 参数2表示函数 ； 参数3表示捕获还是冒泡（ false 冒泡 ， true 捕获）
注意，IE下的事件名才需要带on
兼容写法：
/*
+ 事件
+ 函数（把函数作为参数给函数使用）
+ 需要给绑定的元素
*/
function addEvent(ele, l, cb){
if(ele.addEventListener){
ele.addEventListener(l, cb, false);
}else{
//因为在IE低版本的浏览器下是没有事件捕获的
ele.attachEvent('on'+l, cb);
}
}
三、回调函数
- 回调函数（callback、cb）
- 概念：如果把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指的函数时，我们就说这是回调函数。
- 理解：把一个函数作为参数给另一个函数使用，把这种情况称之为回调函数
例子：
function add(num1, num2){
return num1 + num2;
}
function sub(num1, num2){
return num1 - num2;
}
function mul(num1, num2){
return num1 * num2;
}
function divs(num1, num2){
return num1 / num2;
}
function calc(num1, num2, callback){
return callback(num1, num2);
}
var res = calc(10, 20, add);
console.log(res);
function fn(){
console.log(1);
}
setInterval(fn, 1000);
四、事件委派机制
- 问题描述：传统的绑定事件的方法，绑定的相同的事件，使用for循环实际上是绑定很多次，对于浏览器
的性能有很大的消耗的。后面新创建的标记，事件是不会给你绑定上的 - 针对于这种问题有人提出，有一种方法只绑定一次事件，其他的元素都绑定了
- 解决方案：使用事件委派 —— 自己做的事情，让别人去做
- 概念：事件委托（委派）指将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件。
- 使用事件委派 event对象 target目标——点击谁，会把那个元素给显示出来
- 优势：
1.节省性能
2.可以给页面上暂时不存在的元素绑定事件
五、补充
isNaN()：判断一个字符是否为非数字，如果是数字返回false，如果是非数字返回true
注意：isNaN(‘10’)会返回false，因为隐式类型转换
toFixed()：取小数位