关于事件可以查看这篇文章~
一、事件分类
1、键盘事件
onkeydown，onkeyup，onkeypress（相当于前面两个事件）
2、表单事件
onfocus,onblur,onselected,onchange
3、鼠标事件
1)、
onmouseover,onmousemove,onmouseout,onmouseleave,onmouseenter，onmousedown,onmouseup,onclick,ondbclick（双击事件）
2)、onmouseout,onmouseleave事件区别
不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件
只有在鼠标指针离开被选元素时，才会触发mouseleave事件
4、浏览器事件
onload,onreload,onresize,onerror(图片加载失败的适合触发)
二、事件写法
1、直接在标签上写
①
函数名()+ script标签里的函数
②直接写语句
③自执行函数()()
<div class="title">
<button onclick="con()">点我</button>
<button onclick="console.log('就点你')">点我</button>
<button onclick="(function b(){console.log('还想点你');})()">点我</button>
</div>
<script>
function con(){
console.log("点我干啥");
}
</script>
2、动态绑定事件
①获取dom，
btn.onclick=函数
②获取dom，变量=函数，btn.onclick=变量
不能绑定多个事件
<div class="title">
<button onclick="con">点我</button>
</div>
<script>
var btn=document.getElementsByTagName("button")[0];
第一种：使用匿名函数
btn.onclick=function (){
console.log("点我干啥");
}
第二种：将函数赋给一个变量，con没有括号！！！
con=function (){
console.log("点我干啥");
}
btn.onclick=con;
事件的移除
btn.onclick=null;//事件的移除
</script>
3、事件的监听
addEventListener(事件类型，fn，事件捕捉true/冒泡false)
事件监听时，不加on
<ul>
<li>1</li>
<li>2</li>
<li id="li3" onclick="con">3</li>
</ul>
var li3=document.getElementById("li3");
li3.addEventListener("click",function (){
console.log("就想点你");
})
关于第三个参数 事件的冒泡与捕捉
IE可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件
var ul=document.getElementsByTagName("ul")[0];
var li=document.getElementsByTagName("li");
ul.addEventListener("click",function (){
console.log("就想点你");
},true); 捕获，先执行父元素，再执行子元素
ul.addEventListener("click",function (){
console.log("就想点你");
},false); 冒泡，先执行子元素，再执行父元素
li[0].addEventListener("click",function(){
console.log(2);
})
阻止事件冒泡
e.stopPropagation();
return false原生js中不能阻止事件冒泡！，jquery中不仅可以阻止事件冒泡，还可以阻止事件默认行为
li[0].addEventListener("click",function(e){
console.log(2);
e.stopPropagation();
})
阻止浏览器默认行为
1）浏览器默认行为有
①超链接的默认行为：跳转
②浏览器的拖拽事件：ondragstart
③右键菜单事件：oncontextmenu；
2）阻止浏览器默认行为 event.preventDefault()；
超链接
链接不会被打开，但是会发生冒泡
①<a href = “javascript: void(0);”>
②event.preventDefault();
③event.returnValue = false;
<div>
<ul>
<li>1</li>
<li>2</li>
<li id="li3"><a href="test.html">去别的页面</a></li>
</ul>
</div>
var ul=document.getElementsByTagName("ul")[0];
var li=document.getElementsByTagName("li");
var ha=document.getElementsByTagName("a")[0];
ha.addEventListener("click",function(event){
event.preventDefault();//标准写法
event.returnValue = false;//非标准写法
//兼容写法
event.preventDefault? event.preventDefault(): event.returnValue = false;
})
ul.addEventListener("click",function (){
console.log("就想点你");
});//冒泡，先执行子元素，再执行父元素
li[1].addEventListener("click",function(){
console.log(2);
})
拖拽
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，就必须阻止对元素的默认处理方式。可以用ondragover="allowDrop(event), 但是return false;在这里没效果！！！
下面的是菜鸟的例子 取消默认事件后，div中可放图片！
点这里看效果！！！
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
三、事件执行参数、事件委托
1、事件执行参数
1）事件的执行对象直接添加事件匿名函数上面
document.body.onkeypress=function(e){
console.log(e);
console.log(e.Keycode);//e
}
2）声明变量使用
window.event,调用事件的执行对象
document.body.onkeypress=function(){
var e=window.event;
console.log(e);
}
2、事件委托
将加到子节点上的事件加到其父节点上，作用是为了提高性能，原理是利用了事件冒泡
事件源的获取
var target = event.target || event.srcElement；
<div>
<ul>
<li>1</li>
<li>2</li>
<p>haha在这里</p>
<li id="li3"><a href="test.html">去别的页面</a></li>
</ul>
</div>
var ul=document.getElementsByTagName("ul")[0];
var li=document.getElementsByTagName("li");
var p=document.getElementsByTagName("p")[0];
ul.onclick=function (e){
var child=e.srcElement||e.target;
if(child.nodeName.toLowerCase()=="p"){
console.log("就是你了，p标签");
}
};
四、事件流
在标准的“DOM2级事件”中规定，事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。
