js事件是什么？
js事件是指用户在某事务上由于某种行为所执行的操作; （对页面元素的某种操作） 事件是文档或者浏览器窗口中发生的，特定的交互瞬间。
1.鼠标事件：
1、click：点击
<button onclick="myClick()">鼠标单击</button>
2、dblclick：双击
<button ondblclick="myDBClick()">鼠标双击</button>
3、mousedown：鼠标按下
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
4、mouseup：鼠标抬起
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
5：mouseout：鼠标离开
<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>
7、mousemove：鼠标移动
<button onmousemove="myMouseMove()">鼠标移动</button>
8、mouseleave：鼠标离开
<button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>
2. 键盘事件：
1.keydown:按下键盘任意键时触发
2.keyup：按键抬起时触发
3.keypress：按键按下抬起时触发
框架/对象事件：
1.abort：图像加载中断
2.beforeunload：改事件在即将离开页面时触发
3.error：在加载文档或图像发生错误
4.hashchange:改事件在当前url的锚部分发生修改时触发
5.pageshow：该事件在用户访问页面时触发
6.pagehide：跳转页面时触发
7.unload：退出页面时触发
3.html事件
1.load：文档加载完成
2.select：被选中的时候
3.change：内容被改变
4.focus：得到光标
5.resize：窗口尺寸变化
6.scroll：滚动条移动
代码演示：
<body onload="loaded()">
<div style="height: 3000px" ></div>
<input type="text" id="name" onselect="mySelect(this.id)">
<input type="text" id="name2" onchange="myChange(this.id)">
<input type="text" id="name3" onfocus="myFocus()">
</body>
JS和JQUERY的区别
JavaScript 是通过标签插入到HTML页面，可由所有的现代浏览器执行的一种轻量级的编程语言。
JQuery是一个JavaScript函数库。或者说是JavaScript。 比如：
根据ID取元素
{
JS:取到的是一个DOM对象。
例：var div = document.getElementByID("one");
JQUERY:取到的是一个JQUERY对象。
例：var div = $("#one");——括号里面是根据某个东西来找，相当于一个选择，如果我们要根据ID来找，在样式表里的ID是用#来表示的，所以在这里我们直接带入井号，整句的意思就是根据ID为one的来查找。
}
根据class取元素，在数组里面如果要取DOM对象使用索引的方式，如果要取JQUERY对象使用eq()
{
JS:取到的是一个数组
例：var div = document.ElementsByClassName("test");
JQUERY:
例：var div = $(".test");
}
根据name取元素
{
JS：返回的是一个数组
例：var bd = document.getElementsByName(uid);
JQUERY：的方式是用 方括号，属性=一个值，不限制非要根据name来取值，JQUERY是根据属性来取元素
例：$("[name='uid']");
}
④.根据标签名取元素
{
JS：返回的也是一个数组
例：var div = document.getElementsByTagName("div");
JQUERY：和样式表里面给所有div加样式的方法一样，在双引号内直接写标签名
例：$("div");
}
事件对象
什么是事件对象
某一个事件被触发时（例如点击事件），此时浏览器会记录触发时的某些信息， 例如你是在哪个位置点击的，你在点击的时候是直接鼠标左键点击的，还是鼠标左右键一起点击（骚操作）的等等 浏览器把这些所有的信息放到一个变量中存储，这个变量的数据类型是对象，所以称之为事件对象
# 事件对象常见属性和方法
event.target : 返回触发事件的对象 , 点击哪个元素, 就返回哪个元素 this.target : 返回绑定事件的对象, 哪个元素绑定了这个点击事件, 就返回哪个元素.
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
console.log(this); // 返回的是ul
console.log(e.target); // 返回的是li
})
</script>
</body>
event.type : 获取事件类型, 比如 click
event.clientX : 获取当前鼠标在网页上的横坐标,只跟网页的可视区域有关系
event.clientY : 获取当前鼠标在网页上的横坐标,只跟网页的可视区域有关系
event.screenX : 获取当前鼠标在当前显示器上的横坐标,
event.screenY : 获取当前鼠标在当前显示器上的横坐标,
evt.button : 获取鼠标点击的哪个键
event.preventDefault() : 该方法阻止默认事件.
event.stopPropagation() : 阻止冒泡.
事件的特性
事件冒泡
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
事件冒泡的代码案例
<div id="s1">s1
<div id="s2">s2</div>
</div>
<script>
s1.addEventListener("click",function(e){
console.log("s1 冒泡事件");
},false);
s2.addEventListener("click",function(e){
console.log("s2 冒泡事件");
},false);
</script>
事件捕获
当鼠标点击或者触发dom事件时（被触发dom事件的这个元素被叫作事件源），浏览器会从根节点 =>事件源（由外到内）进行事件传播。
事件捕获的代码案例
<div id="s1">s1
<div id="s2">s2</div>
</div>
<script>
s1.addEventListener("click",function(e){
console.log("s1 冒泡事件");
},false);
s2.addEventListener("click",function(e){
console.log("s2 冒泡事件");
},false);
</script>
