x;
初始文本框内容为空,当在文本框输入内容后回车、或者鼠标离开文本框时,段落p的内容同时修改为在文本框中输入的值
4.onmouseover、onmouseout、onmouseleave事件,鼠标移至、移出、离开元素时触发
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:red;width:150px;height:20px;padding:20px;">mouse test</div>
<script>
function mOver(obj){obj.innerHTML="mouse over me"}
function mOut(obj){obj.innerHTML="mouse out me"}
</script>
初始显示如下,当鼠标移至红色框上面,内容变为mouse over me,当鼠标移出时内容变为mouse out me
5.onmousedown和onmouseup事件
点击鼠标时触发onmousedown事件,释放鼠标按钮时触发onmouseup事件,整个过程触发onclick事件
<button onmousedown='mousedown()' onmouseup='mouseup()' onclick='mouseclick()' >点我</button>
<script>
function mousedown(){document.getElementById('p1').innerHTML=Date()}
function mouseup(){document.getElementById('p2').innerHTML=Date()}
function mouseclick(){document.getElementById("p3").innerHTML=Date()}
</script>
<p id='p1'>p1</p>
<p id='p2'>p2</p>
<p id='p3'>p3</p>
点击鼠标稍后松开,可看见时间的不同。
6.onfocus事件,当输入框获得焦点时触发,onblur失去焦点时触发
输入你的名字: <input type="text" onfocus="myFunction(this)">
<script>
function myFunction(x){x.style.background="gray";}
</script>
当鼠标定在文本框时,文本框背景变为灰色
7.onselect事件,被选中时触发
8.onsubmit事件,确认按钮被点击时触发
submit按钮被点击时会触发onsubmit事件,即使不绑定onsubmit事件也会默认向后台传递参数,onsubmit事件应该被绑定到form表单上而不是submit按钮上。
在form的事件中,提交参数这一步是最后进行的,可在提交之前通过onsubmit事件进行验证,返回false则停止向后台传递参数。
<form id="form" onsubmit="mySubmit()">
<input type="text" name="text">
<input type="submit" value="提交">
</form>
<script>
function mySubmit() {alert('hello');}
</script>
最初打开页面如下
在输入框输入123456,点击提交按钮,弹出提示框
点击提示框的确认,输入框内容被清空,并和输入框的name即text组成键值对被传递给后台url
组织form表单向后台传递参数,有两种方式
①onsubmit事件返回false;②使用event事件。这两种情况下,在文本框输入内容并点击提交后,不会将text和输入的值组成键值对传递给url,也不会清空输入框。
<form action="" id="form">
<input type="text" name="text">
<input type="submit" value="提交">
</form>
<script>
var ele=document.getElementById('form');
ele.onsubmit=function(){
return false;}
</script>
<form action="" id="form">
<input type="text" name="text">
<input type="submit" value="提交">
</form>
<script>
var ele=document.getElementById('form');
ele.onsubmit=function(e){
e.preventDefault();}
</script>
9.计时事件,window.setInterval()和window.setTimeout(),前面的window都可以省略
setInterval("javascript function",milliseconds):间隔指定的毫秒数不停地执行指定函数
clearInterval(var),停止上述setInterval()方法,要使用clearInterval(),需要在创建计时方法时创建一个全局变量,并将该变量传入给clearInterval()方法
<p id="demo"></p>
<input type="button" value='停止' onclick="myClick()">
</body>
<script>
function myTime(){
var date =new Date();
var time=date.toLocaleTimeString();
document.getElementById('demo').innerHTML=time;}
var t=setInterval(function(){myTime()},1000) //创建计时事件,每1s中执行一次,并赋值给全局变量
//var t=setInterval(myTime,1000) ,简写方式
function myClick()
{clearInterval(t)} //停止计时
</script>