js学习之Event对象和Form对象以及Input对象

[color=cyan][size=x-large]Event对象
[/size][/color]

[b][color=blue]光标的位置[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>



[b][color=blue]哪个鼠标按钮被点击[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>



[b][color=blue]按键的unicode[/color][/b][b][color=orange]代码来自w3school
[/color][/b]
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}

</script>
</head>

<body onkeyup="whichButton(event)">
<p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>
</body>

</html>


[b][color=blue]相对于屏幕的x和y坐标[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>


[b][color=blue]shift键是否按了[/color][/b][b][color=orange]代码来自w3school
[/color][/b]
<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=blue]哪个元素被点击了[/color][/b][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>

[b][color=red]ps:target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。[/color][/b]

[color=blue][b]哪类时间被触发了[/b][/color][color=orange][b]代码来自w3school[/b][/color]

<html>
<head>
<script type="text/javascript">
function getEventType(event)
{
alert(event.type);
}
</script>
</head>

<body onmousedown="getEventType(event)">

<p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p>

</body>
</html>


[b][color=red]ps:因为一直是点击 所以一直显示mousedown事件[/color][/b]

[color=cyan][size=x-large]Form和Input对象
[/size][/color]

[color=blue][b]更改form的action地址[/b][/color][color=orange][b]代码来自w3school[/b][/color]

<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>


[color=blue][b]返回向服务器发送数据的方法[/b][/color][color=orange][b]代码来自w3school[/b][/color]

<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>


[color=blue][b]显示按钮的id和类型以及按钮的禁用[/b][/color][color=orange][b]代码来自w3school[/b][/color]

<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>



[color=blue][b]选定以及取消选中checkbox[/b][/color][color=orange][b]代码来自w3school[/b][/color]

<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>



[color=blue][b]一个表单中的若干个checkbox[/b][/color][color=orange][b]代码来自w3school[/b][/color]

<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>



[color=blue][b]checkbox把文本转换成大写[/b][/color][color=orange][b]代码来自w3school[/b][/color]

<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>



[color=blue][b]单选按钮的value属性[/b][/color][color=orange][b]代码来自w3school[/b][/color]

<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>


[color=blue][b]重置表单[/b][/color][color=orange][b]代码来自w3school[/b][/color]
<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>


[color=blue][b]提交表单[/b][/color][color=orange][b]代码来自w3school[/b][/color]

<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>


[color=blue][b]验证表单[/b][/color][color=orange][b]代码来自w3school[/b][/color]

<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>


[color=blue][b]验证表单[/b][/color][color=orange][b]代码来自w3school[/b][/color]
<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>


[color=blue][b]设置和移开文本域上的焦点[/b][/color][color=orange][b]代码来自w3school[/b][/color]

<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>


[color=blue][b]选取文本域的内容[/b][/color][color=orange][b]代码来自w3school[/b][/color]
<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>


[color=blue][b]表单中的下拉列表[/b][/color][color=orange][b]代码来自w3school[/b][/color]
<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>


[color=blue][b]另一个下拉列表[/b][/color][color=orange][b]代码来自w3school[/b][/color]
<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>


[color=blue][b]当达到文本域的最大值的时候跳到另一个域[/b][/color][color=orange][b]代码来自w3school[/b][/color]

<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>


[color=blue][b]若干表单域添加快捷键[/b][/color][color=orange][b]代码来自w3school[/b][/color]
<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>

[color=red][b]
ps:这个快捷键最容易与浏览器的快捷键重复而导致失效,至少我在Firefox上没效果[/b][/color]

今天就学这么多,明天如果没啥事,在看下后面的对象!要做事了!分配新任务了
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值