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 手机号码合法性验证代码集合
Sep 29 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
javascript常用的设计模式
Feb 09 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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入门速成(2)
2006/10/09 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
js 动态选中下拉框
2009/11/26 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
python 批量修改/替换数据的实例
2018/07/25 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
社会学专业求职信
2014/02/24 职场文书
cf战队收人广告词
2014/03/14 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
中华魂演讲稿
2014/05/13 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
银行业务授权委托书
2014/10/10 职场文书
食品安全责任书范本
2015/05/09 职场文书
2015年教师节主持词
2015/07/03 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
Django基础CBV装饰器和中间件
2022/03/22 Python
vue特效之翻牌动画
2022/04/20 Vue.js