JS-事件处理
1、一个简单的单击事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title> </head>
<body>
<button onclick="demo()">按钮</button>
<script>
function demo(){
alert("hello");
}
</script>
</body>
</html>
2、鼠标事件 onmouseout，onmouseover
当鼠标经过会显示“hello”，当鼠标移出会显示“world”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)"></div>
<script>
function onOver(ooj){
ooj.innerHTML = "hello";
}
function onOut(ooj){
ooj.innerHTML = "world";
}
</script>
</body>
</html>
css代码：
.div{
width:100px;
height:100px;
background-color: aqua;
}
3、onchange，当内容改变了，弹出提示框（hello，内容改变了）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body> <form>
<input type="text" onchange="changeDemo(this)">
</form>
<script>
function changeDemo(bg){
alert("Hello 内容改变了");
}
</script>
</body>
</html>
或者这样写，达到的效果是一样的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body> <form>
<input type="text" onchange="alert('hello 内容改变了')">
</form> </body>
</html>
4、onselect，当在文本框中写点内容，然后选中这些内容时，背景颜色会变成红色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body> <form>
<input type="text" onselect="demo(this)">
</form> <script>
function demo(bg){
bg.style.background="red";
}
</script> </body>
</html>
5、onfocus，当光标点击之后，背景变成蓝色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body> <form>
<input type="text" onfocus="demo(this)">
</form> <script>
function demo(bg){
bg.style.background="blue";
}
</script> </body>
</html>
6、onload，当网页加载完毕后弹出：网页加载完毕
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body onload="demo()">
<script>
function demo(bg){
alert("网页内容加载完毕");
}
</script> </body>
</html>
JS-事件处理的更多相关文章
- js事件处理 —— 详解
对于JS事件处理分为四部分: 1.html事件处理程序 直接添加到HTML结构中 解析:用html处理程序可以直接在button元素里直接调用,但是维护性不是很方便 <!DOCTYPE html ...
- js事件处理-整理
<!-- 作者:gentiana@163.com 时间:2016-3-10 描述:js事件处理 --> <!DOCTYPE html> <html> <hea ...
- Vue.js事件处理
Vue.js事件处理 1.v-on指令 用法如下:使用v-on:指令指定其执行的具体内容或者方法名即可. <button v-on:click='num++'>giao</butto ...
- Javascrpt 速成篇】 三：js事件处理
ie和chrome,firefox的事件处理,除了函数名字不同,基本大同小异.这样就已chrome为主了,对ie有兴趣的自己去百度.jquery已经处理不同浏览器兼容性问题,推荐使用. 事件处理有两种 ...
- JS事件处理函数中return false到底是什么东西
在<JS DOM编程艺术>一书中,用return false来阻止事件默认行为,可是js高程3里没有这种用法,那这到底是什么呢. 先看一下知乎的一个解释 就此问题,首先要纠正两个观点: 1 ...
- preventDefault, stopPropagation, return false -JS事件处理中的坑
我们以一个文件上传ui重设计为例子来探讨这几个函数的区别: 其中的html代码如下: <div class="file-upload"> <input type= ...
- React事件处理和原生JS事件处理
1.原生JS 事件触发调用有三种方式: 1. on[event]事件属性,手动触发 ❗️on[event]事件是Window对象上的方法. 2. on[event]事件属性,通过htmlElemen ...
- js事件处理、事件对象
事件类型分类: 1 添加在html结构中的事件 <div id="div1" onclick="alert('append click event in html' ...
- js事件处理机制
一.事件处理程序 a. DOM0级事件处理程序,被认为是元素的方法. var btn=document.getElementById('myBtn'); btn.onclick=functio ...
- js事件处理
1.js中常用的事件处理程序(event Handler) onabort 用户终止了页面的加载 onblur 用户离开了对象 onchange 用户修改了对象 onclick 用户点击了对象 one ...
随机推荐
- Android（java）学习笔记259：JNI之NDK开发步骤
1. NDK开发步骤(回忆一下HelloWorld案例): (1)创建工程 (2)定义native方法 (3)创建jni文件夹 (4)创建c源文件放到jni文件夹 (5)拷贝jni.h头文件到jni目 ...
- linux命令chown修改文件所有权
Changing User Ownership To apply appropriate permissions, the first thing to consider is ownership ...
- spring07 JDBC
1.创建对应的数据库 2.在MyEclipse中创建项目 引入需要的jar包 3.创建数据访问层 public interface StudentDao { //新增学生 int addStuden ...
- MVC bundles
Bundles用于打包CSS和javascript脚本文件,优化对它们的组织管理.显示模式则允许我们为不同的设备显示不同的视图. 减少请求数量和带宽,当然在开发调试时一般不开启.
- iOS中使用图片作为颜色的背景图
Objective-C: [UIColor colorWithPatternImage:[UIImage imageNamed:@"jpg"]]; Swift: UIColor(p ...
- LINQ动态查询类--[DynamicLinqExpressions]
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.L ...
- bat命令中的变量声明及使用
在bat文件中声明变量的方式如下: set xxx_variant_name=yyyyyyyyyyyy move D:\abc\efg\test.txt %xxx_variant_name%\test ...
- OpenStack点滴02-WSGI
OpenStack对外提供REST API,那么REST API是如何建立起来的呢? OpenStack用了一种叫WSGI(Web Service Gateway Interface)的东西,WSGI ...
- 【学习笔记】【oc】类和对象及类的三大基本特征
1.类和对象 类是抽象化,对象是具体化. (1)定义类: 分为两个步骤,类的声明:定义类的成员变量和方法:@interface 用于声明定义类的接口部分,@end表面定义结束:. 成员变量的定义:{} ...
- Git之detached HEAD
今天遇到了和CSDN上博主相同的问题,就是使用git -branch -a 发现自己处于一个零时的分支上.这篇博文写的不错,转载记录一下. 转载:http://blog.csdn.net/lili62 ...