javascript简单事件处理和with用法介绍


Posted in Javascript onSeptember 16, 2013

这一期介绍一些简单的事件处理:
1.鼠标点击

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> New Document </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> <script type="text/javascript"> 
function click1(obj) 
{ 
alert(obj.innerHTML); 
} 
</script> 
</head> 
<body> 
<div onclick="click1(this)" style="cursor:pointer">点击我吧</div> 
</body> 
</html>

this即div的上下文,点击后会弹出<div>之间的内容。
2.鼠标移动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> New Document </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> <script type="text/javascript"> 
function mouse1(obj) 
{ 
obj.style.color = "#f00"; 
obj.style.fontSize = "18px" 
} 
function mouse2(obj) 
{ 
obj.style.color = "#000"; 
obj.style.fontSize = "16px" 
} 
</script> 
</head> 
<body> 
<div onmouseover="mouse1(this)" onmouseout="mouse2(this)">移动到这儿</div> 
</body> 
</html>

onmouseover鼠标放到那儿时,会把字体变大,字体成为红色,离开时字体和颜色恢复。
3.with用法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> New Document </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> <script type="text/javascript"> 
with(document) 
{ 
write("niujiabin"+"<br/>"); 
write("maybe"+"<br/>"); 
write("gossip"+"<br/>"); 
} 
</script> 
</head> 
<body> 
</body> 
</html>

效果与如下相同
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> New Document </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> <script type="text/javascript"> 
document.write("niujiabin"+"<br/>"); 
document.write("maybe"+"<br/>"); 
document.write("gossip"+"<br/>"); 
</script> 
</head> 
<body> 
</body> 
</html>
Javascript 相关文章推荐
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 #Javascript
js window.print实现打印特定控件或内容
Sep 16 #Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 #Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 #Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 #Javascript
异步动态加载js与css文件的js代码
Sep 15 #Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 #Javascript
You might like
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
three.js 入门案例详解
2018/01/23 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
Python FTP操作类代码分享
2014/05/13 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
Python类属性与实例属性用法分析
2015/05/09 Python
自己使用总结Python程序代码片段
2015/06/02 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
python scipy卷积运算的实现方法
2019/09/16 Python
python退出循环的方法
2020/06/18 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
服务标语大全
2014/06/18 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
依法行政工作汇报
2014/10/28 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
请病假条范文
2015/08/17 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
Mysql 一主多从的部署
2022/05/20 MySQL
Nginx安装配置详解
2022/06/25 Servers
一文解答什么是MySQL的回表
2022/08/05 MySQL