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. VirusAnti_didiwei使用说明

    前言 前段时间说要写的一个专杀框架敌敌畏,后改为强撸敌敌畏,以彰显样本查杀时的气势,现在第一版已经完成了,如下图所示,使用的时候强烈建议控制台使用放大模式,这样就可以看见我花了半天才画好了logo , ...

  2. 如何关闭eslint

    在vue-cli搭建webpack中,使用eslint进行代码规范化检查. 进行关闭,在根目录下有个.eslintignore直接将不想要检查的文件丢进去就可以了 也可以在重构的时候把它关闭掉

  3. nefu1109 游戏争霸赛（状压dp）

    题目链接:http://acm.nefu.edu.cn/JudgeOnline/problemShow.php?problem_id=1109 //我们校赛的一个题,状压dp,还在的人用1表示,被淘汰 ...

  4. 截取QueryString 通过截取?和& 小写

    $(function () { var url = location.href.replace("#", ""); var paraString = url.s ...

  5. Windows安装程序 报错 “已安装了较新版本” 导致无法安装程序的解决方法

    打开注册表 HKEY_CURRENT_USER\Software\Microsoft\Installer\Products ,“查找”程序名称 如果有程序名和安装程序相同的 ,删除整个 项 ! 然后就 ...

  6. Ue4的容器（数据结构）

    之前都没注意,作为程序眼这些还是比较重要的 Engine\Source\Runtime\Core\Public\Containers\

  7. 网站开发网页广告条不显示，出现ERR_BLOCKED_BY_CLIENT

    原因: 原因很简单,是因为被360浏览器的ad block给屏蔽掉了. 现象: 解决方案: 更换图片文件名,去掉ad,改成其他的字符.

  8. #研发解决方案#分布式并行计算调度和管理系统Summoner

    郑昀 创建于2015/11/10 最后更新于2015/11/12 关键词:佣金计算.定时任务.数据抽取.数据清洗.数据计算.Java.Redis.MySQL.Zookeeper.azkaban2.oo ...

  9. 通读SDWebImage③--gif和webP的支持、不同格式图片的处理、方向处理

    本文目录 NSData+ImageContentType: 根据NSData获取MIME UIImage+GIF UIImage+WebP UIImage+MultiFormat:根据NSData相应 ...

  10. CSS居中demo

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...