当前位置:Gxlcms > JavaScript > javascript简单事件处理和with用法介绍

javascript简单事件处理和with用法介绍

时间:2021-07-01 10:21:17 帮助过:12人阅读

这一期介绍一些简单的事件处理:
1.鼠标点击
代码如下:
  1. <br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <br><html> <br><head> <br><title> New Document </title> <br><meta name="Generator" content="EditPlus"> <br><meta name="Author" content=""> <br><meta name="Keywords" content=""> <br><meta name="Description" content=""> <br><br><script type="text/javascript"> <br>function click1(obj) <br>{ <br>alert(obj.innerHTML); <br>} <br></script> <br></head> <br><br><body> <br><div onclick="click1(this)" style="cursor:pointer">点击我吧</div> <br></body> <br></html> <br> <br>this即div的上下文,点击后会弹出<div>之间的内容。 <br><strong>2.鼠标移动</strong> <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <br><html> <br><head> <br><title> New Document </title> <br><meta name="Generator" content="EditPlus"> <br><meta name="Author" content=""> <br><meta name="Keywords" content=""> <br><meta name="Description" content=""> <br><br><script type="text/javascript"> <br>function mouse1(obj) <br>{ <br>obj.style.color = "#f00"; <br>obj.style.fontSize = "18px" <br>} <br>function mouse2(obj) <br>{ <br>obj.style.color = "#000"; <br>obj.style.fontSize = "16px" <br>} <br></script> <br></head> <br><br><body> <br><div onmouseover="mouse1(this)" onmouseout="mouse2(this)">移动到这儿</div> <br></body> <br></html> <br> <br>onmouseover鼠标放到那儿时,会把字体变大,字体成为红色,离开时字体和颜色恢复。 <br><strong>3.with用法</strong> <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <br><html> <br><head> <br><title> New Document </title> <br><meta name="Generator" content="EditPlus"> <br><meta name="Author" content=""> <br><meta name="Keywords" content=""> <br><meta name="Description" content=""> <br><br><script type="text/javascript"> <br>with(document) <br>{ <br>write("niujiabin"+"<br/>"); <br>write("maybe"+"<br/>"); <br>write("gossip"+"<br/>"); <br>} <br></script> <br></head> <br><body> <br></body> <br></html> <br> <br><strong>效果与如下相同</strong> <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <br><html> <br><head> <br><title> New Document </title> <br><meta name="Generator" content="EditPlus"> <br><meta name="Author" content=""> <br><meta name="Keywords" content=""> <br><meta name="Description" content=""> <br><br><script type="text/javascript"> <br>document.write("niujiabin"+"<br/>"); <br>document.write("maybe"+"<br/>"); <br>document.write("gossip"+"<br/>"); <br></script> <br></head> <br><body> <br></body> <br></html> <br></li><li> </li><li> </li></ol></pre></li></ol></pre></li></ol></pre>

人气教程排行