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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
javascript实现评分功能
Jun 24 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 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使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
python中判断文件结束符的具体方法
2020/08/04 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
销售业务实习自我鉴定
2013/09/23 职场文书
师范大学音乐表演专业求职信
2013/10/23 职场文书
阿德的梦教学反思
2014/02/06 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
运动会运动员赞词
2015/07/22 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android