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网页制作特殊效果用随机数
May 22 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
JS函数重载的解决方案
May 13 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
React事件处理的机制及原理
Dec 03 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 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
php zend解密软件绿色版测试可用
2008/04/14 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
几种tab切换详解
2017/02/03 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
Python压缩和解压缩zip文件
2015/02/14 Python
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
党员年终民主评议的自我评价
2013/11/05 职场文书
项目经理任命书内容
2014/06/06 职场文书
关于旅游的活动方案
2014/08/15 职场文书
单位工资证明范本
2015/06/12 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
MySQL 数据类型详情
2021/11/11 MySQL
php访问对象中的成员的实例方法
2021/11/17 PHP
Python集合set()使用的方法详解
2022/03/18 Python