js学习之Event对象和Form对象以及Input对象
Event对象
光标的位置 代码来自w3school
哪个鼠标按钮被点击 代码来自w3school
按键的unicode 代码来自w3school
相对于屏幕的x和y坐标 代码来自w3school
shift键是否按了 代码来自w3school
哪个元素被点击了[b][color=orange]代码来自w3school
ps:target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
哪类时间被触发了 代码来自w3school
ps:因为一直是点击 所以一直显示mousedown事件
Form和Input对象
更改form的action地址 代码来自w3school
返回向服务器发送数据的方法 代码来自w3school
显示按钮的id和类型以及按钮的禁用 代码来自w3school
选定以及取消选中checkbox 代码来自w3school
一个表单中的若干个checkbox 代码来自w3school
checkbox把文本转换成大写 代码来自w3school
单选按钮的value属性 代码来自w3school
重置表单 代码来自w3school
提交表单 代码来自w3school
验证表单 代码来自w3school
验证表单 代码来自w3school
设置和移开文本域上的焦点 代码来自w3school
选取文本域的内容 代码来自w3school
表单中的下拉列表 代码来自w3school
另一个下拉列表 代码来自w3school
当达到文本域的最大值的时候跳到另一个域 代码来自w3school
若干表单域添加快捷键 代码来自w3school
ps:这个快捷键最容易与浏览器的快捷键重复而导致失效,至少我在Firefox上没效果
今天就学这么多,明天如果没啥事,在看下后面的对象!要做事了!分配新任务了
光标的位置 代码来自w3school
<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标</p>
</body>
</html>
哪个鼠标按钮被点击 代码来自w3school
<html>
<head>
<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>
</head>
<body onmousedown="whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键</p>
</body>
</html>
按键的unicode 代码来自w3school
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>
</body>
</html>
相对于屏幕的x和y坐标 代码来自w3school
<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。
</p>
</body>
</html>
shift键是否按了 代码来自w3school
<html>
<head>
<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>
</head>
<body onmousedown="isKeyPressed(event)">
<p>在文档中点击某个位置。消息框会告诉你是否按下了 shift 键。</p>
</body>
</html>
哪个元素被点击了[b][color=orange]代码来自w3school
<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) {
var e = window.event
alert("e:"+e)
}
if (e.target) {
targ = e.target
alert("target:"+targ)
}else if (e.srcElement) {
targ = e.srcElement
alert("targ:"+targ)
}
if (targ.nodeType == 3) {
// defeat Safari bug
targ = targ.parentNode
alert("targeD"+targ)
}
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>
<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" />
</body>
</html>
ps:target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
哪类时间被触发了 代码来自w3school
<html>
<head>
<script type="text/javascript">
function getEventType(event)
{
alert(event.type);
}
</script>
</head>
<body onmousedown="getEventType(event)">
<p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p>
</body>
</html>
ps:因为一直是点击 所以一直显示mousedown事件
Form和Input对象
更改form的action地址 代码来自w3school
<html>
<head>
<script type="text/javascript">
function changeAction()
{
var x=document.getElementById("myForm")
alert("Original action: " + x.action)
x.action="/htmldom/index.asp"
alert("New action: " + x.action)
x.submit()
}
</script>
</head>
<body>
<form id="myForm" action="/i/eg_smile.gif">
名称：<input type="text" value="米老鼠" />
<input type="button" onclick="changeAction()"
value="改变 action 属性并提交表单" />
</form>
</body>
</html>
返回向服务器发送数据的方法 代码来自w3school
<html>
<head>
<script type="text/javascript">
function showMethod()
{
var x=document.getElementById("myForm")
alert(x.method)
}
</script>
</head>
<body>
<form id="myForm" method="post">
名称：<input type="text" value="米老鼠" />
<input type="button" onclick="showMethod()" value="显示 method" />
</form>
</body>
</html>
显示按钮的id和类型以及按钮的禁用 代码来自w3school
<html>
<head>
<script type="text/javascript">
function alertId()
{
var txt="Id: " + document.getElementById("myButton").id
txt=txt + ", type: " + document.getElementById("myButton").type
alert(txt)
document.getElementById("myButton").disabled=true
}
</script>
</head>
<body>
<form>
<button id="myButton" onClick="alertId()">请点击我！</button>
</form>
</body>
</html>
选定以及取消选中checkbox 代码来自w3school
<html>
<head>
<script type="text/javascript">
function check()
{
document.getElementById("myCheck").checked=true
}
function uncheck()
{
document.getElementById("myCheck").checked=false
}
</script>
</head>
<body>
<form>
<input type="checkbox" id="myCheck" />
<input type="button" onclick="check()" value="选定复选框" />
<input type="button" onclick="uncheck()" value="取消选定复选框" />
</form>
</body>
</html>
一个表单中的若干个checkbox 代码来自w3school
<html>
<head>
<script type="text/javascript">
function createOrder()
{
coffee=document.forms[0].coffee
txt=""
for (i=0;i<coffee.length;++ i)
{
if (coffee[i].checked)
{
txt=txt + coffee[i].value + " "
}
}
document.getElementById("order").value="您订购的咖啡带有： " + txt
}
</script>
</head>
<body>
<p>你喜欢怎么喝咖啡？</p>
<form>
<input type="checkbox" name="coffee" value="奶油">加奶油<br />
<input type="checkbox" name="coffee" value="糖块">加糖块<br />
<br />
<input type="button" onclick="createOrder()" value="发送订单">
<br /><br />
<input type="text" id="order" size="50">
</form>
</body>
</html>
checkbox把文本转换成大写 代码来自w3school
<html>
<head>
<script type="text/javascript">
function convertToUcase()
{
document.getElementById("fname").value=document.getElementById("fname").value.toUpperCase()
document.getElementById("lname").value=document.getElementById("lname").value.toUpperCase()
}
</script>
</head>
<body>
<form name="form1">
名：<input type="text" id="fname" size="20" />
<br /><br />
姓：<input type="text" id="lname" size="20" />
<br /><br />
转换为大写
<input type="checkBox" onclick="if (this.checked) {convertToUcase()}">
</form>
</body>
</html>
单选按钮的value属性 代码来自w3school
<html>
<head>
<script type="text/javascript">
function check(browser)
{
document.getElementById("answer").value=browser
}
</script>
</head>
<body>
<p>您喜欢哪款浏览器？</p>
<form>
<input type="radio" name="browser" onclick="check(this.value)" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Firefox">Firefox<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Netscape">Netscape<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Opera">Opera<br />
<br />
您喜欢的浏览器是：<input type="text" id="answer" size="20">
</form>
</body>
</html>
重置表单 代码来自w3school
<html>
<head>
<script type="text/javascript">
function formReset()
{
document.getElementById("myForm").reset()
}
</script>
</head>
<body>
<p>在下面的文本框中输入一些文本，然后点击重置按钮就可以重置表单。</p>
<form id="myForm">
姓名：<input type="text" size="20"><br />
年龄：<input type="text" size="20"><br />
<br />
<input type="button" onclick="formReset()" value="重置">
</form>
</body>
</html>
提交表单 代码来自w3school
<html>
<head>
<script type="text/javascript">
function formSubmit()
{
document.getElementById("myForm").submit()
}
</script>
</head>
<body>
<p>在下面的文本框中输入一些文本，然后点击提交按钮就可以提交表单。</p>
<form id="myForm" action="/i/eg_smile.gif" 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>
</body>
</html>
验证表单 代码来自w3school
<html>
<head>
<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>
</head>
<body>
<form action="/example/hdom/hdom_submitpage.html" 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>
</body>
</html>
验证表单 代码来自w3school
<html>
<head>
<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>
</head>
<body>
<form action="/example/hdom/hdom_submitpage.html" 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>
</body>
</html>
设置和移开文本域上的焦点 代码来自w3school
<html>
<head>
<script type="text/javascript">
function setFocus()
{
document.getElementById('text1').focus()
}
function loseFocus()
{
document.getElementById('text1').blur()
}
</script>
</head>
<body>
<form>
<input type="text" id="text1" />
<br />
<input type="button" onclick="setFocus()" value="设置焦点" />
<input type="button" onclick="loseFocus()" value="失去焦点" />
</form>
</body>
</html>
选取文本域的内容 代码来自w3school
<html>
<head>
<script type="text/javascript">
function selText()
{
document.getElementById("myText").select()
}
</script>
</head>
<body>
<form>
<input size="25" type="text" id="myText" value="选定我吧！">
<input type="button" value="选择文本" onclick="selText()">
</form>
</body>
</html>
表单中的下拉列表 代码来自w3school
<html>
<head>
<script type="text/javascript">
function favBrowser()
{
var mylist=document.getElementById("myList")
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text
}
</script>
</head>
<body>
<form>
请选择您喜欢的浏览器：
<select id="myList" onchange="favBrowser()">
<option>Internet Explorer</option>
<option>Netscape</option>
<option>Opera</option>
</select>
<p>您喜欢的浏览器是：<input type="text" id="favorite" size="20"></p>
</form>
</body>
</html>
另一个下拉列表 代码来自w3school
<html>
<head>
<script type="text/javascript">
function moveNumbers()
{
var no=document.getElementById("no")
var option=no.options[no.selectedIndex].text
var txt=document.getElementById("result").value
txt=option
document.getElementById("result").value=txt
}
</script>
</head>
<body>
<form>
请选择数字：<br />
<select id="no">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<input type="button" onclick="moveNumbers()" value="-->">
<input type="text" id="result" size="20">
</form>
</body>
</html>
当达到文本域的最大值的时候跳到另一个域 代码来自w3school
<html>
<head>
<script type="text/javascript">
function checkLen(x,y)
{
if (y.length==x.maxLength)
{
var next=x.tabIndex
if (next<document.getElementById("myForm").length)
{
document.getElementById("myForm").elements[next].focus()
}
}
}
</script>
</head>
<body>
<p>这段脚本在达到文本框的最大长度时跳到下一个文本框：</p>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)">
</form>
</body>
</html>
若干表单域添加快捷键 代码来自w3school
<html>
<head>
<script type="text/javascript">
function access()
{
document.getElementById('myName').accessKey="n"
document.getElementById('myPwd').accessKey="p"
document.getElementById('ie').accessKey="i"
document.getElementById('fx').accessKey="f"
document.getElementById('myButton').accessKey="b"
}
</script>
</head>
<body onload="access()">
<form>
姓名：<input id="myName" type="text" />
<br />
密码：<input id="myPwd" type="password" />
<br /><br />
选择您喜欢的浏览器：
<br />
<input type="radio" name="browser" id="ie" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" id="fx" value="Firefox">Firefox
<br /><br />
<input type="button" value="点击我！" id="myButton" />
</form>
<p>（请使用 Alt + <i>accesskey</i> 为不同的表单字段赋予焦点。）
</p>
</body>
</html>
ps:这个快捷键最容易与浏览器的快捷键重复而导致失效,至少我在Firefox上没效果
今天就学这么多,明天如果没啥事,在看下后面的对象!要做事了!分配新任务了