JS实战 · 实践积累点滴杂烩

时间:2021-03-22 04:50:50
onmouseover : 鼠标进入
onmouseout : 鼠标离开
onfocus:得到焦点
 
表单提交执行JS代码,有两种常用方式。
一:在局部(比如按钮定义处)用onclick="return Check()";
二:在表单form处用onsubmit="retnrn Check(this)";
 
表单提交验证:灵活运用returnValue
 
取消超链接的效果:<a href="javascript:void(0)"></a>
 
div设置颜色:background。
 
      找准事件源,用户点击哪个盒子,会有事情发生,这个盒子就是事件源,它身上就有 onclick 属性;
     找准谁是被操作的对象,被操作的对象可能不止一个,并且事件源自己也有可能是被操作的对象。被操作的对象身上一定要有 id  ,这样才能 document.getElementById(“”)通过id 来得到这个元素。
 
从事件的3 要素开始分析:
找事件源。事件源就是一个HTML 标签,这个标签能响应事件。只有盒子1 是事件源。
找事件名。盒子1 能够响应两个事件,分别是鼠标进入,鼠标离开。
分析事件的响应,各有多少步骤,每一个步骤就写一条命令。
例子:
<script type="text/javascript">
function jin(){
  document.getElementById("box1").style.backgroundColor = "blue";
  document.getElementById("box2").style.display = "block";
}
function chu(){
  document.getElementById("box1").style.backgroundColor = "red";
  document.getElementById("box2").style.display = "none";
}
</script>
</head>
<body>
    <div id="box1" onmouseover="jin()" onmouseout="chu()"></div>
    <div id="box2"></div>
</body>
 
DOM编程步骤、思路
1、定义界面:
     通过html标签将数据进行封装;
2、定义一些静态样式:
     利用css;
3、需要动态地完成的和用户的交互:
     a:明确事件源;
     b:明确事件,将事件注册到事件源上;
     c:通过JS的函数对象对事件进行封装;
     d:在处理过程中需要明确处理区域。