this关键字
在面向对象语言中this表示当前对象的一个引用。但在javascript中this不是固定不变的，他会随着执行环境的改变而改变。
在方法中，this表示该方法所属的对象，如果单独使用this表示全局对象，在函数中this表示全局对象，在函数中,在严格模式下,this是未定义的(undefined)。
在事件中，this表示接收事件的元素。
<script>
var parent = {
firstName:"John",
laseName:"Doe",
id:5566,
fullName:function(){
// 给当前的firstName重新赋值
this.firstName = "喵星人";
document.write(this.firstName);
}
}
parent.fullName();
// 输出当前对象的firstName的值
document.write(this.parent.firstName);
</script>事件对象
事件流有事件捕获过程和事件冒泡过程，通常的过程为先事件捕获，在进行事件冒泡。
事件捕获
事件捕获阶段调用事件处理程序，就是最不具体的节点先接收事件，最具体的节点后接收事件，简单的来说就是从最外层到最内层。
<style>
.box1{
width: 300px;
height: 300px;
background-color: yellow;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}
.box3{
width: 100px;
height: 100px;
background-color: red;
}
</style><body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<script>
var box1 = document.querySelector(".box1");
var box2 = document.querySelector(".box2");
var box3 = document.querySelector(".box3");
box1.addEventListener("click",function(){
console.log("box1");
},true);
box2.addEventListener("click",function(){
console.log("box2");
},true);
box3.addEventListener("click",function(){
console.log("box3");
},true);
</script>
</body>事件冒泡
冒泡阶段调用事件处理程序，则是先寻找指定位置，由最具体的元素接收，然逐渐级向上传播值最不具体的元素的节点(文档)，简单的来说就是从最内层到最外层。
<style>
.box1{
width: 300px;
height: 300px;
background-color: yellow;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}
.box3{
width: 100px;
height: 100px;
background-color: red;
}
</style><body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<script>
var box1 = document.querySelector(".box1");
var box2 = document.querySelector(".box2");
var box3 = document.querySelector(".box3");
box1.addEventListener("click",function(){
console.log("box1");
});
box2.addEventListener("click",function(){
console.log("box2");
});
box3.addEventListener("click",function(){
console.log("box3");
});
</script>
</body>事件委托：
将事件处理程序绑定给一个父级元素，当任何字节点触发了匹配的父级元素绑定的事件，即可以触发父级节点的处理程序，这就是事件委托，即多个字节点。
<body>
<div class="btnBox">
<p class="content">DOM测试</p>
<button class="btn1">按钮1</button>
<button class="btn2">按钮2</button>
</div>
<script>
var button1 = document.querySelector(".btn1");
var button2 = document.querySelector(".btn2");
// 添加按钮的监听事件方法--给每个按钮都添加一遍
button1.addEventListener("click",function(){
alert("按钮1");
});
button2.addEventListener("click",function(){
alert("按钮2");
});
</script>
</body><body>
<div class="title">
<button class="btn1">按钮1</button>
<button class="btn2">按钮2</button>
</div>
<script>
var btns = document.querySelector(".title");
// 添加父级的监听事件--父级操作为事件委托
btns.addEventListener("click",function(event){
// event.target用于获取触发的目标事件
var strs = event.target;
// 弹窗显示按钮的文本信息
window.alert(strs.innerHTML);
});
</script>
</body>事件委托：事件委托是特殊的委托，它遵循一些约定
- 它用event关键词申明
- 它有固定的签名：object参数,eventArgs或派生参数，无返回值。
- 只能定义他的类内部调用
委托的定义，赋值写法有两种
- 可复用方式：代码略多些，需定义是显示类型/方法
- 内联方式：代码简洁，使用匿名类型/方法
event.target获取触发事件元素。
监听中函数需传参，event.调用event属性target。
事件委托的优点：
- 减少事件绑定，事件委托，将很多子元素的事件绑定都集中到一个通用的父元素，使得动态创建和移除的元素更加方便，不需要考虑元素的事件绑定逻辑。假设需要对<li>标签进行增加，只管进行操作就行，不用增加元素的"onclick"事件。
- 减少事件监听使用的内存，这可能对那些经常新加载的小页面效果不明显，但是对需求长时间的应用很重要。因为当元素从DOM从中移除之后，很难追踪他对内存的使用。造成内存泄漏，这是由元素的事件绑定造成的。有了事件委托，在移除子元素之后不用担心，没有解除绑定事件。
计时器
setTimeout和clearTimeout
setTimeout()在指定的毫秒数后执行指定代码
- setTimeout()是属于，window方法，该方法用于在指定的毫秒数后调用函数或计算表达式
- setTimeout()方法会返回一个整数类型的值，通过这个值，我们可以停止计时器。可以使用clearTimeout停止计时
<body>
<p class="content">计时器测试</p>
<script>
// 获取元素节点
var str = document.querySelector(".content");
// 添加计时器并执行函数，延迟5秒执行
setTimeout(function(){
// 修改p元素节点内容
str.innerHTML = "等待5秒后的内容";
},500);
</script>
</body>使用方法二：setTImeout(函数名,等待的毫秒数)
注：单位是千分之一秒，3000为3秒
<body>
<p class="content">计时器测试</p>
<script>
// 获取元素节点
var str = document.querySelector(".content");
// 创建函数，用于计时器使用
function myFunction(){
// 修改p元素节点的内容
str.innerHTML = "等待5秒之后的内容";
};
// 添加计时器并调用函数，延迟5秒执行
setTimeout(myFunction,5000);
</script>
</body>setInterval和clearInterval
setInterval()--间隔指定的毫秒数不停的执行指定指定代码
- window.setInterval()方法可以不使用window前缀，直接函数setInterval();
- setInterval函数会每秒执行一次函数，类似手表
使用方法一：setInterval(使用要执行的代码，间隔毫秒数);
注：单位是千分之一秒，3000为3秒
<body>
<button class="btn">测试</button>
<script>
// 获取p元素节点
var btn = document.querySelector(".btn");
// 给按钮添加点击事件
btn.onclick = function(){
// 添加计时器并执行函数，每隔5秒执行
setInterval(function(){
// 弹窗
alert("测试内容");
},5000);
}
</script>
</body>使用方法二：setInterval(函数名,间隔毫秒数)
注：单位是千分之一秒，3000为3秒
<body>
<button class="btn">测试</button>
<script>
// 获取p元素节点
var btn = document.querySelector(".btn");
// 创建函数
function myFunction(){
// 弹窗
alert("测试内容");
};
// 给按钮添加点击事件
btn.onclick = function(){
// 添加计时器并执行函数，每隔5秒执行
setInterval(myFunction,5000);
};
</script>
</body>clearInterval()--取消setInterval()计时器方法
- clearInterval()方法可以取消由setInterval()函数设定的定时执行操作
- clearInterval()方法的参数必须是由setInterval返回的ID值
- 注意：要使用clearInterval()方法，创建执行定时器操作时要使用全局变量
使用方法：clearInterval(setInterval()的返回值)
<body>
<p class="content">开始</p>
<button class="button">暂停</button>
<script>
// 获取元素节点
var str = document.querySelector(".content");
var btn = document.querySelector(".button");
// 创建计时变量
var time = 0;
// 添加计时器并调用函数，间隔1秒执行
var setid = setInterval(function(){
time = setid + 1;
// 修改p元素节点内容
str.innerHTML = time;
},1000);
//给按钮创建监听，用于停止计时
btn.onclick = function(){
clearInterval(setid);
};
</script>
</body><body>
<p class="content">0</p>
<button class="set">开始</button>
<button class="button">暂停</button>
<script>
// 获取元素节点
var str = document.querySelector(".content");
var btnset = document.querySelector(".set");
var btnclear = document.querySelector(".button");
// 创建计时变量
var time = 0;
// 创建计时返回值id
var setid;
// 用于判断点击开始计时次数
var bool = true;
// 创建函数，用于显示计时时间
function settime(){
// 时间进行加1
time = time + 1;
// 页面元素修改为时间
str.innerHTML = time;
};
// 添加点击事件，用于调用计时器方法
btnset.addEventListener("click",function(){
// 当bool为true时点击开始按钮生效
if(bool === true){
// 调用计时器方法，并给setid复制，返回id
setid = setInterval(settime,1000);
};
// 点击计时器按钮生效后，把限制初始为false
bool = false;
});
// 创建暂停计时器函数
function cleartime(){
// 调用暂停方法，传递计时器id
clearInterval(setid);
// 调用暂停按钮后，将限制条件置为true，限制给计时器按钮
// 允许点击计时按钮
bool = true;
};
// 创建暂停按钮点击事件，用于暂停计时器
btnclear.addEventListener("click",cleartime);
</script>
</body>