1.1 Event 对象
<body> <a id="myAnchor" href="http://www.microsoft.com">访问 Microsoft</a> <input type="button" onclick="changeLink()" value="改变链接"> <script type="text/javascript"> function changeLink() { document.getElementById('myAnchor').innerHTML="访问 W3School" document.getElementById('myAnchor').href="http://www.w3school.com.cn" document.getElementById('myAnchor').target="_blank" } </script> </body>
<body onmousedown="whichButton(event)"> <p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p> <script type="text/javascript"> function whichButton(event) { var btnNum = event.button; if (btnNum==2) { alert("您点击了鼠标右键！") } else if(btnNum==0) { alert("您点击了鼠标左键！") } else if(btnNum==1) { alert("您点击了鼠标中键！"); } else { alert("您点击了" + btnNum+ "号键，我不能确定它的名称。"); } } </script> </body>
<body onmousedown="show_coords(event)"> <p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p> <script type="text/javascript"> function show_coords(event) { x=event.clientX; y=event.clientY; alert("X 坐标: " + x + ", Y 坐标: " + y) } </script> </body>
<body onkeyup="whichButton(event)"> <p><b>注释：</b>在测试这个例子时，要确保右侧的框架获得了焦点。</p> <p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p> <script type="text/javascript"> function whichButton(event) { alert(event.keyCode) } </script> </body>
<body onmousedown="isKeyPressed(event)"> <p>在文档中点击某个位置。消息框会告诉你是否按下了 shift 键。</p> <script type="text/javascript"> function isKeyPressed(event) { if (event.shiftKey==1) { alert("The shift key was pressed!") } else { alert("The shift key was NOT pressed!") } } </script> </body>
<body onmousedown="getEventType(event)"> <p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p> <script type="text/javascript"> function getEventType(event) { alert(event.type); } </script> </body>
<body> <div> <textarea placeholder="输入咨询内容" class="my_msg" onkeydown="isEnter(event)" autofocus></textarea> </div> <script> // 在textarea里按下ctrl+回车，立即调用发送函数 function isEnter(event) { if(event.keyCode==13 && event.ctrlKey){ console.log("enter"); // send_msg(); } } </script> </body>
1.2 Form 和 Input 对象
<body> <form id="myForm" action="/old_path/"> 名称：<input type="text" value="米老鼠" /> <input type="button" onclick="changeAction()" value="改变 action 属性并提交表单" /> </form> <script type="text/javascript"> function changeAction() { var x=document.getElementById("myForm"); alert("Original action: " + x.action); x.action="/newpath/"; alert("New action: " + x.action); x.submit() } </script> </body>
<body> <form id="myForm" method="post"> 名称：<input type="text" value="米老鼠" /> <input type="button" onclick="showMethod()" value="显示 method" /> </form> <script type="text/javascript"> function showMethod() { var x=document.getElementById("myForm") alert(x.method) } </script> </body>
<body> <form> <input type="checkbox" id="myCheck" /> <input type="button" onclick="check()" value="选定复选框" /> <input type="button" onclick="uncheck()" value="取消选定复选框" /> </form> <script type="text/javascript"> function check() { document.getElementById("myCheck").checked=true } function uncheck() { document.getElementById("myCheck").checked=false } </script> </body>
<body> <form id="myForm"> 姓名：<input type="text" size="20"><br /> 年龄：<input type="text" size="20"><br /> <br /> <input type="button" onclick="formReset()" value="重置"> </form> <script type="text/javascript"> function formReset() { document.getElementById("myForm").reset() } </script> </body>
<body> <form id="myForm" action="/login/" method="get"> 名：<input type="text" name="firstname" size="20"><br /> 姓：<input type="text" name="lastname" size="20"><br /> <br /> <input type="button" onclick="formSubmit()" value="提交"> </form> <script type="text/javascript"> function formSubmit(){ document.getElementById("myForm").submit() } </script> </body>
<body> <form action="/login/" onsubmit="return validate()"> 名字（最多 10 个字符）：<input type="text" id="fname" size="20"><br /> 年龄（从 1 到 100）：<input type="text" id="age" size="20"><br /> 电子邮件：<input type="text" id="email" size="20"><br /> <br /> <input type="submit" value="提交"> </form> <script type="text/javascript"> function validate() { var at=document.getElementById("email").value.indexOf("@"); var age=document.getElementById("age").value; var fname=document.getElementById("fname").value; submitOK="true"; if (fname.length>10) { alert("名字必须小于 10 个字符。"); submitOK="false" } if (isNaN(age)||age<1||age>100) { alert("年龄必须是 1 与 100 之间的数字。"); submitOK="false" } if (at==-1) { alert("不是有效的电子邮件地址。"); submitOK="false" } if (submitOK=="false") { return false } } </script> </body>
1.3 Image 对象
<body> <img id="compman" src="/static/aa.png" /> <br /><br /> <input type="button" onclick="changeSize()" value="改变图像的高度和宽度"> <script type="text/javascript"> function changeSize() { document.getElementById("compman").height="270"; document.getElementById("compman").width="164" } </script> </body>
<body> <img id="myImage" src="/static/aa.png" /> <br /><br /> <input type="button" onclick="changeSrc()" value="改变图像"> <script type="text/javascript"> function changeSrc() { document.getElementById("myImage").src="/i/eg_smile.gif" } </script> </body>