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. Web Applicationservlet,cookie,session

    Web Application简介: Web Application NameWEB-INFweb.xml 该web application的配置文件lib 该web application用到的依赖 ...

  2. Eclipse启动时发生An internal error occurred during: "Initializing Java Tooling".错误的解决方法

    问题描述: Eclipse启动时发生An internal error occurred during: "Initializing JavaTooling".错误的解决方法 解决 ...

  3. PDA手持机 移动开单进销存系统 现场出打印凭据和扫码 新的亮点

    传统车销模式弊端:1.手写开单,效率低,动作慢2.现场手写开单明细不能打印,产品明细不规范3.电脑办公人员及车销人员对车上的库存情况掌握不清楚,销售人员对每种产品销售价格不清楚4.老板对员工工作的管控 ...

  4. 全局变量 HInstance 到底是在什么时候赋值的?

    在学习 资源文件 和 钩子函数 时, 经常用到当前模块句柄(HInstance)这个全局变量. 今天特别想知道, 它到底是在什么时候给赋值的. 输入 HInstance; "Ctrl+鼠标& ...

  5. iOS10以上关于访问权限设置

    记录一下: iOS对用户的安全和隐私的增强,在申请很多私有权限的时候都需要添加描述,但是,在使用Xcode 8之前的Xcode还是使用系统的权限通知框.要想解决这个问题,只需要在info.plist添 ...

  6. 1、Spring In Action 4th笔记（1）

    Spring In Action 4th笔记(1) 2016-12-28 1.Spring是一个框架,致力于减轻JEE的开发,它有4个特点: 1.1 基于POJO(Plain Ordinary Jav ...

  7. LINQ 左右连接

    LINQ 左右连接:DefaultIfEmpty() incomeList = (from p in db.Incomes join m in db.Items on p.ItemID equals ...

  8. iOS how to stop a scrolling scrollView

    - (void)killScroll { CGPoint offset = scrollView.contentOffset; offset.y -= 1.0; [scrollView setCont ...

  9. Git 基本概念及常用命令

    一.基本概念 文件的三种状态:(任何一个文件在git中都有以下三种状态) 1) 已提交(committed):表示该文件已经被安全地保存在本地数据库中了. 2) 已修改(modified):表示修改了 ...

  10. compass typography 排版 常用排版方法[Sass和compass学习笔记]

    Bullets 用来定义ul li 相关的样式 no-bullet  关闭 li的默认样式 那个小圆点 no-bullets 作用域ul 调用no-bullet 函数 不过用了reset 后 默认没有 ...