JS技术

通过js给页面元素添加事件

字号+ 作者: 来源:    2014-11-17 20:00 我要评论( )

通过js给页面元素添加事件,阅读通过js给页面元素添加事件,最近做一个登录仿XP多用户页面,要使用js给页面元素添加事件的方式去处理。网上G了很久找到一个比较简单的示例:view plaincopy to clipboardprint?script function b(){ alert(

最近做一个登录仿XP多用户页面,要使用js给页面元素添加事件的方式去处理。网上G了很久找到一个比较简单的示例:view plaincopy to clipboardprint?
<script>  
function b(){  
 alert("我被click了!!5555~~~~~~~~~~");  
}  
 
function a(){  
 good.onclick=b; //注意onclick不能写成onClick,要不没效果的。  
}  
 
</script>  
<div id="good" style="height:100px; width:100px;background:#323923;color:white;">点我啊</div>  
 
<input type=button value="添加点击事件" onclick="a();"> 

<script>
function b(){
 alert("我被click了!!5555~~~~~~~~~~");
}

function a(){
 good.onclick=b; //注意onclick不能写成onClick,要不没效果的。
}

</script>
<div id="good" style="height:100px; width:100px;background:#323923;color:white;">点我啊</div>

<input type=button value="添加点击事件" onclick="a();">  不过在用的时候很是郁闷,如为good添加onMoserOver的事件view plaincopy to clipboardprint?
document.getElementById('QuickUserLoginPart').onmouseover = alert("移过了!"); 

document.getElementById('QuickUserLoginPart').onmouseover = alert("移过了!");  把这个添加在input的onClick里,点击了马上会弹出一个“移过了!”的提示框,然后当你鼠标移过那个ID为GOOD的区域时是什么反应都没有的。一定要把"onmouseover ="后面的内容写上相关定义好的function才行。  光明白这点就浪费了我两个小时时间啊~~~~~~学艺不精啊。

PS:不知道有没有去除页面元素添加事件的JS

再记录个:
JS:动态添加删除元素view plaincopy to clipboardprint?
<HEAD>  
<SCRIPT>  
function removeElement()  
{  
 try 
 {  
 //The first child of the div is the bold element.  
 var oChild=Div1.children(0);  
 Div1.removeChild(oChild);  
 }  
 catch(x)  
 {  
 alert("You have already removed the bold element. Page will be refreshed when you click OK.")  
 document.location.reload();  
 }  
}  
</SCRIPT>  
</HEAD>  
<BODY>  
<DIV ID=Div1 onclick="removeElement()">  
Click anywhere in this sentence to remove this <B>Bold1</B><B>Bold2</B> word.  
</DIV>  
</BODY> 

<HEAD>
<SCRIPT>
function removeElement()
{
 try
 {
 //The first child of the div is the bold element.
 var oChild=Div1.children(0);
 Div1.removeChild(oChild);
 }
 catch(x)
 {
 alert("You have already removed the bold element. Page will be refreshed when you click OK.")
 document.location.reload();
 }
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID=Div1 onclick="removeElement()">
Click anywhere in this sentence to remove this <B>Bold1</B><B>Bold2</B> word.
</DIV>
</BODY>再记录个不错的站点:

“通过网络汲取营养”——关注国外WEB相关技术,理念,使用技巧...

关于Cookie的使用说明:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 学习JavaScript之this,call,apply

    学习JavaScript之this,call,apply

    2016-01-28 20:45

  • 零基础入门学习Python(10):函数 - qq_33256568的博客 - 博客频道 - CSDN.NET qq_3

    零基础入门学习Python(10):函数 - qq_33256568的博客 - 博客频道

    2015-12-15 09:04

  • Swift 2.0学习笔记(Day48)——类型检查与转换 - 关东升 - 博客频道 - CSDN.NET 关东升 iO

    Swift 2.0学习笔记(Day48)——类型检查与转换 - 关东升 - 博客频道

    2015-12-14 18:16

  • 有趣的Ruby-学习笔记1 - 我可以接受失败,但我不能接受放弃。--迈克尔 乔丹 - 博客频道 - CSDN.NET

    有趣的Ruby-学习笔记1 - 我可以接受失败,但我不能接受放弃。--迈克

    2015-12-14 17:17

网友点评
-