事件对象
<div>
你好！！！
</div>
<script>
var div = document.querySelector("div")
div.onclick = function(e) {
//上方这个点击事件，它的事件对象可以用e来代表，e是一个形参，有一定的属性。
//需要兼容其他浏览器可加：
var e = e || window.event;
console.log(e)
// 鼠标的x y轴坐标
console.log(e.clientX)
console.log(e.clientY)
console.log(e.target) // target 目标
}
e 是event缩写
它只有事件存在，才会存在的。系统传递个过来的，不是自己定义的！！
事件对象包含了一系列相关数据的集合 (事件相关的！！！
案例：
//关于 e.target鼠标点击对象
<ul>
<li>
张世豪
</li>
<li>
李嘉诚
</li>
<li>
马云
</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) // ul
// 当前事件绑定的元素
console.log(e.currentTarget) // ul current 当前
})
</script>
阻止冒泡事件
1方式1 ：阻止冒泡
e.stopPropagation() // Propagation: 传播
2.方式2
e.cancelBubble = true; // cancel:取消 bubble:冒泡
例：
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
<script>
var grandfather = document.querySelector(".grandfather")
var father = document.querySelector(".father")
var son = document.querySelector(".son")
grandfather.addEventListener("click", function() {
console.log("grandfather捕获阶段")
}, true)
grandfather.addEventListener("click", function() {
console.log("grandfather冒泡阶段")
}, false)
father.addEventListener("click", function() {
console.log("father捕获阶段")
}, true)
father.addEventListener("click", function() {
console.log("father冒泡阶段")
}, false)
son.addEventListener("click", function() {
console.log("son捕获阶段")
}, true)
son.addEventListener("click", function(e) {
console.log("son冒泡阶段")
// 1方式1 ：阻止冒泡
// e.stopPropagation() // Propagation: 传播
// 2.方式2
e.cancelBubble = true; // cancel:取消 bubble:冒泡
}, false)
</script>
阻止默认事件
<a href="http://www.baidu.com">点击一下</a>
<script>
var a = document.querySelector("a")
a.onclick = function(e) {
alert ("这是一个测试！！！")
// e.preventDefault(); // prevent: 阻止 default:默认
//return false;
}
通常情况下会先 1.弹出alert 2.跳转到了百度、、、
这里 href是一个浏览器的默认事件
阻止默认事件
方法：1.将href中的链接改为 javascript:void(0)
2. 添加 e.preventDefault() 如上
3. 添加 return false; 如上
</script>
事件委托
// 委托事件！！！ 委托 利用的就是冒泡事件的原理！！！
<ul>
<li>
刘德华
</li>
<li>
古巨基
</li>
<li>
渣渣辉
</li>
</ul>
<script>
var ul = document.querySelector("ul")
// 相当于给每个li上增加的了一个事件！！！ 但是比给每一个li增加事件的效率会高的多！！！
ul.addEventListener("click", function(e) {
e.target.style.backgroundColor = "red"
})
</script>
鼠标事件
<div>这是神秘的一段话</div>
<script>
document.addEventListener("contextmenu", function(e) {
alert("111") //鼠标右键点击时，显示alert内容
e.preventDefault()// 阻止默认事件
})
document.addEventListener("selectstart", function(e) {
e.preventDefault()
})//这可以禁止选中文字
</script>
案例：
鼠标跟随事件
<img src="./1.jpg" alt="">
//注意：这里要让图片脱离正常文档流
<script>
var img = document.querySelector("img")
document.addEventListener("mouseover", function(e) {
// clientX 代表可视区域的X
// pageX 代表文本文档中的X
// screeX 代表在电脑屏幕中X
// 1.获取鼠标的位置
var x = e.pageX;
var y = e.pageY;
img.style.left = x - 50 + "px"
img.style.top = y - 50 + "px"
})
</script>
键盘事件
keydown 键盘按下
keyup 键盘抬起
<input type="text">
<script>
var input = document.querySelector("input")
键盘抬起
input.onkeyup = function(e) {
console.log(e)
}
input.onkeydown = function(e) {
console.log(e)
}
press 也有按下的意思但 不能识别ctrl shift 左右箭头...
input.onkeypress = function() {
}
</script>
ascii 码 "keyCode"
<input type="text">
<script>
var input = document.querySelector("input")
input.onkeyup = function(e){
//keyCode值就是ascii 码
console.log(e.keyCode)
}
</script>
例：
<input type="text">
<script>
var input = document.querySelector("input")
document.addEventListener("keyup", function(e) {
console.log(e.keyCode)
if(e.keyCode == 79) { //当按下ascii 码为79的键时，文本框聚焦
// input上面都有一个默认的函数，focus(); 代表聚焦,注意大小写。
input.focus();
}
})
// (DOM)、window对象(BOM) 、setTimeout、setInterval、this问题、location
</script>
window对象(BOM)
<script>
var num = 10;
console.log(num) // num是一个全局变量
console.log(window.num) // window对象就是全局对象！！！所以这两个结果一样
function demo() {
console.log("1`131323")
}
console.log(window.demo)
</script>
window.onload 加载
浏览器对于html解析，是从上而下。
当执行到这里的时候，div还没有进行渲染！！！
var box = document.querySelector(".box")
console.log(box) // 所以这里打印的是null
所以在外面添加一个window.onload函数，改为：
window.onload = function() {
var box = document.querySelector(".box")
console.log(box)
}
但需要等待包括 dom元素 图片 flash css 等等 加载完毕后。
下方这个函数与window.onload一样，但只需加载DOM完毕之后，不需要非得加载完毕图片 flash css等等，更快速
document.addEventListener("DOMContentLoaded", function() {
console.log("222")
})
窗口变化事件
例：
<style>
div {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<script>
window.addEventListener('load', function() {
var div = document.querySelector("div")
// resize 是监听窗口变化！！！这个监听，一旦窗口发生变化，就执行函数！！！
window.addEventListener('resize', function() {
// 窗口的宽度
console.log(window.innerWidth)
if(window.innerWidth >= 600) {
div.style.background = "red"
}else {
div.style.background = "blue"
}
})
})
</script>
setTimeout定时器
1.setTimeout == window.setTimeout
2.setTimeout是一个函数
<script>
setTimeout(function(){
console.log("这是我第一个定时器")
},1000)
//参数说明: 第一个参数为函数 第二个参数为时间，单位为毫秒
</script>
setTimeout有返回值,所以可写为：
<script>
var f1 = function() {
console.log("这是我的第一个定时器")
}
var timer = setTimeout(f1, 5000)
取消定时器！！！！
clearTimeout(timer)
</script>
例：
广告消失
<img src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00527-3086.jpg" alt="">
<script>
var img = document.querySelector("img")
setTimeout(function() {
img.style.display = "none"
},3000)
</script>
setInterval定时器
<script>
结构： setInterval(function(){}, 1000)
参数说明: 第一个参数为函数，第二个参数为时间（单位为毫秒）
// 每隔1000ms执行一次function
setInterval(function() {
console.log("输出！！！")
}, 1000)
</script>
例：倒计时
<div>
<p>距离4月4日还有</p>
<span class="day"></span>天
<span class="hour"></span>小时
<span class="minute"></span>分
<span class="second"></span>秒
</div>
<script>
var day = document.querySelector(".day")
var hour = document.querySelector(".hour")
var minute = document.querySelector(".minute")
var second = document.querySelector(".second")
function cutDown() {
var nowTime = +new Date();
var endTime = +new Date("2020-4-04 00: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元素中去
day.innerText = d
hour.innerText = h;
minute.innerText = m;
second.innerText = s;
}
// 每隔1000ms就会执行cutDown函数！！！
var timer = setInterval(cutDown, 1000)
// clearInterval(timer) 清除定时器
</script>
例2：发送验证码
手机号: <input type="number"> <button>发送验证码</button>
<script>
//
var btn = document.querySelector("button")
var time = 5;
var timer = null;
btn.addEventListener("click", function() {
timer = setInterval(function() {
if(time == 0) {
clearInterval(timer);
btn.innerText = "重新发送验证码"
btn.disabled = false
time = 5;
}else {
btn.disabled = true
btn.innerHTML = "(" + time + ")"
time--;
}
}, 1000)
})
</script>
location对象
console.log(location)
location.href = "http://www.baidu.com" // 重新跳转到href地址！！！
例1：
<button>点击跳转</button>
<script>
var btn = document.querySelector("button")
btn.onclick = function() {
setTimeout(function() {
location.href = "http://www.baidu.com"
}, 5000)
}
</script>
例2：
<button>点击</button>
<script>
var btn = document.querySelector("button")
btn.onclick = function() {
// 能够记录浏览器的浏览历史可以实现后退功能！！
location.assign("http://www.baidu.com")
// 不能够记录浏览历史，也不可以回退！！！
location.replace("http://www.baidu.com")
// 重新加载
location.reload();
}
</script>
