第二天：Javascript事件
事件:是可以被Javascript侦测到的行为，例如鼠标的点击，鼠标的移动,常见的事件如下
代码实现“点击事件”：
<body>
<button onclick="demo()">按钮</button>
<script>
function demo(){
alert("hello");
}
</script>
</body>
运行结果：点击画面的按钮，弹出框 hello 代码实现“鼠标经过”：
1）style.css内容如下：
div{
width: 100px;
height: 100px;
font-weight:bold;">crimson;
}
2）testjstty3.html内容如下：
<head>
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div clsss="div" onmouseout="onOut(this)" onmouseover="onOver(this)"> </div>
<script>
function onOut(ooj){ ooj.innerHTML="hello";
}
function onOver(ooj){
ooj.innerHTML="world";
}
</script> 运行结果：移动经过时，小红方框出现world；鼠标移出后，出现hello
文本改变事件：
<body onload="msg()"> //网页下载完成事件，事件时在body中写的
<div clsss="div" onmouseout="onOut(this)" onmouseover="onOver(this)"> </div>
<script>
function onOut(ooj){ ooj.innerHTML="hello";
}
function onOver(ooj){
ooj.innerHTML="world";
}
</script>
<form>
<input type="text" onchange="changeDemo(this)"> //在文本框输入内容后，弹出框对话框，提示内容改变了
</form>
<script>
function changeDemo(bg){
alert("内容改变了");
}
</script>
<form>
<input type="text" onselect="selectDemo(this)"onfocus="focusDemo(this)"> //鼠标点击文本框，文本框变成绿色 </form>
<script>
//鼠标选中文本框中的文字，文本框变成绿色
function selectDemo(bg){
bg.style.backgroundColor= "red";
}
function focusDemo(bg){
bg.style.backgroundColor= "green";
}
function msg(){
alert("网页内容下载完毕");
}
</script>
第二天：Javascript事件的更多相关文章
- 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- JavaScript事件详解-jQuery的事件实现（三）
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- JavaScript事件流原理解析
一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...
- 【原】javascript事件流
摘要:事件流这个东西是比较重要的,为了让自己更加理解js中的事件流,必须整理整理,梳理一下事件流的各种东西啊.本文大部分内容参考<javascript高级程序设计第三版> 先来一段书里的原 ...
- Javascript事件模型系列（四）我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- Javascript事件模型系列（一）事件及事件的三种模型
一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
- 【探讨】javascript事件机制底层实现原理
前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
- javaScript事件（二）事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
- JavaScript事件类型
JavaScript事件类型 Web浏览器中可能发生的事件有很多类型.这里我将主要将下面几种常用的事件类型: UI事件 焦点事件 鼠标与滚轮事件 键盘与文本事件 复合事件 变动事件 HTML5事件 设 ...
随机推荐
- 探索未知种族之osg类生物---器官初始化一
我们把ViewerBase::frame()比作osg这类生物的肺,首先我们先来大概的看一下‘肺’长什么样子,有哪几部分组成.在这之前得对一些固定的零件进行说明,例如_done代表osg的viewer ...
- 比较两个List列表，取得List中不同项返回
/// <summary> /// 比对模型及属性数组 /// </summary> /// <typeparam name="TM">< ...
- Python中特殊函数和表达式lambda,filter,map,reduce
1.lambda:使用lambda表达式可以定义一个匿名函数 lambda表达式是一种简洁格式的函数.该表达式不是正常的函数结构,而是属于表达式的类型 (1)基本格式: lambda 参数,参数... ...
- Binary Prefix Divisible By 5 LT1018
Given an array A of 0s and 1s, consider N_i: the i-th subarray from A[0] to A[i] interpreted as a bi ...
- Netsharp下微信菜单以及OAuth
一.OAuth介绍 在微信开发中,当打开一个页面是,业务场景一般会基于粉丝绑定用户信息,即页面需要基于粉丝和用户的身份处理业务逻辑. 在微信中打开一个页面有三个场景: 1.文本回复中直接包含url 2 ...
- 提升HTML5的性能体验系列之三 流畅下拉刷新和上拉
下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...
- 20155312 2016-2017-2 《Java程序设计》第八周学习总结
20155312 2016-2017-2 <Java程序设计>第八周学习总结 课堂内容总结 学习模式 游乐园模式-荒野求生模式 学习方法 以代码为中心->遇到不会的类和方法(参数等) ...
- rbenv安装本地ruby安装包
cd .rbenv mkdir cache #把安装包拷进cache cd cache rbenv install 版本号
- 【转】CentOS 7 安装配置 NFS
环境 nps 192.168.1.97 client 192.168.1.98 一.yum 安装 yum -y install nfs-utils rpcbind nfs 的配置文件 /etc/exp ...
- 【转】手动释放linux os buff/cache
手动释放linux内存cache和脚本定时释放 标签: linuxcache脚本bufferwindows磁盘 2011-12-04 08:44 12799人阅读 评论(2) 收藏 举报 分类: l ...