JS标签的各种事件的举例
1.鼠标单击事件( onclick ）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单击事件 </title>
<script type="text/javascript">
function openwin(){
window.open('http://www.cnblogs.com/lonecloud/','_blank','height=600,width=400,top=100,toolbar=no,left=0,menubar=no,scrollbars=no,status=no');}
</script>
</head>
<body>
<form>
<input name="点击我" type="button" value="点击我" onClick="openwin()"/>
</form>
</body>
</html>
2.鼠标经过事件（onmouseover）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
function message(){
confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定"onmouseover="message()"/>
</form>
</body>
</html>
3.鼠标移开事件（onmouseout）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移开事件 </title>
<script type="text/javascript">
function message(){
alert("不要移开，点击后进入我的博客!"); }
</script>
</head>
<body>
<form>
<a href="http://www.imooc.com" onmouseout="message()">点击我</a>
</form>
</body>
</html>
4.光标聚焦事件（onfocus）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
<script type="text/javascript">
function message(){
alert("请选择，您现在的职业！");
}
</script>
</head>
<body>
请选择您的职业：<br>
<form>
<select name="career" onfocus="message()">
<option>学生</option>
<option>教师</option>
<option>工程师</option>
<option>演员</option>
<option>会计</option>
</select>
</form>
</body>
</html>
5.失焦事件（onblur）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
function message(){
alert("请确定已输入密码后，在移开!"); }
</script>
</head>
<body>
<form>
用户:<input name="username" type="text" value="请输入用户名！" onblur="message()" >
密码:<input name="password" type="text" value="请输入密码！" >
</form>
</body>
</html>
6.内容选中事件（onselect）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
function message(){
alert("您触发了选中事件！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>
7.文本框内容改变事件（onchange）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
function message(){
alert("您改变了文本内容！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5"onChange="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>
8.加载事件（onload）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
function message(){
alert("加载中，请稍等…"); }
</script>
</head>
<body onload="message()">
欢迎学习JavaScript。
</body>
</html>
9.卸载事件（onunload）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗？");
}
</script>
</head>
<body onunload="onunload_message()">
欢迎学习JavaScript。
</body>
</html>
JS标签的各种事件的举例的更多相关文章
- 原生js怎么为动态生成的标签添加各种事件
这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...
- js控制a标签点击事件 触发下载
问题背景,动态获取data把url赋值到a标签的url中,让a标签自动下载 首先想到的应该是$('xxx').click(), 查资料明白:js中的$(...).click()事件只能触发绑定的onC ...
- js之DOM和事件
DOM 查找 直接查找 var obj = document.getElementById('i1') 间接查找 文件内容操作: innerText 仅文本 innerHTML 全内容 value i ...
- js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
- 解决IE6下a标签的onclick事件里的超链接不跳转问题
今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location=url"> ...
- js模拟点击事件实现代码
js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...
- 在js中绑定onclick事件为什么不加括号，在html代码中必须要加？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js click 与 onclick 事件绑定,触发与解绑
click 与 onclick 1.onclick 事件会在对象被点击时发生. <input id="btn1" type="button" onclic ...
- js闭包 选择器 面向对象 事件 操作页面
闭包js函数的嵌套定义,定义在内部的函数 就称之为闭包为什么使用闭包: 1.一个函数要使用另一个函数的局部变量 2.闭包会持久化包裹自身的函数的局部变量 3.解决循环绑定 function outer ...
随机推荐
- 让自己写的项目支持Cocoapods管理
学会使用别人的 Pods 依赖库以后, 你一定对创建自己的依赖库很有兴趣吧,现在我们一起来制作自己的Pods依赖库. 1.创建自己的 github 仓库 上图中标识出了6处地方 Repository ...
- 流程控制语句if、else、elif、break、continue
1.控制流程 # if 判断语句 a = 12 if a>0: print('a大于0') if a<5: print('a大于5') else: print('哈哈哈') 2.基本形式: ...
- TCP socket 多线程 并发服务器（发送）与客户端（接收）
实现功能:Ubuntu上通过多线程实现服务器并发给客户端发送文件,携带包头,根据包头信息命名新文件.适用于短连接. 问题小结: 01. 调用嵌套在结构体中的结构体char 数组成员时,需要动态分配内存 ...
- linux pagecache限制与查看
在linux服务器使用过程中,由于linux对内存的使用原则是能cache就尽量cache,所以会出现pagecache占用很多的情况. suse的版本有一个pagecachelimit的功能,cen ...
- 使用vue 遇到的问题————— 解决手机实时显示项目
Vue项目文件组织架构: src文件夹存放源代码. Static文件夹存放第三方静态资源. git将项目上传github http://blog.csdn.net/laozitianxia/ ...
- 初次真正意义上的接触Eclipse
以前就玩安卓app 用过很多软件比如e4a,iapp,aide,lua,但是这都不是真正意义上的安卓编程软件.大二的时候用过Androidstudio,那个软件配置起来太难了,就搁置了. 这次利用机智 ...
- python3 第十五章 - 数据类型之Sets（集合）
python的官网里对集合的描述是: Python also includes a data type for sets. A set is an unordered collection with ...
- MySQL如何选择合适的引擎以及引擎的转换。
我们怎么选择合适的引擎?这里简单归纳一句话:"除非需要用到某些InnoDB不具备的特性,并且没有其他办法可以替代,否则都应该优先选择InnoDB引擎." 除非万不得已,否则不建议混 ...
- Java常用类--处理日期
Date Date类在java.util包中.使用Date类的无参数构造方法创建的对象可以获取本地当前时间.一般来说,也只使用这个.因为date的很多方法都已经不推荐使用了,所以Date的功能大大的消 ...
- Mysql Innodb 锁机制
latch与lock latch 可以认为是应用程序中的锁,可以称为闩锁(轻量级的锁) 因为其要求锁定的时间必须要非常短,若持续时间长,则会导致应用性能非常差,在InnoDB存储引擎中,latch又可 ...