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>
更改一个链接的文本、URL 以及 target
<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>
被按的按键的 unicode 是？
<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>
shift 键被按了吗？
<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>
ctrl+回车，立即调用发送函数
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>
更改表单的 action 属性
<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>
获取提交数据方式：post、get等
<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>
选定以及不选定 checkbox
<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>
更改图像的 src