javascript之BOM事件注册和案例

来源：互联网发布：flash中文版mac下载编辑：程序博客网时间：2024/06/10 23:11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript">    /*    事件：         注册事件的方式：                        方式一： 直接在html元素上注册                <body onload="ready()">                                    function ready(){                    alert("body的元素被加载完毕了..");                }                            方式二：可以js代码向找到对应的对象再注册。 推荐使用。var bodyNode = document.getElementById("body");bodyNode.onload = function(){alert("body的元素被加载完毕");}     */          </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body id="body"> </body></html>

</pre><pre code_snippet_id="1695084" snippet_file_name="blog_20160524_3_7585644" name="code" class="html">

案例：依据图片内容，编写代码。

图片如下：

代码写了出来：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript"> /*常用的事件： 鼠标点击相关：onclick 在用户用鼠标左键单击对象时触发。 ondblclick 当用户双击对象时触发。 onmousedown 当用户用任何鼠标按钮单击对象时触发。 onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。  鼠标移动相关：onmouseout  当用户将鼠标指针移出对象边界时触发。 onmousemove 当用户将鼠标划过对象时触发。  焦点相关的：onblur 在对象失去输入焦点时触发。 onfocus 当对象获得焦点时触发。 其他：onchange 当对象或选中区的内容改变时触发。 onload 在浏览器完成对象的装载后立即触发。 onsubmit 当表单将要被提交时触发。 */function clickTest(){alert("单击..");}function dbClick(){alert("双击.."); }  function showTime(){var timeSpan = document.getElementById("timeSpan");var date  = new Date().toLocaleString();timeSpan.innerHTML = date.fontcolor("red");}function hideTime(){var timeSpan = document.getElementById("timeSpan");timeSpan.innerHTML = "";}  function showInfo(){var timeSpan = document.getElementById("userName");timeSpan.innerHTML = "用户名是由6位的英文与数字组成".fontcolor("green");} function hideInfo(){var timeSpan = document.getElementById("userName");timeSpan.innerHTML = "";} function change(){alert("城市改变了..");}  </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><input type="button" onclick="clickTest()"  value="单击" />    <input type="button" ondblclick="dbClick()" value="双击"/> <span onmousemove="showTime()" onmouseout="hideTime()" >查看当前系统时间：</span><span id="timeSpan"></span>用户名<input type="text" onfocus="showInfo()"  onblur="hideInfo()"  /> <span id="userName"></span> <select onchange="change()" >    <option>广州</option>        <option>深圳</option>        <option>上海</option>    </select>  </body></html>

1 0