JavaScript学习过程所遇到中的问题（一）

Write By Monkeyfly
All the following information is from the Internet and blogs,and collected and tidied by myself.

---

一、addEventListener事件第三个参数的作用

addEventListener(event,function,useCapture)

• event：事件名称，String类型
• function：要触发的事件处理函数，Function类型

• useCapture：指定事件处理函数执行的时期或阶段，Boolean类型

• true=捕获

• false=冒泡

DOM事件流如下图所示:

1.由图可知捕获过程要先于冒泡过程发生。
2.当第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。

二、捕获过程和冒泡过程的区别

2.1.W3C模型

W3C模型是将事件捕获和事件冒泡两者进行了中和。
在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。

2.2.传统绑定事件方式

在一个支持W3CDOM的浏览器中，像这样一般的绑定事件方式，是采用的事件冒泡方式。

ele.onclick = function(event){
    /*在此输入代码*/
};

2.3.区别：
1. 当你使用事件捕获时，父级元素先触发，子级元素后触发；
当你使用事件冒泡时，子级元素先触发，父级元素后触发。
2. 捕获过程是从最顶级标签开始，逐级向下查找，直到目标事件；
冒泡过程则是从目标事件开始，逐级往上冒泡，直到最顶级标签；
3. 捕获事件先于冒泡事件执行；
4. IE事件模型默认在事件冒泡时执行，所以在处理事件时，将useCapture（第三个参数）设为false比较安全，也实现了浏览器的兼容问题。

即 useCapture = false 时

5.IE浏览器只支持事件冒泡，不支持事件捕获，因此也不支持addEventListener事件。但是提供了另外一个函数attachEvent()。

ele.attachEvent("onclick",function);

2.4.事件冒泡的过程

事件从发生的目标（event.srcElement||event.target）
开始，沿着文档逐层向上冒泡，到document为止。

三、如何阻止事件传播？

• W3C中使用stopPropagation( )方法
• IE中设置cancelBubble = true（如下）

 function(event){
     var event = event || window.event;
     //all表示所有的DOM对象，它会返回页面中所有html元素的一个集合
     if(document.all){
         event.cancelBubble = true;
     }else{
         event.stopPropagation();
     }
 }

注意：
1. 在捕获的过程中stopPropagation()后，后面的冒泡过程也不会发生了。
2. 不是所有的事件都能冒泡。例如：blur、focus、load、unload等事件。

四、阻止事件的默认行为

• W3C中，使用preventDefault( )方法
• IE中，设置window.event.returnValue = false;

五、JS中的数据类型

• 基本（简单）数据类型：【5种】

1. Number，数字
2. String，字符串
3. Boolean，布尔
4. Undefined，未定义
5. Null，空值

• 复杂数据类型：【1种】(又称为引用型)

  Object： Object本质上是由一组无序的名值对组成的。

1. Array，数组
2. Function，函数
3. Object，对象

• 变量

  js中用var来定义变量。

因为js是弱类型的，无法确定变量里面存储的是什么值，所以可以用来保存任何类型的数据。

ps是postscript缩写，意思是附言，另注，顺便说一下，补充一下。

ps:
1. es6中新增了let命令来声明变量，const命令来声明一个只读的常量。
2. let的用法类似于var，但是let所声明的变量，只能在其所在的代码块内有效。
3. const一旦声明，常量的值就不能改变。

• typeof 操作符（或称关键字）

typeof专门用来检测变量的数据类型。

用法：

var fly = "Hello World!"
alert( typeof(fly) );
或者
alert( typeof fly) ); 【推荐】

通过typeof关键字，对上面提到的5种基本数据类型会返回如下的值。

（均以字符串的形式显示）

类型	typeof( )	结果
Number	如果这个值是数值类型	number
String	如果这个值是字符串	string
Boolean	如果这个值是布尔值	boolean
Undefined	如果这个值未定义	undefined
Null	如果这个值是对象或null	object
object	任何其他对象	object
Function	函数对象	function

需要注意的是：

• typeof null返回为object,因为特殊值null被认为是一个空的对象引用。

• 在js中，任何数值除以0，数据类型都会返回NaN（Not a Number，非数值）。

var a = 1;
console.log(typeof a/0);
NaN

• Boolean、String和Number其实是一个构造函数，它们都是Function的实例，都是引用类型。

示例

var a ="Hello World!";
if( (typeof a === "number") ){
    alert("a是number类型");
}else if( (typeof a === "string") ){
  alert("a是string类型"); 
}else if( (typeof a === "boolean") ){
  alert("a是boolean类型"); 
}else if( (typeof a === "undefined") ){
    alert("a是undefined类型");
}else if( (typeof a === "null") ){
    alert("a是null类型");
}else{
    alert("自行百度！")!
}

var car = null;
console.log(typeof car); // "object"
/*实际上，undefined值是派生自null值的，因此ECMA-262规定对它们的相等性测试要返回true。*/
console.log(undefined == null); //true

下表给出了各种数据类型及其对象的转换规则。

数据类型	转换为true的值	转换为false的值
Boolean	true	false
String	任何非空字符串	""（表示空字符串）
Number	任何非0数值（包括无穷大）	0和NaN
object	任何对象	null
Undefined	此处不适用	undefined

示例：

/*此处定义了一个字符串变量*/
var msg = "Hello World!";
//语句中，()内的为条件，只有当条件为true时，里面的代码才会执行。
//此时，字符串被自动转换成了对应的Boolean值（true）
if(msg){
    alert("Value is true");
}

因此，当（）括号里面的值为：0和NaN，""（空字符）， false ，null和 undefined的时候就相当于false，不执行语句。

ps:使用!!操作符转换布尔值

1.!!一般用来将后面的表达式强制转换为布尔类型的数据（boolean），也就是只能是true或者false;

2.对于变量可以使用!!variable做检测，只要变量的值为:0、null、" "、undefined或者NaN都将返回的是false，反之返回的是true。

示例：

function Account(cash) {
    this.cash = cash;
    this.hasMoney = !!cash;
}
var account = new Account(100.50);
console.log(account.cash); // 100.50
console.log(account.hasMoney); // true

var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false

在这个示例中，只要account.cash的值大于0，那么account.hasMoney返回的值就是true。