什么是事件：指用户在某事务上由于某种行为所执行的操作
要素：事件源（指哪个元素引发的事件）；事件：（执行的动作）；驱动程序：即执行的结果.
事件的绑定：
1、行内事件绑定函数
定义事件函数
•在元素的事件上调用函数
•此方式一个事件只能绑定一个函数
<button onclick="toPage()"></button>
<script type="text/javascript">
function toPage(){
location.href= "index.html";
}
</script>
2、在脚本中绑定函数
定义事件函数
•获取元素
•元素的事件绑定函数的引用
•此方式一个事件可以绑定多个函数，但后面的绑定函数会覆盖前面的函数
<button id =“topage”></button>
<script type="text/javascript">
function toPage(){
location.href= "index.html";
}
var btn = document.getElementById("topage");
btn.onclick = topage;
</script>
3、脚本中绑定匿名函数
<button id =“topage”></button>
<script type="text/javascript">
var btn = document.getElementById("topage");
btn.onclick = function (){
location.href= "index.html";
}
</script>
4、脚本中绑定匿名函数传递参数
function toPage(){
location.href= "index.html";
}
var btn = document.getElementById("topage");
btn.onclick = function(){ topage(传参);}
<button id =“topage”></button>
<script type="text/javascript">
var btn = document.getElementById("topage");
btn.onclick = function ()｛
location.href= "index.html";
}
</script>
5、用 addEventListener() 来绑定事件监听函数
addEventListener语法
elementObject.addEventListener(eventName,handle,useCapture);
其中elementObject：DOM对象（即DOM元素）。
eventName：事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle：事件句柄函数，即用来处理事件的函数。
useCapture：控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡
<button id =“topage”></button>
<script type="text/javascript">
function toPage(){
location.href= "index.html";
}
var btn = document.getElementById("topage");
btn.addEventListener("click",topage);
</script>
特点：
1、行内绑定：绑定函数是唯一的，可以在调用的时候传入参数，但参数是固定的值，不建议使用
2、在脚本中使用onxxxx绑定函数：可以绑定多个函数，但是后面绑定的函数会替换掉前面的函数，最终只会执行最后一个，直接给引用的方式不能传参，如果要传参必须使用匿名函数，在匿名函数中调用事件的函数并传参。
3、使用addEventListener:可以绑定多个函数，并且多个函数依次执行，如果要传参，则与2的方式相同
DOM常用事件：
| 事件 |
描述 |
| onblur |
元素失去焦点 |
| onfocus |
元素获得焦点 |
| onclick |
鼠标点击某个对象 |
| ondblclick |
鼠标双击某个对象 |
| onmousedown |
某个鼠标按键被按下 |
| onmouseup |
某个鼠标按键被松开 |
| onmouseover |
鼠标被移到某元素之上 |
| onmousemove |
鼠标被移动 |
| onmouseout |
鼠标从某元素移开 |
| onkeydown |
某个键盘的键被按下 |
| onkeypress |
某个键盘的键被按下或按住 |
| onkeyup |
某个键盘的键被松开 |
| onload |
某个页面或图像被完成加载 |
页面加载事件
•当用户进入页面，所有内容（包括图像、脚本文件、CSS 文件等）被完全加载后就会触发 onload事件
•onload 事件常用来检测访问者的浏览器类型和版本，初始化全局变量等。
第一种方法，不建议使用
<script type="text/javascript">
function init(){
//初始化
}
</script>
<body onload=“ init ()">
</body>
建议使用这种方法
<script type="text/javascript">
window.onload = function(){
//初始化
}
</script>
<body>
</body>
鼠标移动事件
•鼠标移动事件包括鼠标移入、移出、和滑动事件
• 移入： onmouseover
•移出： onmouseout
•移动： onmousemove
<img onmousemove="move()" onmouseover="over()" onmouseout="out()" src="img/logo108.png"/>
<script type="text/javascript">
function over(){
console.log("你的鼠标在图片上");
}
function out(){
console.log("你的鼠标已离开图片");
}
function move(){
console.log("你的鼠标在图片中移动");
}
</script>
鼠标位置的获取
•鼠标的位置可以通过事件对象获取
•要获取事件对象，必须在事件函数中定义形参，在调用函数时传入”event”对象
<!--调用函数时传事件对象event-->
<img onmouseover="over(event)" src="img/logo108.png"/>
<script type="text/javascript">
function over(e){//定义接收事件的变量
console.log(e);
}
</script>
| 属性名 |
描述 |
| clientX/clientY |
事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上）document.body.scrollLeft和 document.body.scrollTop) |
| offsetX,offsetY |
事件发生的时候，鼠标相对于源元素左上角的位置； |
| pageX,pageY |
检索相对于父元素鼠标水平坐标的整数； |
| screenX、screenY |
鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口， 这两个属性很重要； |
<span style="height:600px;display: inline-block;"></span>
<img onmouseover="over(event)" src="img/logo108.png"/>
<script type="text/javascript">
function over(e){//定义接收事件的变量
console.log("e.clientY=" + e.clientY);//相对于浏览器可视区域的位置
console.log("e.pageY=" + e.pageY);//clientY + 滚动距离
console.log("e.screenY=" + e.screenY);//鼠标相对屏幕的位置
console.log("e.offsetY=" + e.offsetY);//相对元素的位置
//console.log(document.documentElement.scrollTop);//滚动距离
}
</script>