常见事件

来源：互联网发布：腾讯社会工程数据库编辑：程序博客网时间：2024/05/17 05:13

事件

1 事件的概念事件源事件名事件注册事件处理2 常用事件鼠标常用事件：1） click 单击事件<body><pid="p1"onclick="fun()">asdad</p></body><scripttype="application/javascript">function fun(){ var p1=document.getElementById("p1"); p1.innerText="我被单击了";}</script>在这个案例中，事件源就是Id的元素，事件名是单击，事件注册时onclick="fun()"，也就是说当单击ID是就交由fun函数类处理双击事件<styletype="text/css"> #div1{ width: 100px; height: 100px; background-color: #EEC077; }</style></head><body><divid="div1"onclick="zoomout()"ondblclick="zoomin()"></div></body><scripttype="application/javascript">function zoomout(){ var div1=document.getElementById("div1"); div1.style.width="200px"; div1.style.height="200px";}function zoomin(){ var div1=document.getElementById("div1"); div1.style.width="100px"; div1.style.height="100px";}</script>2）鼠标按下/弹起<divid="div1"onmousedown="zoomout()"ondblclick="zoomin()">3）鼠标移入/离开4）鼠标移动 onmousemove键盘事件1） keypress<inputid="what"type="text"onkeypress="press(event)"/></body><scripttype="application/javascript"> function press(e){ if(e.keyCode==13){ var what=document.getElementById("what"); alert(what.value); } }Keypress属性记录了按下的键的编码。Keypress 事件只能捕获可打印字符的按键，不能捕获诸如shift、ctrl等不可打印字符的按键但是可以通过shiftkey、stelkey等属性判断在击键的同时是否按下了shift、ctrl等辅助键2） keydown、keyup<body><inputid="what"type="text"onkeydown="press(event)"/></body><scripttype="application/javascript"> function press(e){alert(e.keyCode); /* if(e.shiftKey){ alert("shift键") }*/ }keydown、keyup 可以捕获键盘上所有键（个别除外）。<styletype="text/css"> #img1{ position: absolute; top: 0px; left: 0px; } </style></head><bodyonkeydown="move(event)"><imgid="img1"src="man.png"/></body><scripttype="application/javascript"> var top1 = 0; var left = 0; function move(e){ switch (e.keyCode){ case 37: left-=5; break; case 38: top1-=5; break; case 39: left+=5; break; case 40: top1+=5; break; } var img1=document.getElementById("img1"); img1.style.top= top1+"px"; img1.style.left= left+"px";总结：1）使用变量top导致上下移动失败，原因是和window.top这个全局变量冲突了，换个变量名就好啦2）如果把变量top1和left移动函数中，发现只能移动5像素。原因是函数内部的局部变量在每次调用函数是都会重新创建并初始化，也就是说每一次调用left和top1的值都是0；不会保留上一次的值。如果保留就只能全局变量了。其他的事件：Onload：页面加载事件Onfocus：获得焦点的事件Onblur：失去焦点事件Onchange：值改变事件3 事件的注册三种方法：1）使用onXXX属性，比如onchange="change1()。2）通过js去设置元素的onXXX属性。3）通过addEveentlist事件监听器。后两者方法有何好处？将页面的内容、样式和行为分离，内容和样式可能是。美工人员去完成，行为（实际上就是js的内容）往往是程序员的事。第三种方式addEventListener的第一个参数事件名，第二个参数是事件处理函数。可以添加事件监听，当然也就可以移除。RemoveEventListener 而且通过addEveentlist RemoveEventListener甚至我们可以去动态地注册不同的事件处理程序。4 捕获与冒泡<styletype="text/css"> #div1{ width: 200px; height: 200px; background-color: #EEC077; }</style></head><body><divid="div1"><pid="p1">捕获和冒泡</p></div></body><scripttype="application/javascript">var div1=document.getElementById("div1");var p1=document.getElementById("p1"); p1.addEventListener("click",click1); div1.addEventListener("click",click2); function click1(){ alert("段落被单击了"); } function click2(){ alert("div被单击了"); }</script>这个案例中，如果单击文字，先提示“段落被单击”，然后在提示“div”被单击。因为div是段落的父容器，所以单击段落也就是单击了div，所以两者都会触发事件。但是如何去规定两个事件的处理顺序？这就是事件的冒泡的捕获。冒泡：按照从内到外的顺序依次触发；默认方式捕获：反之

阅读全文

0 0