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实现真正的ViewPager【平滑过渡】+【循环滚动】！！！顺带还有【末页跳转】。
实现真正的ViewPager[平滑过渡]+[循环滚动]!!!顺带还有[末页跳转]. 首先呢, 我要对网上常见的3种ViewPager的循环滚动方法做个概述.急需看真正实现方法的同志请选择性忽略下面这一 ...
- HDU -2670 Girl Love Value
这道题是刚好装满的背包问题,刚好选取k个,状态转移方程为dp[i][j] = max( dp[i - 1][j], dp[i - 1][j - 1] + Li - Bi(j - 1) ) dp[i][ ...
- N皇后问题--递归回溯
著名的N皇后问题,就是先按照行一行一行的找,先找第一行,第一行找到一列能满足条件,继续找下一行,如果下一行也找到一列能满足条件,继续找下一行,一次类推,最终找到解, 但是,如果找不到的话, 就说明上一 ...
- SpringMVC03controller中定义多个方法
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- JY05-JavsScript-JS基础01
JavaScript第一天 1.前端三层 HTML 结构层 语义 骨架 css 表现层 审美 衣服 JavsScript 行为层 行为交互 动作 2.转义字符\r\n\t \r return 回 ...
- 织梦DEDECMS {dede:field name='position'/}标签增加其它属性的
在默认情况下,织梦(DedeCms)系统当前位置的调用标签为: {dede:field name='position'/} 在这种默认的情况下,生成后的代码大致为如下格式: 主页 > 应用软件 ...
- Asp.Net Api2 过滤器的使用
1.注意: apiController控制器 对应的过滤器System.Web.Http.Filters.ActionFilterAttribute的过滤器 MVC的Controller控制器 对应的 ...
- MVC bundles
Bundles用于打包CSS和javascript脚本文件,优化对它们的组织管理.显示模式则允许我们为不同的设备显示不同的视图. 减少请求数量和带宽,当然在开发调试时一般不开启.
- 按钮点击效果jquery
<html><head> <meta charset="UTF-8"> <title>QQ</title> <me ...
- PHP自定义弹出消息类，用于弹出提示信息并返回
一个用PHP自写的弹出消息类,用于在程序出错时弹出提示,,弹出警告框,或在程序运行到某阶段的快捷提示,需用时只需传入参数即可,函数并不复杂,但觉得挺实用.具体代码: function Alert($a ...