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:在处理过程中需要明确处理区域。

JS实战 · 实践积累点滴杂烩的更多相关文章

  1. 《Node.js实战（双色）》作者之一——吴中骅访谈录

  2. 好未来数据中台 Node.js BFF实践（一）：基础篇

    好未来数据中台 Node.js BFF实践系列文章列表: 基础篇 实战篇(TODO) 进阶篇(TODO) 好未来数据中台的Node.js中间层从7月份开始讨论可行性,截止到9月已经支持了4个平台,其中 ...

  3. Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

  4. Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

  5. iKcamp团队制作｜基于Koa2搭建Node.js实战项目教学（含视频）☞ 环境准备

    安装搭建项目的开发环境 视频地址:https://www.cctalk.com/v/15114357764004 文章 Koa 起手 - 环境准备 由于 koa2 已经开始使用 async/await ...

  6. vue.js实战——购物车练习（包含全选功能）

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  7. Vue.js最佳实践

    Vue.js最佳实践 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ t ...

  8. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  9. Node.js实战(二)之HelloWorld示例

    经过前面的Node.js实战(一)之概述 想必你应该对Node.js的概念.应用场景.优缺点等有个大致的了解,同时你本地Windows或者Linux上已经准备好了Node.js环境. 下面我们来进入每 ...

随机推荐

  1. Spring MVC类型转换

    类型转换器引入 为什么页面上输入"12",可以赋值给Handler方法对应的参数?这是因为框架内部帮我们做了类型转换的工作.将String转换成int 但默认类型转换器并不是可以将 ...

  2. Hibernate jpa 在实体类中对于时间的注解

    在时间类型DATE 属性上添加一个 @Temporal(TemporalType.DATE)(精确到年月日)@Temporal(TemporalType.TIME)(精确到时分秒)@Temporal( ...

  3. java中的反射简单实例

    package club.reflection.entity.User; /** * 实体类 * */ public class User { public String name; private ...

  4. liaoliao的四连做第二弹

    liaoliao四连做第一弹 1.bzoj3211: 花神游历各国 由于$10^9$以内的数最多只会被开方$10$次,所以我们可以用线段树维护然后剪枝.. #include <cstdio> ...

  5. CC countari & 分块+FFT

    题意: 求一个序列中顺序的长度为3的等差数列. SOL: 对于这种计数问题都是用个数的卷积来进行统计.然而对于这个题有顺序的限制,不好直接统计,于是竟然可以分块?惊为天人... 考虑分块以后的序列: ...

  6. mycat入门教程

    github https://github.com/MyCATApache/Mycat-Server myCat介绍 myCat的诞生,要从其前身Amoeba和Cobar说起. Amoeba(变形虫) ...

  7. Excel Sheet Column Title

    Given a positive integer, return its corresponding column title as appear in an Excel sheet. For exa ...

  8. PHPExcel按单元格读取数据

    import('ORG.Util.PHPExcel.PHPExcel'); $objReader = new PHPExcel_Reader_Excel2007(); //use excel2007 ...

  9. JSON详解

    首先要知道JSON是一种轻量级的数据格式,不是一种编程语言,因此其他语言也可以使用. 一.JSON语法 JSON语法可以表现为下面三种值: 1.简单值:字符串.数值.布尔值和null,如"h ...

  10. php+ajax..转

    php+ajax 登录注册页面 主要是登录注册功能,前端后台验证没有什么,这个大家可以自己加上去,比如过滤啊,正则啊等 还是先放图吧 这是登录及注册界面  点击注册切换到注册界面,点击登录切换到登录界 ...