脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript事件处理

javascript简单事件处理和with用法介绍

 更新时间：2013年09月16日 10:10:12   作者：  
本文为大家介绍下javascript事件处理及with用法，主要是鼠标点击与移动，感兴趣的朋友可以参考下
这一期介绍一些简单的事件处理：
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>
您可能感兴趣的文章:

相关文章

  • 用innerhtml提高页面打开速度的方法

    用innerhtml提高页面打开速度的方法

    这篇文章介绍了用innerhtml提高页面打开速度的方法，有需要的朋友可以参考一下
    2013-08-08
  • JS实现购物车中商品总价计算

    JS实现购物车中商品总价计算

    这篇文章主要为大家详细介绍了JS实现购物车中商品总价的计算 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 微信小程序实现点击图片放大预览

    微信小程序实现点击图片放大预览

    这篇文章主要为大家详细介绍了小程序实现点击图片放大预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • JS与HTML结合使用marquee标签实现无缝滚动效果代码

    JS与HTML结合使用marquee标签实现无缝滚动效果代码

    这篇文章主要介绍了JS与HTML结合使用marquee标签实现无缝滚动效果代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • Javascript中Eval函数的使用说明

    Javascript中Eval函数的使用说明

    JavaScript有许多小窍门来使编程更加容易。 其中之一就是eval()函数，这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。
    2008-10-10
  • 音乐播放用的的几个函数

    音乐播放用的的几个函数

    音乐播放用的的几个函数...
    2006-09-09
  • 在网页中插入百度地图的步骤详解

    在网页中插入百度地图的步骤详解

    在企业网站中常会看到企业地址会显示在地图上，那么，如何实现这种功能呢？本篇文章就主要介绍在网页中插入百度地图的步骤，下面就随小编一起来看看吧
    2016-12-12
  • 使用flutter创建可移动的stack小部件功能

    使用flutter创建可移动的stack小部件功能

    本文主要介绍我为桌面和 Web 设计的一个超级秘密 Flutter 项目使用了画布和可拖动节点界面。本教程将展示我如何使用堆栈来使用小部件完成可拖动功能,需要的朋友可以参考下
    2021-10-10
  • js基于cookie方式记住返回页面用法示例

    js基于cookie方式记住返回页面用法示例

    这篇文章主要介绍了js基于cookie方式记住返回页面的用法,涉及javascript操作cookie及php针对cookie的判断技巧,需要的朋友可以参考下
    2016-05-05
  • 前端常用的4种请求方式实例总结

    前端常用的4种请求方式实例总结

    这篇文章详细介绍了GET、POST、PUT和DELETE四种HTTP请求方法的使用方式、优缺点及应用场景,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2025-01-01

最新评论