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 相关文章推荐
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
vue prop属性传值与传引用示例
Nov 13 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 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
Terran热键控制
2020/03/14 星际争霸
网络资源
2006/10/09 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
php常用正则函数实例小结
2016/12/29 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
Python 实现随机数详解及实例代码
2017/04/15 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
python自动生成sql语句的脚本
2021/02/24 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
存储过程的优点有哪些
2012/09/27 面试题
品管员岗位职责
2013/11/10 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
球队口号
2014/06/18 职场文书
法人委托书范本
2014/09/15 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
教师节大会主持词
2015/07/06 职场文书