编程 Javascript

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简单事件处理和with用法介绍

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript String 的扩展方法集合

Jun 01 Javascript

javascript 动态添加事件代码

Nov 30 Javascript

JavaScript中String和StringBuffer的速度之争

Apr 01 Javascript

基于jquery的使ListNav兼容中文首字拼音排序的实现代码

Jul 10 Javascript

利用jQuery实现打字机字幕效果实例代码

Sep 02 Javascript

Bootstrap基本组件学习笔记之input输入框组(9)

Dec 07 Javascript

js 开发之autocomplete="off"在chrom中失效的解决办法

Sep 28 Javascript

详解基于 Nuxt 的 Vue.js 服务端渲染实践

Oct 24 Javascript

ES6 javascript中class静态方法、属性与实例属性用法示例

Oct 30 Javascript

详解Nuxt.js Vue服务端渲染摸索

Feb 08 Javascript

angularjs数组判断是否含有某个元素的实例

Feb 27 Javascript

Vue项目打包压缩的实现(让页面更快响应)

Mar 10 Javascript

js的.innerHTML = ""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