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 ...
随机推荐
- checkbox遍历操作, 提交所有选中项的值
<div class="content_list pad_10 hidden" > <h3>修改可配送地区</h3> <input typ ...
- Linux LVM 扩展磁盘分区
系统:centos 6.3--新建分区 fdisk -l /dev/sdc # 查看分区 fdisk /dev/sdc # 创建分区 :n ...
- python运行时间计算之timeit
timeit.timeit(stmt='pass', setup='pass', timer=<default timer>, number=1000000) stmt:statement ...
- Excel连接字符串(Oledb)
Excel的连接字符串参数详解 2011-07-27 15:43:50| 分类: 编程专栏 | 标签:excel 连接字符串 参数 含义 |字号大中小 订阅 程序中读取Excel ...
- RecycleView 滑动到底部，加载更多
android.support.v7 包提供了一个新的组件:RecycleView,用以提供一个灵活的列表试图.显示大型数据集,它支持局部刷新.显示动画等功能,可以用来取代ListView与GridV ...
- 进阶C#?
玩了几年的编程了,大四了.本来不想考研,我老师找我谈几次,最近准备考研.从一开始玩java,接触.net中的C#,aps.net,到接触linux,太多太多了. 本来我们专业不是纯计算机的,但是和计算 ...
- CSS 解决<td>里面内容太多把表格弄变形的原因，设置 自动换行。
1 < style="word-break:break-all"> 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congra ...
- 拿起cl.exe，放下IDE
笔者在这里介绍一种使用cl.exe编译源文件的方法,可以手动执行编译过程而不再依赖IDE,此外,笔者还介绍一些使用cl.exe编译简单源代码的方式. cl.exe是windows平台下的编译连接程序, ...
- asp.net执行cmd命令(包括第三方应用的命令行)
Process p = new Process(); p.StartInfo.FileName = "cmd.exe"; p.StartInfo.UseShellExecute = ...
- 【行为型】Interpreter模式
解释器模式意图为给定的语言定义其文法表示,同时定义该文法表示的一套解释器来解释语言中的句子.该模式说的简单通俗点,其主要用途是用来解释用的.至于解释什么,则要看具体的上下文环境.我们可以为一个表达式专 ...