JavaScript_03 事件

来源：互联网发布：程序员有前途吗编辑：程序博客网时间：2024/05/01 07:32

属性

事件发生时机

onabort

图片下载被打断时

onblur

元素失去焦点时

onchange

框内容改变时

onclick

鼠标点击一个对象时

ondblclick

鼠标双击一个对象时

onerror

当加载文档或图片时发生错误时

onfocus

当元素获取焦点时

onkeydown

按下键盘按键时

onkeypress

按下或按住键盘按键时

onkeyup

放开键盘按键时

onload

页面或图片加载完成时

onmousedown

鼠标被按下时

onmousemove

鼠标被移动时

onmouseout

鼠标离开元素时

onmouseover

鼠标经过元素时

onmouseup

释放鼠标按键时

onreset

重新点击鼠标按键时

onresize

当窗口或框架被重新定义尺寸时

onselect

文本被选择时

onsubmit

点击提交按钮时

onunload

用户离开页面时

点击事件

  <body>        <script type="text/javascript">    document.getElementById("pp").style.color = "red";  </script>    <p onclick="this.innerHTML='谢谢'">1213</p>    </body>

  <body>        <script type="text/javascript">    function chang(id){id.innerHTML = "谢谢";        }  </script>    <p onclick="chang(this)">1213</p>    </body>

  <body>        <script type="text/javascript">    function chang(){document.getElementById("qq").innerHTML = new Date();        }  </script>    <button onclick="chang()">查看时间</button>    <p id="qq"></p>    </body>

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

  <body onload="checkCookies()">        <script type="text/javascript">    function checkCookies(){if(navigator.cookieEnable == true){alert("已启用cookie");}else{alert("未启用cookie");}        }  </script>    </body>

onshange事件光标离开转换大写

 <body onload="checkCookies()">        <script type="text/javascript">    function upp(){var str = document.getElementById("aa");str.value = str.value.toUpperCase();        }  </script>    请输入字母:<input id="aa" onchange="upp()" type="text"/>    </body>

onmouseover 与 onmouseout 事件鼠标移动鼠标离开

 <body>    <script type="text/javascript">    function mov(me){me.innerHTML = "谢谢";        }            function mou(me){me.innerHTML = "继续移上来";        }  </script>      <div onmouseover="mov(this)" onmouseout="mou(this)"    style="background-color: green;width: 150px;height: 100px">    把鼠标移上来   </div>   </body>

onmousedown 与 onmouseup 鼠标按下与鼠标释放事件

  <body>    <script type="text/javascript">    function mdown(me){me.innerHTML = "按下我";        }            function mup(me){me.innerHTML = "释放我";        }  </script>      <div onmousedown="mdown(this)" onmouseup="mup(this)"    style="background-color: green;width: 150px;height: 100px">    把鼠标移上来   </div>   </body>

创建新的 HTML 元素

<body><div id="div1"><p>这是一个段落</p><p>这是另一个段落</p></div><script type="text/javascript">    var para = document.createElement("p");    var node = document.createTextNode("这是新的段落");    para.appendChild(node);    var element = document.getElementById("div1");    element.appendChild(para); </script></body>

删除已有的 HTML 元素

<body>   <div id="div1"><p id="pp">这是一个段落</p><p>这是另一个段落</p>   </div>   <script type="text/javascript">    var dd = document.getElementById("div1");    var pp = document.getElementById("pp");    dd.removeChild(pp);   </script></body>

fgdsgfds

0 0