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. OpenLayers 3 之 地图样式（ol.style）详解

    地图样式是由 style 类控制的,其包含了地图样式的方方面面,例如,填充色.图标样式.图片样式.规则图形样式.边界样式.文字样式等,样式一般针对矢量要素图层. 矢量图层样式可以事先写好,写成静态的, ...

  2. 老生长谈的$.extend()方法

    jq的extend()是jq插件扩展很重要的部分,到这里证明是可以自己在jq的基础上,分为两种方法去扩展或开发,为jq本身添加一个方法,可以理解成扩展静态方法和自定义方法. 今天有看到一篇帖子,对这部 ...

  3. Hackerrank11 LCS Returns 枚举+LCS

    Given two strings,  a and , b find and print the total number of ways to insert a character at any p ...

  4. 未能添加对***.dll的引用 问题解决方法

    这个不是什么新问题了,这里说一下我遇到的这个操蛋事. 转载请注明出处 http://www.cnblogs.com/zaiyuzhong/p/6236263.html 我做的和往常一样,找到SDK开发 ...

  5. GADL配置编译

    GADL配置编译 文章1:Win7(32/64)VS2010配置编译GDAL环境(图文教程+亲测可用!) 转载:http://malagis.com/win7-vs2010-gdal.html 近的一 ...

  6. mongo遍历表

    $mongo = new MongoClient("mongodb://192.168.8.189:27017"); $collectObj = $mongo->select ...

  7. 搭建OpenStack，kvm环境准备

    一.KVM简介 KVM全称是kernel-based virtual machine(基于内核的虚拟机),是一个开源的系统虚拟化模块,基于硬件的完全虚拟化,不过需要硬件支持(如Intel VT技术或者 ...

  8. Github+Jekyll —— 创建个人免费博客（一）从零开始

    摘要: 本文中我将介绍一下如何在github上搭建个人Blog(博客),也顺便让我们掌握一下github Pages功能,另外还涉及到Jekyll技术. ======================= ...

  9. MVC框架

    MVC (Modal View Controler)本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用 ...

  10. java-PreparedStatement的用法

    转自:http://www.cnblogs.com/raymond19840709/archive/2008/05/12/1192948.html PreparedStatement的用法 jdbc( ...