javascript事件笔记

原创 PHP笔记  2017-03-31 17:52  阅读 937 views 次

html网页中的每个元素都可以产生某些事件触发js函数执行。比如,用户点击button按钮触发onclick事件,从而执行触发函数改变html网页内容。

常见的html事件

  • onclick:点击事件,用户点击html元素时发生;
  • onchange :html元素改变时发生;
  • onmouseover:用户在一个html元素上移动鼠标时发生;
  • onmouseout:用户从一个html元素上移开鼠标时发生;
  • onkeydown:用户按下键盘按键时发生;
  • onload:浏览器已完成页面的加载时发生;
    ......

1、onclick事件

实例:

......
<body>
<script type="text/javascript">
var bgc=new Array("#DB7093","#CDC8B1","#B23AEE","#8B6969","#EE2C2C");
var j=0;
function changeColor(){
var i=document.getElementById("a");
i.style.background=bgc[j];
j++;
if(j==5){j=0;}
}
</script>

<div id="a" style="width:400px;height:200px;background:#F0F8FF;" onclick="changeColor()"><font size="7">点击换颜色</font></div>
</body>
......

运行结果:

 

2、onchange 事件

实例:

......
<body align="center">
<script type="text/javascript">
var i=document.getElementsByTagName("input");
function chg1(){
i[1].value=i[0].value;
}
function chg2(){
i[0].value=i[1].value;
}
</script>
<h3>文本框的内容保持一致</h3>
<input type="text" onchange="chg1()"></input><br/><br/>
<input type="text" onchange="chg2()"></input>
</body>
......

运行结果:

3、onmouseover和onmouseout事件

实例:

......
<body>
<script type="text/javascript">
var i=document.getElementsByTagName("font");
function inside(){
i[0].innerHTML="我回来了!";
i[0].size="7";
}
function out(){
i[0].innerHTML="我走了!";
i[0].size="5";
}
</script>
<h3 align="center">请移动鼠标测试</h3>
<div style="width:300px;height:200px;border:2px solid red;margin:auto;" onmouseover="inside()" onmouseout="out()">
<font size="5">你猜我在哪?</font>
</div>
......

运行结果:

本文地址:https://www.ggbiji.com/js-event.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情