js ondocumentready onmouseover onclick onmouseout 样式

  这两天接触了onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看它们终究还有神马奇怪的特性,是好还是坏呢?

  今天简单的讲解下onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看它们终究还有神马奇怪的特性,是好还是坏呢?

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML
元素上方或移出元素时触发函数。

<PUBLIC:ATTACH EVENT=”ondocumentready” ONEVENT=”doInit()” />
<PUBLIC:ATTACH EVENT=”onmouseover” ONEVENT=”doMouseover()” />
<PUBLIC:ATTACH EVENT=”onclick” ONEVENT=”doClick()” />
<PUBLIC:ATTACH EVENT=”onmouseout” ONEVENT=”doMouseout()” />

ie下支持css的js ff等支持:hover 就这样了 觉得好的就顶起来 

  首先实现一个盒子:

  首先实现一个盒子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js test</title>
</head>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
    obj.innerHTML="Thank You"
}
function mOut(obj){
    obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

<PUBLIC:PROPERTY name=”test” />

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; 

图片 1

      图片 2

文章来自:http://www.runoob.com/js/js-htmldom-events.html

<SCRIPT LANGUAGE=”JavaScript”>
var lastObj = null;
var lastColor = null;
function doInit(){
 if(element==null){
  return;
 }
 var objT = element.children[0];
 try{
  objT.rows(0).className=”grid_title”;
  objT.rows(1).className=”grid_title”;
 }
 catch(err){
  objT.className=”grid_title”;
 }
 
 objT = element.children[1];
 if(objT.rows(0)==null){
  return;
 }
 objT.rows(0).className=”gridding1″;
 for(i=1;i<objT.rows.length;i++){
  if(i%2==1){
  
   objT.rows(i).className=”gridding1″;
  }
  else{
   objT.rows(i).className=”gridding1″;
  }
 }
}
function doClick(){
 if(event.srcElement.tagName==”TD”){
  var curObj = event.srcElement.parentElement;
  if(curObj.rowIndex==0) return false;
  try{
   if(curObj.children[0].children.length == 0 ) return false;
  }
  catch(err){
   return false;
  }
  if(curObj.children[0].children[0].checked){
   curObj.children[0].children[0].checked = false;
  }
  else{
   lastObj = curObj;
   lastColor = “#FFFFFF”;
   curObj.children[0].children[0].checked = true;
  }
 }
 if(event.srcElement.tagName ==”INPUT”){
  try{
   var curObj = event.srcElement.parentElement.parentElement;
   if(curObj.rowIndex==0) {
    var obj = curObj.parentElement.parentElement;
    for(i=1;i<obj.rows.length;i++){
     if(obj.rows(0).children[0].children[0].checked){
      obj.rows(i).children[0].children[0].checked = true;
      obj.rows(i).style.backgroundColor=”#FFFFFF”;
      obj.rows(i).style.color=”#000000″;
     }
     else{
      obj.rows(i).children[0].children[0].checked = false;
      if(i%2==1){
       obj.rows(i).style.backgroundColor=”#FFFFFF”;
       obj.rows(i).style.color=”#000000″;
      }
      else{
       obj.rows(i).style.backgroundColor=”#FFFFFF”;
       obj.rows(i).style.color=”#000000″;
      }
     }
    }
   }
  }
  catch(err){
   return true;
  }
 }
}
function doMouseover(){
 if( event.srcElement.tagName==”TD”){
  var curObj = event.srcElement.parentElement;
  if(curObj.rowIndex==0) return false;
  curObj.style.backgroundColor=”#F2FFEE”;
 }
 if( event.srcElement.tagName==”INPUT”){
  var curObj = event.srcElement.parentElement.parentElement;
  if(curObj.rowIndex==0) return false;
  curObj.style.backgroundColor=”#F2FFEE”;
 }
}

<html xmlns=”; 

  给这个盒子上绑定上onmouseover事件和onmouseout事件

  给这个盒子上绑定上onmouseover事件和onmouseout事件

function doMouseout(){
 if(event.srcElement.tagName==”TD”){
  var curObj = event.srcElement.parentElement;
  if(curObj.rowIndex==0) return false; 
  try{
   if(curObj.children[0].children.length == 0 ) {
    if(curObj.rowIndex%2==1){
     curObj.style.backgroundColor=”#FFFFFF”;
     curObj.style.color=”#000000″;
    }
    else{
     curObj.style.backgroundColor=”#FFFFFF”;
     curObj.style.color=”#000000″;
    }
    return true;
   }
  }
  catch(err){
   if(curObj.rowIndex%2==1){
    curObj.style.backgroundColor=”#FFFFFF”;
    curObj.style.color=”#000000″;
   }
   else{
    curObj.style.backgroundColor=”#FFFFFF”;
    curObj.style.color=”#000000″;
   }
   return true;
  }
  if(curObj.rowIndex%2==1)
   if(curObj.children[0].children[0].checked){
    curObj.style.backgroundColor=”#FFFFFF”;
    curObj.style.color=”#000000″;
   }
   else{
    curObj.style.backgroundColor=”#FFFFFF”;
    curObj.style.color=”#000000″;
   }
  else
   if(curObj.children[0].children[0].checked){
    curObj.style.backgroundColor=”#FFFFFF”;
    curObj.style.color=”#000000″;
   }
   else{
    curObj.style.backgroundColor=”#FFFFFF”;
    curObj.style.color=”#000000″;
   }
 } 
 
 if(event.srcElement.tagName==”INPUT”){
  var curObj = event.srcElement.parentElement.parentElement;
  if(curObj.rowIndex==0) return false; 
  try{
   if(curObj.rowIndex%2==1){
    if(curObj.children[0].children[0].checked){
     curObj.style.backgroundColor=”#FFFFFF”;
     curObj.style.color=”#000000″;
    }
    else{
     curObj.style.backgroundColor=”#FFFFFF”;
     curObj.style.color=”#000000″;
    }
   }
   else{
    if(curObj.children[0].children[0].checked){
     curObj.style.backgroundColor=”#FFFFFF”;
     curObj.style.color=”#000000″;
    }
    else{
     curObj.style.backgroundColor=”#FFFFFF”;
     curObj.style.color=”#000000″;
    }
   }
  }
  catch(err){
   return true;
  }
 }
}
</SCRIPT>

<head> 

图片 3

      图片 4

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/> 

  发现它们不会发生什么问题,然后(嘿嘿,你懂得!)

  发现它们不会发生什么问题,然后(嘿嘿,你懂得!)

<title>无标题文档</title> 

图片 5

      图片 6

<style type=”text/css”> 

  让我们创建一个B元素,让它被嵌套在A元素中,作为A的子元素

  让我们创建一个B元素,让它被嵌套在A元素中,作为A的子元素

  #b_g_date tr{ 

图片 7

      图片 8

  event:expression(onmouseover =
function(){this.style.backgroundColor=’#E3FFC9′},onmouseout =
function(){this.style.backgroundColor=’#FFFFFF’}); 

  我们依旧只给外层父元素A绑定onmouseover事件和onmouseout事件,你会发现发生什么了呢?对,没错!当鼠标移入移除A的子元素B的时候居然也发生了onmouseover事件和onmouseout事件!!Why?这不是我想要的!难道这时候B就不在是A的一部分了吗?当然不是,要不也不会在移入B元素时发生onmouseover事件。这样证明,B元素还是A不可分割的一部分啊。

  我们依旧只给外层父元素A绑定onmouseover事件和onmouseout事件,你会发现发生什么了呢?对,没错!当鼠标移入移除A的子元素B的时候居然也发生了onmouseover事件和onmouseout事件!!Why?这不是我想要的!难道这时候B就不在是A的一部分了吗?当然不是,要不也不会在移入B元素时发生onmouseover事件。这样证明,B元素还是A不可分割的一部分啊。

  那到底是怎么回事呢?终究还是事件冒泡搞得鬼?大家都知道常用的浏览器中有两种事件流:事件冒泡和事件捕获。让我们看一下事件冒泡的定义:事件按照从最特定的事件目标逐级向上传播到最不特定的事件目标(document对象)的顺序。所以说当鼠标移入移除A的子元素B的时候,B的onmouseover事件和onmouseout事件会触发,但是它自己没有这两个事件啊,就把这两个事件传递给了它的父元素A,A有这两个事件所以就发生了我们看到的情况。

  那到底是怎么回事呢?终究还是事件冒泡搞得鬼?大家都知道常用的浏览器中有两种事件流:事件冒泡和事件捕获。让我们看一下事件冒泡的定义:事件按照从最特定的事件目标逐级向上传播到最不特定的事件目标(document对象)的顺序。所以说当鼠标移入移除A的子元素B的时候,B的onmouseover事件和onmouseout事件会触发,但是它自己没有这两个事件啊,就把这两个事件传递给了它的父元素A,A有这两个事件所以就发生了我们看到的情况。

#b_g_date tr:hover{ 

  有人会说那怎么避免呢,毕竟不是所有人都会是这种需求嘛,我们只要父级元素的事件触发就好,子级元素就让它静静的当个美男子就好了。

  有人会说那怎么避免呢,毕竟不是所有人都会是这种需求嘛,我们只要父级元素的事件触发就好,子级元素就让它静静的当个美男子就好了。

  background:#E3FFC9; 

  所以W3C在mouseover和mouseout事件中添加了relatedTarget属性

  所以W3C在mouseover和mouseout事件中添加了relatedTarget属性 :

  •在mouseover事件中,它表示鼠标来自哪个元素
  •在mouseout事件中,它指向鼠标去往的那个元素

  •在mouseover事件中,它表示鼠标来自哪个元素 
  •在mouseout事件中,它指向鼠标去往的那个元素 

#b_g_date td{ 

  而而Microsoft在mouseover和mouseout事件中添加了两个属性

  而而Microsoft在mouseover和mouseout事件中添加了两个属性 

  height:20px; 

  •fromElement,在mouseover事件中表示鼠标来自哪个元素
  •toElement,在mouseout事件中指向鼠标去往的那个元素

  •fromElement,在mouseover事件中表示鼠标来自哪个元素 
  •toElement,在mouseout事件中指向鼠标去往的那个元素

  所以我们就有了如下代码的实现

  所以我们就有了如下代码的实现

</style> 

document.getElementById('box1').onmouseover = function (e) {
if (!e) e = window.event;
var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement;
while (reltg && reltg != this) reltg = reltg.parentNode;
if (reltg != this) {
// 这里可以编写 onmouseenter 事件的处理代码
alert('111');
}
}
document.getElementById('box1').onmouseout = function (e) {
if (!e) e = window.event;
var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
while (reltg && reltg != this) reltg = reltg.parentNode;
if (reltg != this) {
// 这里可以编写 onmouseleave 事件的处理代码
alert('2222');
}
}

图片 9图片 10

</head> 

以上所述是小编给大家介绍的onmouseover事件和onmouseout事件的全面了解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

 1 document.getElementById('box1').onmouseover = function (e) {
 2     if (!e) e = window.event;
 3     var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement;
 4     while (reltg && reltg != this) reltg = reltg.parentNode;
 5     if (reltg != this) {
 6         // 这里可以编写 onmouseenter 事件的处理代码
 7         alert('111');
 8     }
 9 }
10 document.getElementById('box1').onmouseout = function (e) {
11     if (!e) e = window.event;
12     var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
13     while (reltg && reltg != this) reltg = reltg.parentNode;
14     if (reltg != this) {
15         // 这里可以编写 onmouseleave 事件的处理代码
16         alert('2222');
17     }
18 }

<body> 

您可能感兴趣的文章:

  • js
    阻止子元素响应父元素的onmouseout事件具体实现
  • 通过onmouseover选项卡实现img图片的变化
  • JS小功能(onmouseover实现选择月份)实例代码
  • onmouseover和onmouseout的一些问题思考
  • js ondocumentready onmouseover onclick onmouseout
    样式
  • 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现–简短版
  • js下关于onmouseout、事件冒泡的问题经验小结

View Code

<table width=”500″ border=”1″  height=”300″ id=”b_g_date”> 

  

  <tr> 

  哈哈,妈妈再也不用担心事件冒泡了!

    <td> </td> 

 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

  <tr> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

    <td> </td> 

  </tr> 

</table> 

</body> 

</html>

相关文章