#事件对象
<div>
你好！！！
</div>
<script>
var div = document.querySelector("div")
div.onclick = function(e){
// 兼容性的写法
var e = e || window.event
console.log(e)
// 鼠标的x y轴坐标
console.log(e.clientX)
console.log(e.clientY)
console.log(e.target) //事件的对象
}
// event对象是一个事件对象
// 只有事件存在，才会存在的，系统传递过来的，不是自己定义的
// 事件对象包含了一系列相关数据的集合 （事件相关的
</script>
#e.target
<ul>
<li>
123
</li>
<li>
321
</li>
<li>
132
</li>
</ul>
<script>
var ul = document.querySelector("ul")
// 当点击li的时候，ul绑定的click事件会不会执行，会执行，因为有冒泡事件
ul.addEventListener("click",function(e){
// 谁产生了事件就是谁，e.target是事件源
// console.log(e.target)
//谁绑定了这个函数，this就返回谁
// console.log(this)
//current当前, 事件绑定的谁，就返回谁，等于说返回事件绑定的元素
console.log(e.currentTarget)
})
</script>
#阻止冒泡事件
<div class="da">
<div class="zhong">
<div class="xiao">
</div>
</div>
</div>
<script>
var da = document.querySelector(".da")
var zhong = document.querySelector(".zhong")
var xiao = document.querySelector(".xiao")
da.addEventListener("click",function(){
console.log("da捕获阶段")
},true)
da.addEventListener("click",function(){
console.log("da冒泡阶段")
},false)
zhong.addEventListener("click",function(){
console.log("zhong捕获阶段")
},true)
zhong.addEventListener("click",function(){
console.log("zhong冒泡阶段")
},false)
xiao.addEventListener("click",function(){
console.log("xiao捕获阶段")
},true)
xiao.addEventListener("click",function(e){
console.log("xiao冒泡阶段")
// 阻止冒泡
// e.stopPropagation() //Propagation:传播 W3C的标准
e.cancelBubble = true; //cancel：取消 bubble：冒泡 ie的阻止冒泡
},false)
</script>
#阻止默认事件
<a href="http://www.baidu.com">点击</a>
<!-- <a href="javascript:void(0)">点击</a> -->
<script>
var a = document.querySelector("a")
a.onclick = function(e){
// 先弹出alert 在跳转到了百度页面 href是一个浏览器默认事件
alert("这是一个测试！！！")
// e.preventDefault(); //prevent:阻止， default:默认
return false;
}
</script>
#事件委托
<ul>
<li>321</li>
<li>123</li>
<li>132</li>
<li>312</li>
</ul>
<script>
var ul = document.querySelector("ul")
// 相当于给每个li上增加了一个事件，但是比给每一个li增加事件的效率要高的多
// 利用冒泡事件
// 这种做法叫做委托事件
ul.addEventListener("click",function(e){
//target:事件源
e.target.style.backgroundColor = "red"
})
</script>
#鼠标事件
<div>这是神秘的一段话</div>
<script>
// click鼠标单击 dblclick鼠标双击 double双击
// 给document绑定的事件，相当于给整个文本文档绑定了一个事件
//contextmenu:鼠标右键菜单事件,禁止鼠标右键默认事件发生
document.addEventListener("contextmenu",function(e){
alert("111")
e.preventDefault()
})
selectstart:鼠标选择事件，禁止选择文字
document.addEventListener("selectstart",function(e){
e.preventDefault()
})
document.addEventListener()
</script>
#鼠标跟随事件
<style>
img{
width: 100px;
height: 100px;
position: absolute;
}
</style>
<img src="./images/下载.jpg" alt="">
<script>
var img = document.querySelector("img")
document.addEventListener("mouseover",function(e){
// clientX 可视区域的X轴
// pageX 文本文档中的X轴
// screeX 在电脑屏幕中的X轴
// 首先获取鼠标的位置
var x = e.pageX;
var y = e.pageY
img.style.left = x - 50 + "px"
img.style.top = y - 50 + "px"
})
</script>
#键盘事件
<input type="text">
<script>
// keydown键盘按下 keyup键盘抬起
var input = document.querySelector("input")
// keyup键盘抬起事件
// input.onkeyup = function(e){
// console.log(e)
// }
// keydown键盘按下事件，识别ctrl shift和上下左右键
// input.onkeydown = function(e){
// console.log(e)
// }
// press键盘按下事件，不能识别ctrl shift 上下左右箭头按键
input.onkeypress = function(e){
console.log(e)
}
</script>
#键盘事件对象
<input type="text" name="" id="">
<script>
var input = document.querySelector("input")
input.onkeyup = function(e){
// keyCode就是ascii码
console.log(e.keyCode)
}
</script>
#keyCode案例
<script>
var num = 10;
console.log(num) // num是一个全局变量
console.log(window.num) // window对象就是全局对象！！！
function demo(){
console.log("123415613")
}
console.log(window.demo)
console.log(window)
</script>
#window使用场景
<script>
// 浏览器对于html解析，是由上而下的
// 当执行到这里的时候，div还没有进行渲染，没有加载到，所以输出为null
// var box = document.querySelector(".box")
// console.log(box) //此时不会输出box，会输出null
// onload load:加载
// window.onload是等dom元素和图片 flash css等等加载完毕，才加载的
window.onload = function(){
var box = document.querySelector(".box")
console.log(box)
}
// DOMContentLoade和window.onload的区别在什么地方
// DOMContentLoade只需加载DOM完毕之后就可以加载里面的内容，不需要等加载完图片 flash css 等等
document.addEventListener("DOMContentLoaded", function(){
console.log("2222")
})
</script>
<div class="box"></div>
#窗口变化事件
<style>
div{
width: 200px;
height: 200px;
}
</style>
<script>
window.addEventListener("load",function(){
var div = document.querySelector("div")
window.addEventListener("resize",function(){
console.log(window.innerWidth)
if(window.innerWidth >= 800){
div.style.background = "red"
}else{
div.style.background = "blue"
}
})
})
</script>
<div></div>
#setTimeout定时器
<div></div>
<script>
// 定时器
// setTimeout:设置超时时间 == window.setTimeout 全局(窗口)时间
// setTimeout是一个函数
// setTimeout只会在时间到了执行一次
var f1 = function(){
console.log("这是我的第一个定时器")
}
for(var i = 0; i < 5; i++){
// 1s之后执行f1函数
// 1000ms是1s的意思
var timer = setTimeout(f1, 1000)
if(i > 1){
clearTimeout(timer)
}
}
</script>
#广告自动消失
<img src="./images/下载.jpg" alt="">
<script>
var img = document.querySelector("img")
var f1 = function(){
img.style.display = "none"
}
var timer = setTimeout(f1,3000)
</script>
#setInterval定时器
<script>
// setInterval
// setInterval(function(){},1000)
// 参数说明:第一个参数为函数，第二个参数为时间(单位为毫秒)
// setInterval是重复每隔多少秒执行一次
setInterval(function(){
console.log("输出")
},1000)
setInterval(f1,1000)
</script>
#倒计时
<div>
<span class="hour"></span>
<span class="minute"></span>
<span class="second"></span>
</div>
<script>
var hour = document.querySelector(".hour")
var minute = document.querySelector(".minute")
var second = document.querySelector(".second")
var endTime = "2020-3-24 12:00:00"
function cutDown(){
var nowTime = +new Date();
var endTime = +new Date("2020-3-24 12:00:00")
var offsetTime = endTime - nowTime/1000
var h = parseInt(offsetTime / 60 / 60 % 24)
var m = parseInt(offsetTime / 60 % 60)
var s = parseInt(offsetTime % 60)
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
// 需要把值放入dom元素中
hour.innerText = h
minute.innerText = m
second.innerText = s
}
// 每隔1000ms就会执行cutDown函数
var timer = setInterval(cutDown,1000)
// clearInterval(timer) 解除间隔定时器
</script>
#发送短信
手机号：<input type="number"> <button>发送验证码</button>
<script>
var btn = document.querySelector("button")
var time = 3;
btn.addEventListener("click",function(){
var timer = setInterval(function(){
if(time == 0){
clearInterval(timer)
btn.innerText = "重新发送验证码"
time = 3
btn.disabled = false
}else{
btn.disabled = true
btn.innerHTML = "("+ time +")"
time--
}
},1000)
})
</script>
#location对象
<button>点击跳转</button>
<script>
// window.location:窗口.位置
// console.log(location)
// 重新跳转到href地址
// location.href = "http://www.baidu.com"
var btn = document.querySelector("button")
btn.onclick = function(){
setTimeout(function(){
location.href = "http://www.baidu.com"
},5000)
}
</script>
#location函数
<button>点击</button>
<script>
var btn = document.querySelector("button")
btn.onclick = function(){
// 能够记录浏览器的浏览历史可以事件后退功能
// location.assign("http://www.baidu.com")
// 不能够记录浏览器历史，也不可以回退
location.replace("http://www.baidu.com")
}
</script>
