dom笔记1_控件的常用事件
来源:互联网 发布:替代硕鼠的软件 编辑:程序博客网 时间:2024/06/02 02:28
控件的常用事件:
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>
<div id="divMove" style="position:absolute">
<img src="F:/Image/Ico/023.gif">我会飞</img>
</div>
</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>
<input type="text" value="请输入搜索关键字" style="color:gray" onfocus="textfocus(this)" onblur="textblur(this)"/>
<input type="button" width="70px" value="搜索"/>
</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>
<body onload="initEvent()">
<table id="tab">
<tr>
<td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
</tr>
</table>
</body>
</html>
- dom笔记1_控件的常用事件
- Dom笔记3:Dom常用事件(body 、 document 对象的事件)
- HTML DOM学习笔记(三)_常用DOM 属性
- Dom中一些常用的事件
- 常用控件的事件监听
- jQuery 常用DOM事件
- dom 笔记2_
- DOM的事件处理---学习笔记
- DOM事件学习笔记
- DOM事件学习笔记
- DOM事件学习笔记
- JavaScript DOM事件(笔记)
- DOM事件学习笔记
- 47_拖动控件,控件的触摸事件
- cocos2d_x_03_常用类的使用_事件_绘图
- JavaScript权威指南_160_第17章_事件处理_17.1-事件类型-DOM事件
- 常用控件的属性、事件和方法
- c#控件对应的常用事件
- Linux程序设计——进程和信号
- linux下c编程之内存共享shemget函数的实现及案例-bmi体重身高测试2
- 显示更多 UITabView
- 经典兔子问题
- java常用包
- dom笔记1_控件的常用事件
- DP入门之采药问题
- 算法库(五)
- 字符组转译序列
- 关于函数调用中的const参数
- HSSF
- C++判断JSON字符串的合法性
- 算法库(六)
- OpenCV码源笔记——tree_engine(CvDTree,CvBoost,CvRTrees,CvERTrees,CvGBTrees)