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 相关文章推荐
jQuery登陆判断简单实现代码
Apr 21 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
PHP 中dirname(_file_)讲解
2007/03/18 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
js计算精度问题小结
2013/04/22 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
Python快速从注释生成文档的方法
2016/12/26 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
Django values()和value_list()的使用
2020/03/31 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
妈妈的账单教学反思
2014/02/06 职场文书
企业口号大全
2014/06/12 职场文书
五五普法心得体会
2014/09/04 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
大学生在校表现评语
2014/12/31 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书