前端知识点随笔——JS篇

---

• addEventListener()方法，事件监听

---

语法：

	element.addEventListener(event, function, useCapture);

• 第一个参数是事件的类型 (如 "click" 或 "mousedown").

• 第二个参数是事件触发后调用的函数。

• 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

事件冒泡或事件捕获？

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到<div> 元素中，用户点击<p> 元素, 哪个元素的 "click" 事件先被触发呢？

• 在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

• 在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

---

• 函数提升和变量提升

---

(1) 创建函数有两种形式，一种是函数声明，另外一种是函数字面量，只有函数声明才有变量提升

console.log(a)  // f  a() { console.log(a) }
console.log(b) //undefined
    
function a() {
        console.log(a) 
}
var b = function(){
        console.log(b)
}

相当于

var a = 'function'
var b
console.log(a)
console.log(b)

(2)变量提升

console.log(c);   //undefined
var c = "第一次没打印出来，第二次才出来";
console.log(c);   //第一次没打印出来，第二次才出来
function fn(){
        console.log(d); //undefined
        var d = '和前面的一样啊';
        console.log(d); //和前面的一样啊
}
fn();

其实，就相当于

var c ;
console.log(c)
c = " xxxx "
console.log(c)

函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖。

函数的两种创建方法还有一点区别

//递归的时候
function bar(){
    ......
}
//**函数声明式**在函数体内可以用bar调用到自己

var foo = function(a,b){
     ......
}
//*函数字面量*foo则不行

Canvas实现贝赛尔曲线轨迹动画