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标签的各种事件的举例的更多相关文章

  1. 原生js怎么为动态生成的标签添加各种事件

    这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...

  2. js控制a标签点击事件 触发下载

    问题背景,动态获取data把url赋值到a标签的url中,让a标签自动下载 首先想到的应该是$('xxx').click(), 查资料明白:js中的$(...).click()事件只能触发绑定的onC ...

  3. js之DOM和事件

    DOM 查找 直接查找 var obj = document.getElementById('i1') 间接查找 文件内容操作: innerText 仅文本 innerHTML 全内容 value i ...

  4. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  5. 解决IE6下a标签的onclick事件里的超链接不跳转问题

    今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location=url"> ...

  6. js模拟点击事件实现代码

    js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...

  7. 在js中绑定onclick事件为什么不加括号,在html代码中必须要加?

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js click 与 onclick 事件绑定,触发与解绑

    click 与 onclick 1.onclick 事件会在对象被点击时发生. <input id="btn1" type="button" onclic ...

  9. js闭包 选择器 面向对象 事件 操作页面

    闭包js函数的嵌套定义,定义在内部的函数 就称之为闭包为什么使用闭包: 1.一个函数要使用另一个函数的局部变量 2.闭包会持久化包裹自身的函数的局部变量 3.解决循环绑定 function outer ...

随机推荐

  1. jsoup爬取图片到本地

    因为项目需求,需要车辆品牌信息和车系信息,昨天用一天时间研究了jsoup爬取网站信息.项目是用maven+spring+springmvc+mybatis写的. jsoup开发指南地址:http:// ...

  2. linux的nvme驱动参数调优

    nvme的设备,可以调优的参数比较少,相关的代码如下: blk_sysfs.c static struct queue_sysfs_entry queue_requests_entry = { .at ...

  3. TF-卷积函数 tf.nn.conv2d 介绍

    转自 http://www.cnblogs.com/welhzh/p/6607581.html 下面是这位博主自己的翻译加上测试心得 tf.nn.conv2d是TensorFlow里面实现卷积的函数, ...

  4. sql 时间转换问题 from_unixtime() UNIX_TIMESTAMP()

    http://blog.csdn.net/test_soy/article/details/50328367 from_unixtime()是MySQL里的时间函数 date为需要处理的参数(该参数是 ...

  5. mysql主从同步(4)-Slave延迟状态监控

    mysql主从同步(4)-Slave延迟状态监控  转自:http://www.cnblogs.com/kevingrace/p/5685511.html 之前部署了mysql主从同步环境(Mysql ...

  6. JVM-垃圾收集的过程

    JDK1.7 JVM的垃圾收集算法有 1. 标记-清除算法: 2. 复制算法:在商业虚拟机都是使用这种算法来回收新生代的 3. 标记-整理算法: JDK1.7 JVM的垃圾收集器有 1. Serial ...

  7. python 闭包初识

    def func_100(val): passline = 60 if val >= passline: print('pass') else: print('failed') def func ...

  8. File类实现文件夹和文件复制

    package com.jcy.copy; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFou ...

  9. Java多线程之线程的同步

    Java多线程之线程的同步 实际开发中我们也经常提到说线程安全问题,那么什么是线程安全问题呢? 线程不安全就是说在多线程编程中出现了错误情况,由于系统的线程调度具有一定的随机性,当使用多个线程来访问同 ...

  10. 【转】awk数组操作

    转自:http://blog.csdn.net/wangran51/article/details/9168361 用awk进行文本处理,少不了就是它的数组处理.那么awk数组有那些特点,一般常见运算 ...