基本数据类型
number string boolean null undefined symbol
underfined
变量的初始值
数组越界
函数默认返回值
访问对象没有的属性
引用数据类型
array object
判断数据类型
typeof
arr.constructor == Array
arr instanceOf Array
Array.isArray(arr)
继承
function Animal(name, age) {
this.name = name
this.age = age
}
Animal.prototype.eat = function() {
console.log("吃饭")
}
function Cat(name, age) {
Animal.call(this, name, age) //执行父级的构造函数,替换this
}
Cat.prototype = new Animal() //原型指向父类实例
Cat.prototype.constructor = Cat // constructor 指向自身
var mimi = new Cat('xioami', 2)
捕获和冒泡
捕获从外往里,.冒泡从里往外
先捕获后冒泡
var div = document.querySelector("div")
div.addEventListener('click',function(){
},true) //为true时先捕获后冒泡
var div = document.querySelector("div")
div.addEventListener('click',function(){
},false) //默认先冒泡后捕获
事件对象
<div class="fa">
<div class="son"></div>
</div>
<script>
var fa = document.querySelector(".fa")
var son = document.querySelector(".son")
fa.addEventListener('click', function(e) {
console.log(e.target); //触发事件的对象
console.log(this); // 绑定事件的对象
})
</script>
阻止事件冒泡和默认行为
e.preventDefault() //阻止默认事件
e.stopPropagation() //阻止冒泡
事件委托
<button id="btn">11</button>
<ul>
<li>ss</li>
<li>ff</li>
</ul>
<script>
var oul = document.querySelector('ul')
var btn = document.querySelector('#btn')
btn.addEventListener('click', function() {
var oli = document.createElement('li')
oli.innerHTML = Math.random()
oul.appendChild(oli)
})
oul.addEventListener('click', function(e) {
console.log(e.target.innerHTML);
})
</script>
动态绑定事件,
减少内存消耗
jQuery的事件委托