event对象
2017-11-05 本文已影响13人
简_笑
- event是一个浏览器内部的对象（非网页标签对象），他代表事件发生的时候跟事件有关的相关信息的集合体（对象就是信息的集合体）——只在事件发生的时候存在！
- event通常就只用于获取在事件发生的时候的有关信息，比如：鼠标该时刻的坐标位置（x和y），是哪个网页对象发生了该事件，发生事件的时候是哪个鼠标按键触发的，或哪个键盘上的键。以上信息由以下几个event属性来获取：
event.clientX：获取事件发生的时候鼠标的x坐标位置
event.clientY：获取事件发生的时候鼠标的y坐标位置
event.target：获取事件发生的时候的那个标签对象（适用于FF）——类似getElemenById获取的对象
event.srcElement——获取事件发生的时候的那个标签对象（适用于IE）——类似于getElementById获取的对象
事件发生的时候的那个标签对象通常被称为“事件源”
event.keyCode：键盘事件发生的时候的按键的键值——键盘上每个键都对应一个数字值
- var v1 = document.createElement("标签名") //创建指定标签的对象
- var v1 = document.body； //代表body那个标签对象，相当于直接获取了网页中的body那个标签对象
this和event的使用对比
<标签名1 on事件名 = “函数名f1（this）” >……</标签名1>
<标签名2 on事件名 = “函数名f2（event）” >……</标签名2>
<script>
function f1(obj){
//在此范围内，obj代表的就是“标签名1”这个对象，类似使用getElementById获得的对象
}
function f2（evt）{
//在此范围内，evt代表的是事件发生的时候的event对象
//这里使用evt，基本上也就是使用其以下属性：
var v1 = evt.clientX；//获得鼠标当时的x坐标
var v2 = evt.clientY；//获得鼠标当时的y坐标
var v3 = evt.keyCode；//获得键盘的按键值（只对键盘事件有效）
var v4 = evt.target；//获得事件源对象，IE是：evt.srcElement;
}
</script>
练习：
满天星
<!DOCTYPE html>
<html lang="en" onclick="newStar(event)">
<!--onclick = ""只能放在html或body里面，因为是在网页的任何位置点击的，又因为经alert测试，body失败，只能放在HTML里面-->
<head>
<meta charset="UTF-8">
<title>满天星</title>
<!--点出满天小星星,网页一打开就是黑色；在网页的任何位置点击则在该位置就会出现一个小星星； 星星的大小在15-80范围之内-->
<style type="text/css"></style>
<script type="text/javascript">
function init() {
var obj = document.body; /*下面代表网页整个对象(body对象)*/
obj.bgColor = "black";
}
function newStar(evt) {
/*创建一个标签名为img的对象——其实也就是标签，这个对象跟我们使用getElementById（）获取的标签本质上一样*/
var star = document.createElement("img");
/*此时只是给star这个对象的属性src赋值了，但其并没有在“网页中”，而只是在内存中*/
star.src = "./pictures/star.PNG ";
var b = document.body;/*代表body那个标签对象*/
b.appendChild(star);
/*设定位置*/
var x = evt.clientX;
var y = evt.clientY;/*获得鼠标点击处的位置*/
star.style.position = "absolute";
star.style.left = x + "px";
star.style.top = y + "px";
/*设定宽度（高度自动）*/
var w = Math.floor(Math.random() * (80 - 15 + 1)) + 15;
star.width = w;
}
</script>
</head>
<body onload="init()">
</body>
</html>
image.png
