黑马程序员—dom笔记(对象/对象事件）

来源：互联网发布：迪迦奥特曼act2.0淘宝编辑：程序博客网时间：2024/05/21 14:59

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

1.window对象
confirm("是否删除"); //显示确定、取消的对话框。
navigate("http://www.baidu.com")； //重新导航到指定的地址。
window.location.href="http://www.baidu.com"; //重新导向新的地址
window.location.reload()刷新页面

  var intervalId = setInterval("",5000); //设置定时器
clearInterval(intervalId);           //清除定时器

charAt(0);        //取第一个字符
substring(start,end); //取start-end区域（不包括end）的字符

2.body、document对象的事件
onload: 网页加载完毕时触发
onunload: 网页关闭（或者离开）后触发
onbeforeunload：在网页准备关闭（或者准备离开）后触发。
<body onbeforeunload="window.event.returnValue='真的要放弃发帖退出吗？'">

window.event.altKey/ctrlKey/shiftKey ;bool类型，表示发生事件时键是否被按下。

  clientX、clientY发生事件时鼠标在客户区的坐标；
  screenX、screenY发生事件时鼠标在屏幕上的坐标；
  offsetX、offsetY发生事件时鼠标相对于事件源

  event.srcElement,获得引发事件源对象
  this：当前监听事件的对象
  keyCode，发生事件时的按键值

returnValue=false,会取消默认事件的处理

3.剪切板：
clipboardData对象
setData("Text",val);
clipboardData.setData('Text','好玩的网站地址'+location.href)；

oncopy/onpaste事件
当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。
<body oncopy="alert('禁止复制！');return false;">

<input type="text" onpaste="alert('禁止粘贴！');return false;" />

在网站中复制文章的时候，为了防止那些拷贝党不添加文章来源，设置自动添加版权声明
clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自传智播客技术专区，转载请注明来源。'+location.href);

不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒后执行。
oncopy="setTimeout('modifyClipboard()',100)" ;

history 操作历史记录

window.history.back()后退；
window.history.forward()前进

document的方法：
1.write：向文档中写入内容。

document.getElementById(""); //取得对象
document.getELementsByName(""); //返回对象数组 (如：radioButton)
document.getElementsByTagName(""); //返回对象数组

案例：
十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。（btn.disabled=true）

思路：
1.注册按钮初始状态为不可用，disabled
2.启动定时器，setInterval，1秒钟运行一次CountDown方法，设定一个初始值为10的全局变量，
在CountDown方法中对全局变量倒数，然后将倒数的值写到注册按钮上（请仔细阅读协议（还剩8秒））。
3.直到全局变量值为<=0，就让注册按钮可用，将按钮的文本设置为“同意”。

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
  var leftSeconds=10;
  function countDown(){
   var btn=document.getElementById("btnReg");
   if(btn){
    if(leftSeconds<=0){
     btn.value="同意";
     btn.disabled=false;
     clearInterval("timerId");
    }
    else{
     btn.value="请仔细阅读协议（还剩"+leftSeconds+"秒）";
     leftSeconds--;
    }
   }
  }
  var timerId=setInterval("countDown()",1000);

</script>
</head>

<body>

</body>
</html>

4.动态注册事件
在body的onload事件中处理，例如为每个text对象添加onclick，onblur事件

例：（评分控件）

<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>

5动态创建元素：
document.createElement("button")
appendChild()

innerText、innerHTML属性
：分别表示元素标签内内容的文本表示形式和HTML源代码，可读可写。

例：

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
  function AddData(){
   var tab=document.getElementById("tab");
   var data={"百度":"http://www.baidu.com","新浪":"http://www.sina.com","谷歌":"http://www.google.com"};
   for(var key in data){
    var value=data[key];
    var tr=document.createElement("tr");

    var td1=document.createElement("td");
    td1.innerText=key;
    tr.appendChild(td1);

    var td2=document.createElement("td");
    td2.innerHTML="<a href='"+value+"'>"+value+"</a>";
    tr.appendChild(td2);

    tab.appendChild(tr);
    //var tr=tab.insertRow(-1);
    //var td1=tr.insertCell(-1);
    //td1.innerText=key;
    //var td2=tr.insertCell(-1);
    //td2.innerHTML="<a href='"+value+"'>"+value+"</a>";
   }
  }
</script>
</head>

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

详细请查看：http://net.itheima.com/