一、什么是事件
1、是指用户在某事务上由于某种行为所执行的操作
2、事件的要素
事件源：是指那个元素引发的事件，如：a标签、div标签
事件：事件是指执行的动作
如：单击、双击等
事件驱动程序：即执行的结果
如：单击button标签所执行的函数
二、事件的绑定
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(传参);}
5、用 addEventListener() 来绑定事件监听函数
addEventListener语法
elementObject.addEventListener(eventName,handle,useCapture);
| 参数 | 说明 |
| elementObject | DOM对象（即DOM元素）。 |
| eventName | 事件名称。注意，这里的事件名称没有“ on ”， 如鼠标单击事件 click ，鼠标双击事件 doubleclick ， 鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。 |
| handle | 事件句柄函数，即用来处理事件的函数。 |
| useCapture | 指定事件是否在捕获或冒泡阶段执行，一般用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的方式相同
2.1 事件的循环绑定
<button>按钮一</button>
<bton>按钮二</button>
<button>按钮三</button>
<button>按钮四</button>
<script type="text/javascript">
var btns = document.querySelectorAll("button");
for(var i =0;i< btns.length;i++){
btns[i].onclick = function(){
alert(i);
}
}
</script>无论点击哪个按钮，显示的都4，因为加载时，循环变量i最后的值是4,在绑定的时候，alert(i)，并没有执行，所有i只是一个变量，只有在点击按钮时才会去取值，所以，取得到i变量的最后的值4
解决办法：在绑定的函数外面再加一个函数
<button>按钮一</button>
<button>按钮二</button>
<button>按钮三</button>
<button>按钮四</button>
<script type="text/javascript">
function zh(index){
return function(){
alert(index);
}
}
var btn = document.querySelectorAll("button");
for(var i = 0;i<btn.length;i++){
btn[i].onclick = zh(i);
}
</script>三、DOM的常用事件
| 事件 | 描述 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onmousedown | 某个鼠标按键被按下 |
| onmouseup | 某个鼠标按键被松开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或按住 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或图像被完成加载 |
1、鼠标移动事件
•鼠标移动事件包括鼠标移入、移出、和滑动事件
• 移入： 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>2、鼠标位置的获取
•鼠标的位置可以通过事件对象获取
•要获取事件对象，必须在事件函数中定义形参，在调用函数时传入”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 | 鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口， 这两个属性很重要； |
3、跟随鼠标：示例：实现div的移动，要求在div上按下鼠标拖拽时div跟随移动，松开鼠标时停止移动
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 150px;height: 150px;background-color: #ccc;position: absolute;top: 10px;left: 10px;" >
<!--onmouseover="seover(event)" onmouseout="out()"-->
</div>
<script type="text/javascript">
/*
•实现div的移动，要求在div上按下鼠标拖拽时div跟随移动，松开鼠标时停止移动
•实现步骤：
•页面中定义div绝对定位，以及外观样式（使用行内样式）
•定义全局变量用于保存鼠标的操作状态，1、按下，0、松开
•在div上添加鼠标按下事件，事件函数中设置鼠标操作状态变量值为1，记录div的初始位置，鼠标的初始位置（相对于文档根的位置）
•在body上添加鼠标松开事件，事件函数中设置鼠标操作状态变量值为0
•在body上添加鼠标移动事件，事件函数中判断鼠标操作状态，在状态等于1时，获取鼠标的位置（相对于文档根的位置），计算与初始位置的差（移动距离），使用此差值+div的初始位置，得到div的当前位置
*/
var divX = divY = sbX = sbY = null;
var sb = 0;
var d = document.querySelector("div");
window.onload = function(){
}
function down(e){
sb = 1;
divX = d.style.left;
divY = d.style.top;
sbX = e.pageX;
sbY = e.pageY;
}
function up(){
sb = 0;
}
function move(e){
if(sb == 1){
var mX = e.pageX;
var mY = e.pageY;
var cX = mX - sbX;
var cY = mY - sbY;
d.style.top = cY + parseInt(divY)+"px";
d.style.left = cX + parseInt(divX)+"px";
}
}
</script>
</body>
</html>4、按键事件的处理
| 事件 | 描述 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或按住 |
| onkeyup | 某个键盘的键被松开 |
•事件对象的属性
| 属性 | 描述 |
| 返回当事件被触发时，"ALT" 是否被按下。 | |
| 返回当事件被触发时，"CTRL" 键是否被按下。 | |
| 返回当事件被触发时，"SHIFT" 键是否被按下。 | |
| keyCode/which | 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了 被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘 的布局相关。 |
按键示例： 页面中定义一个div，当键按方向键时，div向相应的方向移动
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onkeydown="downs(event)">
<div style="width: 150px;height: 150px;background-color: #ccc;position: absolute;top: 100px;left: 100px;" >
</div>
<script type="text/javascript">
/*
* 页面中定义一个div，当键按方向键时，div向相应的方向移动
•div使用固定定位或是使用绝对定位
•获取方向键的键值
•每次按键改变div位置固定的增量
*/
var dire = null;
window.onload = function(){
}
function downs(e){
dire = e.keyCode;
console.log(dire);
var d = document.querySelector("div");
switch(dire){
case 37:
d.style.left =d.offsetLeft - 10 + "px";
break;
case 39:
d.style.left =d.offsetLeft + 10 + "px";
break;
case 38:
d.style.top =d.offsetTop - 10 + "px";
break;
case 40:
d.style.top =d.offsetTop + 10 + "px";
break;
}
}
</script>
</body>
</html>实现div的自动移动，要求div在窗口中自动移动，不超出当前可见区域，当鼠标移到div上时，div停止移动，移开时恢复。（移动小广告）
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 150px;height: 150px;background-color: #ccc;position: absolute;top: 10px;left: 10px;" onmouseover="seover(event)" onmouseout="out()" >
</div>
<script type="text/javascript">
/*
*
实现div的自动移动，要求div在窗口中自动移动，不超出当前可见区域，当鼠标移到div上时，div停止移动，移开时恢复。
实现步骤
页面中定义div，固定定位，以及外观样式（使用行内样式）
定义全局变量：浏览器大小、移动方向（1为正方向，-1为负方向），每次移动的距离（步长），计时器，div
在加载事件中实现：获取div，获取浏览器大小，启动计时器
获取浏览器可见区域的大小（使用document.documentElement.clientXXXX获取）
定义move函数，在函数中改变div的位置，当移动到边界时改变移动方向
如果正方向移动，移动后的位置 + div的大小 不能大于窗口可见区域的大小，否则改变移动方向
如果是负方向移动，移动后的位置 不能小于0，否则改变移动方向
计算div的当前位置：div位置 + 方向 * 步长
div添加鼠标输入事件，事件函数中停止计时器，添加输出事件，事件函数中启动计时器（启动前先停止）
窗口改变大小事件(onresize)函数中重新获取窗口大小
*/
var broH = broW = 0;//浏览器高宽
var direX = 1;//X移动方向，1为正，-1为负
var direY = 1;//Y移动方向，1为正，-1为负
var dist = 1;//移动距离
var tm = null;//定时器
var d = "";//div
window.onload = function(){
d = document.querySelector("div");//找到div
broH = document.documentElement.clientHeight;//获取浏览器高度
broW = document.documentElement.clientWidth;//获取浏览器宽度
tm = setInterval(move,10);//启动定时器，调用move函数
}
function move(){
if(direX == 1){//如果X轴方向为正
var divX = parseInt(d.style.left) + dist;
d.style.left = divX + "px";//把div初始的left值+移动距离，赋值给left
if(divX + d.offsetWidth > broW){//判断改变后的位置+DIV本身宽度是否大于浏览器可视宽度（右边界）
direX = -1;//将X轴的移动方向改为-1
}
}
if(direX == -1){//如果X轴方向为负
divX = parseInt(d.style.left) - dist;
d.style.left = divX + "px";//把div初始的left值-移动距离，赋值给left
if(divX < 0){//判断改变后的位置+DIV本身宽度是否大于浏览器可视宽度（左边界）
direX = 1;//将X轴的移动方向改为1
}
}
if(direY == 1){//如果Y轴方向为正
var divY = parseInt(d.style.top) + dist;
d.style.top = divY + "px";
if(divY + d.offsetHeight > broH){
direY = -1;
}
}
if(direY == -1){
divY = parseInt(d.style.top) - dist;
d.style.top = divY + "px";
if(divY < 0){
direY = 1;
}
}
}
function seover(){
clearInterval(tm);
tm = null;
}
function out(){
tm = setInterval(move,10);
}
window.onresize = function(){
broH = document.documentElement.clientHeight;
broW = document.documentElement.clientWidth;
}
</script>
</body>
5077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
