Javascript事件处理
来源：互联网 发布：网络硬件工程师 编辑：程序博客网 时间：2024/05/12 20:49
<script type="text/javascript"> //事件 //IE,冒泡型事件，DOM事件流，一次捕获过程一次冒泡过程。 //冒泡事件是从下往上，捕获事件从上往下. //DOM还支持文本节点的捕获 //事件处理函数/监听函数 varoDiv=document.getElementById("div1"); oDiv.onclick=function(){ alert("i was clicked"); }; <div onclick="alert('i am clicked')"></div> //为每个可用事件分配多个事件处理函数 //IE中，attachEnvent(),detachEvent() varfnclick1=function(){alert("clicked")}; vr fnclick2=function(){alert("also clicked")}; varoDiv=document.getElementById("div"); oDiv.attachEvent("onclick",fnClick1); oDiv.attachEvent("onclick",fnClick2); //DOM中，addEventListener(),removeEventListener()这些方法需要三个参数, //事件名称，要分配的函数，true表示用于捕获阶段，false表示用于冒泡阶段 oDiv.addEventListener("onclick",fnclick1,false); oDiv.addEventListener("onclick",fnclick2,false); //事件对象,是window对象的一个属性event oDiv.onclick=function(){ varoEvent=window.event; } oDiv.onclick=function(oEvent){} //属性和方法，在IE和DOM当中 //相似性 //获取事件类型 varsType=oEvent.type; //返回类似"click"或"mouseover"之类的值。 functionhandleEvent(oEvent){ if(oEvent.type=="click") { alert("clicked!"); } elseif(oEvent.type=="mouseover"){ alert("mouse over"); } } oDiv.onclick=handleEvent; oDiv.onmouseover=handleEvent; //在keydown,keyup事件中，可以使用keyCode属性获取按下的按键的数值代码。 variKeyCode=oEvent.keyCode(); //例如Enter键为13，空格键为32，回退键为8. //检测shift,alt,ctrl键是否被按下， varbshift=oEvent.shiftKey; varbAlt=oEvent.altKey; varbCtrl=oEvent.ctrlKey; //获取客户端坐标,客户端区域是显示网页的窗口部分 variClientX=oEvent.clientX; variClientY=oEvent.clientY; //获取屏幕位置 variScreenX=oEvent.screenX; variScreenY=oEvent.screenY; ////////////////////////////////////////// //区别 //获取目标 //位于事件中心的对象称为目标 varoTarget=oEvent.srcElement;//IE varoTarget=oEvent.target;//DOM //获取字符代码 variCharCode=oEvent.keyCode;//IE variCharCode=oEvent.charCode;//DOM //然后可以用这个值来获取实际的值 varsChar=string.fromCharCode(oEvent.charCode); //如果不确定按下的键当中是否包含字符，可以使用isChar属性进行判断 if(oEvent.isChar){ variCharcode=oEvent.charCode; } //3.阻止某个事件的默认行为 //在用户右键点击页面时，阻止他使用上下文菜单. document.body.oncontextmenu=function(oEvent){ if(isIE){ oEvent=window.event; oEvent.returnValue=false; } else{ oEvent.preventDefault(); } } //停止事件复制 oEvent.cancelBubble=true;//IE oEvent.stopPropagation();//mozilla ///////////////////////////////////////////////// //事件的类型 //鼠标事件，键盘事件，HTML事件，突变事件。 //鼠标事件:click,dbclick,mousedown,mouseout,mouseover,mouseup,mousemove <html><head> <script type="text/javascript"> //打印出鼠标事件的各个类型 functionhandleEvent(oEvent){ varoTextbox=document.getElementById("txt1"); oTextbox.value+="\n"+oEvent.type; } </script></head><body> <p>your mouse to click and double click the red square.</p> <div style="width:100px;height:100px;background-color:red"onmouseover="handleEvent(event)" onmouseout="handleEvent(event) onmousedown="handleEvent(event)" onmouseup="handleEvent(event)" onclick="handleEvent(event)" ondbclick="handleEvent(event)" id="div1"></div> <p><textarea id="txt1" rows="15" cols="50"></textarea></p> </body></html>//一个很流行的改变图片的.<img src="image1.jpg" onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'">//事件的属性：坐标属性(clientX,clientY)，type属性，target或srcElement属性，shiftKey,ctrlKey,altKey,button属性 function handleEvent(oEvent){ var oTextbox=document.getElementById("txt1"); oTextbox.value+="\n"+oEvent.type; oTextbox.value+="\n target is"+(oEvent.target||oEvent.srcElement).id; oTextbox.value+="\n at("+oEvent.clientX+","+oEvent.clientY+") on the client"; oTextbox.value+="\n at("+oEvent.screenX+","+oEvent.screenY+") on the screen"; oTextbox.value+="\n button down is"+oEvent.button; var arrKeys=[]; if(oEvent.shiftKey) arrKeys.push("shift"); if(oEvent.ctrlKey) arrKeys.push("ctrl"); if(oEvent.altKey) arrKeys.push("alt"); oTextbox.value+="\n keys down are"+arrKeys; }//要触发dbclick事件，在同一个目标上要顺序发生以下事件：//mousedown,mouseup,click,mousedown,mouseup.click,dbclick.////////////////////////////键盘事件:keydown,keypress,keyup//事件属性:keyCode属性,charCode属性(DOM),target或srcElement,shiftKey,ctrlKey,altKey,<html><head> <script type="text/javascript"> //打印出键盘标鼠事件的各个类型 function handleEvent(oEvent){ var oTextbox=document.getElementById("txt1"); oTextbox.value+="\n"+oEvent.type; oTextbox.value+="\n target is"+(oEvent.target||oEvent.srcElement).id; oTextbox.value+="\n keycode is "+oEvent.keyCode; oTextbox.value+="\n charcode is "+oEvent.charCode; var arrKeys=[]; if(oEvent.shiftKey) arrKeys.push("shift"); if(oEvent.ctrlKey) arrKeys.push("ctrl"); if(oEvent.altKey) arrKeys.push("alt"); oTextbox.value+="\n keys down are"+arrKeys; } </script></head><body> <p>your mouse to click and double click the red square.</p> <p><textarea id="txtInput" rows="15" cols="50" onkeydown="handleEvent(event)" onkeyup="handleEvent(event)"onkeypress="handleEvent(event)"></textarea></p> <p><textarea id="txt1" rows="15" cols="50" ></textarea></p></body></html>//用户按一次字符按键时，会按以下顺序发生：keydown,keypress,keyup//HTML事件//load事件，页面完全载入后，在window对象上触发。img完全载入后在其上触发.//unload事件，页面完全卸载后，在window对象上触发.//error事件,javascript脚本出错时，在window对象上触发。img指定图像无法载入时，在其上触发.//resize事件，scroll事件，focus事件，blur事件。window.onload=function(){ alert(loaded); } //与load和unload事件类似，resize事件的处理函数必须使用javascript代码分配给window对象或者HTML中分配给body元素.<body onresize="alert('resizing')">//scroll事件,希望用户在卷动窗口时，确保某些内容一直在屏幕上可见.//可与body元素的属性协用,scrollLeft,保存窗口在水平方向上卷动的距离，以及scrollTop，保存窗口在垂直方向上卷动的距离window.onscroll=function(){ var oWatermark=document.getElementById("divWatermark"); oWatermark.style.top=document.body.scrollTop; } </script> 0 0
- javascript 事件和事件处理
- JavaScript 事件与事件处理
- JavaScript中的事件处理
- JavaScript中的事件处理
- javascript事件处理
- javascript 事件处理
- JavaScript中的事件处理
- JavaScript中的事件处理
- JavaScript处理回车键事件
- javascript 中的事件处理
- javascript中的事件处理
- javascript 处理冒泡事件
- JavaScript 事件处理
- javascript事件处理
- javascript学习-事件处理
- JavaScript事件处理
- javascript 事件处理1
- 3. JavaScript事件处理
- 最原始的ajax无刷新分页
- 玻尔兹曼机(1)
- 使用IDEA导出可运行的jar包，包含引用第三方jar包
- 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误
- 感谢python和pandas让我找回了刚学编程的时候的感觉
- Javascript事件处理
- ubuntu Hadoop启动报Error: JAVA_HOME is not set and could not be found解决办法
- XFire创建WebService实例
- Aqua - Mac OS X平台的用户界面（user interface）
- Linux下配置部署web环境（centos+tomcat）
- UVA10250 - The Other Two Trees
- 【收集】 一些好用的工具类网站
- 黑客与画家 读后感
- 路径规划总结 I
