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. 安装Kafka

    1.默认安装好zookeeper和scala2.下载安装包,解压 tar -zxvf kafka_2.11-0.9.0.1.tgz kafka_2.11-0.9.0.13.配置环境变量 vim /et ...

  2. 详细讲述MySQL中的子查询操作 （来自脚本之家）

    继续做以下的前期准备工作: 新建一个测试数据库TestDB: ? 1 create database TestDB; 创建测试表table1和table2: ? 1 2 3 4 5 6 7 8 9 1 ...

  3. 大家都在用PDA条码扫描枪管理企业仓库 PDA无线数据采集程序

    PDA数据采集器又称之为手持终端,这些都是用于扫描货物条码统计数据用的,PDA扫描枪有效提高企业仓库管理,在仓库管理中引入条码技术,对仓库的到货检验.入库.出库.调拨.移库移位.库存盘点等各个作业环节 ...

  4. jackrabbit学习笔记（1）

    http://dove19900520.iteye.com/blog/1654346 看的这个文章照着来的,遇到了一些问题,记录一下 运行报这个错:NamespaceException: wiki: ...

  5. java-并发-高级并发对象2

    浏览以下内容前,请点击并阅读 声明 并发集合 java.util.concurrent包包含了许多对于java集合框架的补充,根据提供的接口可以将这些集合分为以下几类: BlockingQueue 定 ...

  6. ACM : POJ 2676 SudoKu DFS - 数独

    SudoKu Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu POJ 2676 Descr ...

  7. 51Nod 1010 只包含因子2 3 5的数 Label：None

    K的因子中只包含2 3 5.满足条件的前10个数是:2,3,4,5,6,8,9,10,12,15. 所有这样的K组成了一个序列S,现在给出一个数n,求S中 >= 给定数的最小的数. 例如:n = ...

  8. paramiko模块的安装

    1.找到自己python安装的目录(默认路径:C:\Users\zhangliyuan\AppData\Local\Programs\Python\Python35) 注:cmd中所有命令 2.进入S ...

  9. MAC下使用Charles抓取安卓模拟器数据

    一.安装Charles,这个不多记录 二.Charles数据乱码问题(参照这篇文章 http://blog.csdn.net/huanghanqian/article/details/52973651 ...

  10. 关于phpstrom 的一些实用小技巧与擦件

    1.界面中文方框问题 Settings->Appearance中Theme 设置 Windows勾选Override default fonts by (not recommended),设置字 ...