dom笔记1_控件的常用事件

最新推荐文章于 2022-08-05 15:15:21 发布

原创最新推荐文章于 2022-08-05 15:15:21 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #table #button #浏览器 #ie

本文详细介绍了网页开发中常见的控件事件，包括鼠标移动事件onmousemove、焦点获取/失去事件onfocus/onblur以及鼠标悬停/离开事件onmouseover/onmouseout，并提供了具体的案例实现，如跟随鼠标移动的图片、搜索文本框提示及评分控件交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控件的常用事件：

onclick、onmousemove、onfocus/onblur、onmouseover/onmouseout

1.onmousemove事件
层的定位：
元素的position样式值：
static（无定位，显示在默认位置）、absolute（绝对定位）、
fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持）、
relative（相对元素默认位置的定位）
如果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top（上边缘距离）、left（左边缘距离）两个样式值。
案例：跟着鼠标飞的图片。（鼠标移动的事件是onmousemove，通过window.event的clientX、clientY属性获得鼠标的位置）

<html>
<head>
<title>跟随鼠标移动的图片</title>
<script type="text/javascript">
  document.onmousemove=function(){
   var x=window.event.clientX;
   var y=window.event.clientY;
   var divMove=document.getELementById("divMove");
   if(!divMove){
    return;
   }
   divMove.style.left=x;
   divMove.style.top=y;
  }
</script>
</head>

<body>

</body>
</html>

2.onfocus/onblur事件
案例：（搜索文本框）

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
  function textfocus(text){
   if(text.value=="请输入搜索关键字"){
    text.value="";
    text.style.color="black";
   }
  }

  function textblur(text){
   if(text.value==""){
    text.style.color="gray";
    text.value="请输入搜索关键字";
   }
  }
</script>
</head>

<body>

</body>
</html>

3.onmouseover/onmouseout事件
案例：（评分控件）

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
  function indexOf(arry,element){
   for(var i=0;i<arry.length;i++){
    if(arry[i]==element){
     return i;
    }
   }
   return -1;
  }
  function initEvent(){
   var table=document.getElementById("tab")
   var tds=table.getElementsByTagName("td");
   for(var i=0;i<tds.length;i++){
    var td=tds[i];
    td.style.cursor="pointer";
    td.onmouseover=tdMouseover;
    td.onmouseout=tdMouseout;
    //td.onclick=tdClick;
   }
  }
  function tdMouseover(){
   var table=document.getElementById("tab")
   var tds=table.getElementsByTagName("td");
   var index=indexOf(tds,this);
   for(var i=0;i<=index;i++){
    tds[i].innerText="★";
   }
   for(var i=index+1;i<tds.length;i++){
    tds[i].innerText="☆";
   }
  }
  function tdMouseout(){
   var table=document.getElementById("tab")
   var tds=table.getElementsByTagName("td");
   var index=indexOf(tds,this);
   for(var i=0;i<=index;i++){
    tds[i].innerText="☆";
   }
  }
  //function tdClick(){
   //var table=document.getElementById("tab")
   //var tds=table.getElementsByTagName("td");
   //var index=indexOf(tds,this);
   //for(var i=0;i<=index;i++){
    //tds[i].innerText="★";
   //}
   //for(var i=index+1;i<tds.length;i++){
    //tds[i].innerText="☆";
   //}
  //}
</script>
</head>