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面象对象成员、共享成员变量实验
Nov 19 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
js判断是否是手机页面
Mar 17 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
关于Vue中axios的封装实例详解
Oct 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
php递归调用删除数组空值元素的方法
2015/04/28 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
python开发之for循环操作实例详解
2015/11/12 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
竞选副班长演讲稿
2014/04/24 职场文书
教研处工作方案
2014/05/26 职场文书
抗震救灾标语
2014/06/26 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
关于Vue中的options选项
2022/03/22 Vue.js