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+XML 操作
Sep 20 Javascript
javascript call方法使用说明
Jan 11 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
浅析node.js中close事件
Nov 26 Javascript
js实现两点之间画线的方法
May 12 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
eslint 的三大通用规则详解
May 16 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
JavaScript实现简单的音乐播放器
Aug 14 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实现通用alert函数的方法
2015/03/11 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
深入理解移动前端开发之viewport
2018/10/19 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python实现网站注册验证码生成类
2017/06/08 Python
利用aardio给python编写图形界面
2017/08/21 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
浅述python中深浅拷贝原理
2018/09/18 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
Python如何实现线程间通信
2020/07/30 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
公务员总结性个人自我评价
2013/12/05 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
2014年建筑工作总结
2014/11/26 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
入党介绍人考察意见
2015/06/01 职场文书