事件对象的作用：
1.可以获得和哪个按键结合
2.获得点击所在的位置
3.获得点击所对应的标签
var wrap = document.querySelector("#wrap");
wrap.onclick = function(e){
//console.log(e);
//1.浏览器兼容
//形参对象是针对于现代浏览器
//IE不能通过形参来获得事件对象，window.event
//console.log(window.event)
var ev = e || window.event;
//2.事件对象点击所在的位置
//clientX和clientY，针对于浏览器视窗而言
console.log("clientX:"+ev.clientX+" clientY:"+ev.clientY)
//3.offsetX和offsetY相对于自身而言
console.log("offsetX:"+ev.offsetX+" offsetY:"+ev.offsetY)
//4.screenX和screenY相对于显示屏
console.log("screenX:"+ev.screenX+" screenY:"+ev.screenY)
//5.点击所对应的标签
console.log(ev.target);
}
事件对象练习：
div的中心位置跟随鼠标点击后的位置
鼠标事件：
事件分为：鼠标事件和键盘事件
鼠标事件：1.点击，onclick
2.滚轮，onmousewheel
3.右键，oncontextmenu
4.鼠标左键按下，onmousedown
5.鼠标左键按起，onmouseup
6.鼠标移动，onmousemove
鼠标事件：
1.onmouseover
2.onmouseout
3.onmouseenter
4.onmouseleave
1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有）
2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）
这四个事件两两配对使用，onmouseover、onmouseout一对，onmouseenter、onmouseleave一对，不能混合使用。
按住->移动
事件响应
var div = document.querySeletor("#wrap");
//事件响应必须在标签的范围内才能响应
div.onmousedown = function(e){
var myEv = e || window.event;
var currentX = myEv.offsetX;
var currentY = myEv.offsetY;
window.onmousemove = function(e){
//需要获得鼠标移动的位置
var ev = e || window.event;
var x = ev.clientX;
var y = ev.clientY;
div.style.left = x - currentX + "px";
div.style.top = y - currentY+ "px";
}
window.onmouseup = function(){
//将移动事件取消
window.onmousemove = null;
}
}
事件冒泡
如果两个或者多个标签叠在一起，一旦这几个标签都有事件触发，那么在点击的时候会同时触发这些事件，称之为事件冒泡
即事件通过层级关系进行传递的过程
阻止事件冒泡的方式：
//IE：cancelBubble
//现在浏览器：stopPropagation,google,火狐
移入移出效果，mouseover，mouseout记得阻止冒泡
阻止默认事件
onkeydown和onkeypress的区别
//标记当前是向上滚动还是向下
var down = false;//false:向上，true:向下
//判断当前浏览器是不是火狐
var str = window.navigator.userAgent;
//值不为-1的时候，证明是火狐浏览器
if(str.indexOf("Firefox") != -1){
window.addEventListener("DOMMouseScroll",function(e){
var ev = e || window.event;
if(ev.detail<0){
down =true;}
else{
down = false;}
console.log(ev);
},false);
}else{
window.onmousewheel = function(e){
var ev = e || window.event;
if(ev.wheelDelta<0){
down = false;
}
else{
down = true;
}
}
函数回调callback（）
自定义滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滚动条</title>
<style>
#wrap{
width:300px;
height:400px;
border:1px solid red;
position: relative;
overflow: hidden;
}
#content{
width:280px;
position: absolute;
top:0;
}
#slider{
width:20px;
height:100%;
position: absolute;
right:0;
border-radius: 10px;
background: gray;
}
#scroll{
width:100%;
height:50px;
position: absolute;
right:0;
border-radius: 10px;
background: green;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">夜，结束了一天的喧嚣后安静下来，伴随着远处路灯那微弱的光。风，毫无预兆地席卷整片旷野，撩动人的思绪万千。星，遥遥地挂在天空之中，闪烁着它那微微星光，不如阳光般灿烂却如花儿般如痴如醉。
——题记
欲将沉醉换悲凉，清歌莫断肠。这混乱的尘世，究竟充斥了多少绝望和悲伤。你想去做一个勇敢的男子，为爱，为信仰，轰轰烈烈的奋斗一场。你周身充斥着无人可比的灵气和光芒。你有着与伟人比肩的才气和名声，你是那样高傲孤洁的男子。你的一寸狂心未说，已经几度黄昏雨。
曾经以为，相爱的人一定要相守，只有相守，情感才能长久。可是，此岸和彼岸只不过是空间的差距，却无法拉长心灵的距离。
时光荏苒，岁月无声。日子不紧不慢的如涓涓溪水静静的流去，而从身边流去的只有时光，沉淀下来的是与你一路相伴的幸福和快乐，温馨和安暖。于我，在这个凋零都感受到诗意横溢的秋，只想做一件事，拈一片绯红的枫叶，轻轻地刻上我的心语。对信仰，是我今生永不改变的主题！而后，幸福的寄往有你的那个城市。从此，在我心里，于我的生命里，轻握你许的安暖，静静地在岁月的彼岸，为你守候一世永恒！</div>
<div id="slider">
<div id="scroll"></div>
</div>
</div>
</body>
<script>
//获得标签
var content = document.querySelector("#content");
var slider = document.querySelector("#slider");
var scroll = document.querySelector("#scroll");
var wrap = document.querySelector("#wrap");
var sliderMaxHeight = slider.offsetHeight - scroll.offsetHeight;
var contentHeight = content.offsetHeight - wrap.offsetHeight;
//文本移动
function move(){
scroll.style.top = y+"px";
//文字滚动范围/滚动条可滚动范围*滚动条当前滚动到的位置
var scale = contentHeight/sliderMaxHeight;
var value = y*scale;
content.style.top = -value + "px";
}
//1.点击能够拖拽滚动条
scroll.onmousedown = function(e){
var ev = e || window.event;
var current_y = ev.offsetY;
document.onmousemove = function(e){
var ev = e || window.event;
var offY = ev.clientY;
y = offY - current_y;
if(offY - current_y<=0){
y = 0;
}else if(offY-current_y>=sliderMaxHeight){
y = sliderMaxHeight ;
}
move()
return false;
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
//1.按上下键进行滚动
//2.点击滚动条跳转到某个位置
</script>
</html>
碰撞发生样式改变检测
能用css加载动画就不要js
表单事件
移动端事件
面向对象
