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 concat数组累加 示例
Sep 03 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 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引用地址改变变量值的问题
2012/03/23 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
python__name__原理及用法详解
2019/11/02 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
JSF的标签库有哪些
2012/04/27 面试题
保护动物倡议书
2014/04/15 职场文书
企业承诺书格式
2014/05/21 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
领导欢迎词范文
2015/01/26 职场文书
给老婆的检讨书
2015/01/27 职场文书
毕业实习证明范本
2015/06/16 职场文书
virtualenv隔离Python环境的问题解析
2022/06/21 Python