事件对象：event
属性：
srcElement事件源对象
keyCode 键盘按键Ascii码
window方法：
定时器：
1)setTimeout();//n毫秒后执行一次
2)setInterval();//每隔n秒执行一次
这两个方法都有个返回值,返回一个定时器id,可以定义一个变量接收
清除定时器方法:
setTimeout()对应的是 clearTimeout(id);
setInterval()对应的是 clearInterval(id);
<html> <head> </head> <body> <div onclick="show1()">aaaa</div> <h2 onclick="show1()">bbb</h2> <p onclick="show1()">www</p> </body> <script> //弹出对应的内容 function show(obj){ alert(obj.innerText); } //我不希望使用this关键字， function show1(){ alert(event.srcElement.innerText); } </script> </html>
<html> <head> </head> <!--<body onkeypress="show()">--> <body onkeyup="show()"> <input type="text" onkeyup="if(this.value!=this.value.toUpperCase())this.value=this.value.toUpperCase()"/> </body> <script> function show(){ alert(event.keyCode); if(event.keyCode=="27"){ window.close(); } } </script> </html>
<html> <head> <!--定时器Interval--> </head> <body> <div id="one" style="color:red;font-size:10cm;text-align:center"> 0 </div> <input type="button" onclick="stop1()" value="stop"/> <input type="button" onclick="start1()" value="start1"/> </body> <script> var one=document.getElementById("one"); var i=1; var dt=""; function start1(){ dt=setInterval(function(){ one.innerText=i; i++; },"100"); } function stop1(){ clearInterval(dt); } </script> </html>
<html> <head> <!-- 不做了，思路： 按enter键停止，将xs，ys替换为0，再次按，判断xs和ys是否为0，是的话，讲根据fx给xsys赋值。 实现鼠标点哪往哪里走：获取鼠标的坐标，和现在的左边，确定应该往x走多少，y走多少，根据x y的值调走的速度 --> </head> <body onkeydown="opt()"> <img border="0" id="ren" src="images/q_1.jpg" style="position:absolute;left:0px;top:0px;"> </body> <script> var ren=document.getElementById("ren"); var fx="q"; function transStr(obj){ //return obj.substring(obj.lastIndexOf("/")+1,obj.length); return obj.substr(obj.lastIndexOf("/")+1); } function changetu(){ if(transStr(ren.src).charAt(2)=="1") ren.src="images/"+fx+"_2.jpg"; else ren.src="images/"+fx+"_1.jpg"; } function start1(){ setInterval(function(){ run(); changetu(); },400); } start1(); function opt(){ var code=event.keyCode; switch(code){ case 37://左 fx="z" ys=0; xs=-5; break; case 39://右 fx="y"; ys=0; xs=5; break; case 38://上 fx="h"; xs=0; ys=-5; break; case 40://下 fx="q"; xs=0; ys=5; break; } } var x=0; var y=0; var xs=0; var ys=0; function run(){ x+=xs; y+=ys ren.style.left=x; ren.style.top=y; } </script> </html>
事件 event window.event 事件对象属性： 1、srcElement 事件源对象 2、keyCode 事件发生时候的键盘码 keypress keydown keyup 3、clientX，clientY 相对于窗口鼠标的x坐标y坐标 4、screenX、screenY 相对于屏幕 5、returnValue 6、cancelBubble 取消冒泡(取消剩下的事件)+
<html>
<head>
</head>
<body>
<div id="one"></div>
</body>
<script>
var one=document.getElementById("one");
window.document.onmousemove=function test(e){//我们将这个代码在IE执行正常，在火符却失效，因为火符不能直接获取event对象，按直接在body标签里面加事件，使用参数获取不到所以用另一种方式绑定事件，但这样在ie里面却出现问题，得到的是undefined
//所以我们使用逻辑控制试试
var ev=e || window.event;//注意，这个e是window处理过的event对象，就是火符得到的参数
var cx=ev.clientX;
var cy=ev.clientY;
var sx=ev.screenX;
var sy=ev.screenY;
var str="clientX="+cx+" clientY="+cy+" screenX="+sx+" screecY="+sy;
one.innerText=str;
window.status=str;//window的状态栏
window.document.title=str;
}
</script>
</html>
<html>
<head>
<!-- 图跟随鼠标移动-->
</head>
<body>
<img id="tu" src="images/srf.jpg" style="position:absolute; left:400; top:200px;" />
</body>
<script>
var tu=document.getElementById("tu");
document.onmousemove=function test(e){
var ev=e || window.event;
tu.style.top=ev.clientY;
tu.style.left=ev.clientX;
}
</script>
</html>
<html>
<!--
拖拽游戏
可以给one里面生成一个x，点击x删除div，我就不做了 -->
<head>
<style type"text/css">
.one{
position:absolute;
200px;
height:40px;
background-color:red;
}
</style>
</head>
<body>
<input type="button" onclick="cre()"/>
<!--<div id="one" style=""></div>-->
</body>
<script>
var one=null;
var dx=0;//点的位置
var dy=0;
var sx=0;//div的位置
var sy=0;
//鼠标按下可以拖动，鼠标松开不能拖动，操作针对的是DIV内容。
var tuodong=false;
function cre(){//我控制它只能产生一个DIV
if(one!=null){
return;
}
one=document.createElement("div");
one.className="one";
one.style.top="100px";
one.style.left="200px";//刚才在下面移动的方法中报参数无效，就是指的是获取的top和left的值无效，在这里给one的style的top等属性赋值保险一点
document.body.appendChild(one);
//因为只有创建了才有one对象赋值，所以，前面这里会报错，要放在cre里面
one.onmousedown=function(e){
var ev=e || window.event;
dx=ev.clientX;
dy=ev.clientY;
sx=parseInt(one.style.left);
sy=parseInt(one.style.top);
if(!tuodong){
tuodong=true;
}
}
document.onmousemove=function(e){
//刚刚的效果不完善，因为鼠标按下移动后，div的top和left会变成鼠标的位置，我们希望的效果是鼠标放在div的某一个位置而不受影响
var ev=e || window.event;
if(tuodong){
//alert(one.style.top);//获取的是空，需要使用这个alert(one.offsetTop);
one.style.top=ev.clientY-(dy-sy);
one.style.left=ev.clientX-(dx-sx);
}
}
}
//var tu=document.getElementById("one");
document.onmouseup=function(e){
if(tuodong){
tuodong=false;
}
}
</script>
</html>
<html>
<head>
</head>
<!--<body oncontextmenu="return show()" onbeforeunload="window.event.returnValue='你小心点'">-->
<body onclick="one()">
<img src="images/srf.jpg" onclick="two()">
<script>
<!-- 去掉文本菜单方法-->
/*1、function show(){
alert("000000");
return false;
}*/
function show(){
alert("oooooo");
window.event.returnValue=false;
}
function one(){
alert("######");
}
function two(){
//我们发现点击图片的话，先执行方法two再执行方法one，只是因为图片也处于body体内，为了避免重复触发事件，可以使用cancelBubble
alert("@@@@@@");
var ev=window.event.cancelBubble=true;
}
</script>
</body>
</html>