事件处理函数

最新推荐文章于 2023-07-23 23:35:39 发布
最新推荐文章于 2023-07-23 23:35:39 发布
阅读量2.1k 收藏 3
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37288477/article/details/80363166
版权

事件处理函数的作用是，在特定事件发生时调用特定的JavaScript代码，

例如，如果想在鼠标指针悬停在某个元素上时触发一个动作，就需要使用onmouseover事件处理函数，

如果想在鼠标指针离开某个元素时触发一个动作，就需要使用onmouseout事件处理函数，

鼠标点击时需要使用onclick事件处理函数；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>Snapshots</h1>
		<ul>
			<li>
				<a href="img/1.jpg"  οnmοuseοver="showpic(this); return false;" title="1" >风景</a>
			</li>
			<li>
				<a href="img/2.jpg"  οnmοuseοver="showpic(this); return false;"  title="2">风景2</a>
			</li>
			<li>
				<a href="img/3.jpg"  οnmοuseοver="showpic(this); return false;" title="3">风景3</a>
			</li>
			<li>
				<a href="img/4.jpg"  οnmοuseοver="showpic(this); return false;"  title="4">火影</a>
			</li>
			<img id="placehodler" src="img/5.jpg" alt="my image gallery" />
		</ul>
	     <p id="description">choose an image</p>
	    <a href="http://www.baidu.com/" class="name">百度</a>
	</body>
	<script type="text/javascript" >
			
			function showpic(whichpic)
			{
				var sour =whichpic.getAttribute("href");
				var placehodler =document.getElementById("placehodler");
				placehodler.setAttribute("src",sour);
				var text =whichpic.getAttribute("title");
				var description=document.getElementById("description");
				description.firstChild.nodeValue=text;
			}
			function popUp(winURL){
				window.open('http://www.baidu.com/',"name","width=320,height=480");
			}
			window.οnlοad=prepareLinks;
			function prepareLinks()
			{     if(!document.getElementsByTagName)return false;
				var links =document.getElementsByTagName("a");
				for(var i=0;i<links.length;i++)
				{
					if(links[i].getAttribute("class")=="name")
					{
						links[i].οnclick=function(){
							popUp(this.href);return false;
						}
					}
				}
			}
	  
	    

	</script>
	<style>
		#placehodler{
			width: 50%;
		}
		body{
			font-family: helvetica;
			color: #333;
			background-color: #ccc;
			margin: 1em 10%;
		}
		a{
			color: #060;
			background-color: transparent;
			font-weight: bold;
			text-decoration: none;
		}
		ul{
			padding: 0;
		}
		li{
			float: left;
			padding: 1em;
			list-style: none;
		}
		img{
			display: block;
			clear: both;
		}
	</style>
	
</html>

这段代码实现的是加载图片是在原页面加载，而且是当把鼠标移上去就可以改变。


温清夜
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
anm-css-js-lib:CSS相关函数库
07-02
anm-css.js 用于处理 CSS 的客户端 Javascript 函数库。
set-an-image-rotation-angle.rar_图形图像处理_matlab_
08-11
功能函数可以任意设置角度对图像进行旋转，程序简单可运行，运行结果好
python 中的int()函数怎么用
12-25
int(x, [base]) 功能： 函数的作用是将一个数字或base类型的字符串转换成整数。 函数原型： int(x=0) int(x, base=10)，base缺省值为10，也就是说不指定base的值时，函数将x按十进制处理。 适用Python版本： Python2.x Python3.x 注意： 1. x 可以是数字或字符串，但是base被赋值后 x 只能是字符串 2. x 作为字符串时必须是 base 类型，也就是说 x 变成数字时必须能用 base 进制表示 Python英文文档解释： class int(x=0) class int(x, base=10) Return an
2021-08-16事件一如何绑定事件处理函数 事件处理程序运行环境 解除事件处理程序
weixin_47628654的博客
08-16 108
1.句柄的方式： 2.addEventListener（事件类型，处理函数。false） 一个事件可以绑定多个处理程序：按顺序执行 若两个一样的执行函数：执行两个，长得一样，但是地址不一样 但是，这里的test是一个人，所以只执行一遍 3.div.attachEvent（“onclick”,function（）） 功能和addeventlistenr（“click”，fn,false）一样，但这个更强大，同一个函数绑定多次，也能执行（但只能IE用） 例题：注意闭包，要用立即执行函数解决： .
QT——事件处理机制
静水流深且细水长流
11-10 1202
它反映了包括Qt在内的GUI应用程序的消息处理模型：   (1) 用户操作界面，被操作系统内核空间中的设备驱动程序感知   (2) 设备驱动程序向操作系统的用户空间的GUI应用程序发出系统消息   (3) GUI应用程序将系统消息转换为信号，进而触发槽函数 在GUI应用程序中，一个核心且关键的操作就是将系统消息转换为信号，涉及到Qt的事件处理机制：   (1) Qt平台将系统底层发来的消息转换为...
C++Qt开发——事件处理函数
m0_60259116的博客
11-11 2971
C++Qt开发——事件处理函数
事件函数
chibie1640的专栏
05-21 546
原文链接：https://docs.unity3d.com/Manual/EventFunctions.html 在Unity中，脚本不像传统意义的程序。那些程序都在一个循环里不停地地运行，直到它完成了自己的工作。相反的，Unity通过调用已声明了的函数，间歇性地把控制权交给脚本。一...
javascript主要事件表
szl_lxy
09-08 389
onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。 鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。 鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。 当网页中的对象获得聚点时，执行onfocus调用
事件处理函数的this
04-17
NULL 博文链接：https://yxc-gdut.iteye.com/blog/1814757
JQuery入门——用bind方法绑定事件处理函数应用介绍
10-27
bind()功能是为每个选择元素的事件绑定处理函数,感兴趣的你可以了解下它的语法bind(type, [data], fn),参数data是作为event.data属性值传递对象的额外数据对象,好好学习希望本可以帮助到你
js 事件处理函数间的Event物件是否全等
10-28
在非IE，事件对象Propagation之间的处理函数，或同dom节点触发的多个函数之间的Event物件是全等的。与绑定形式[addEventListener/DOM0]无关。
JS中关于事件处理函数名后面是否带括号的问题
11-27
　DOM 0级事件处理一般是直接把一个函数分配给一个事件处理程序，既可以在元素中直接分配一个事件处理程序，如方式一所示;也可以在脚本中把函数分配给事件处理程序，如方式二所示。 <!--方式一--> <div ...
DOM事件处理函数、DOM0，DOM2的优缺点
01-08
目录（一）定义（二）HTML事件处理函数① 特点② 缺点（三）DOM0级事件处理函数① 使用② 删除③ 缺点（四）DOM2级事件处理函数① 使用② 删除③ 注意 （一）定义 事件就是用户或者浏览器自身执行的某种行为，例如...
#607 – 实例的事件处理函数vs. 类的事件处理函数(An Instance Handler vs. A Class Handler)
Milo的专栏
01-06 404
在WPF中，你定义一个事件的处理函数，通常是一个类的实例的触发的事件进行处理——比如点击某个按钮后执行该按钮注册的事件响应函数。例如下面的代码，为一个Button类的实例定义一个事件处理函数。 你也可以定义类的事件处理函数，对应所有这个类型的实例，而不是单个实例（使用RegisterClassHandler 静态函数）。任何一个实例触发事件都会执行这个事件处理函数。 举个例子，我们可以定
16-js事件的部分内容
weixin_41452476的博客
11-10 692
1 事件–事件对象 1 事件: 对某个元素的某种操作 2 事件对象：当某个事件触发时产生的对象，就是事件对象。 3 event使用前提，必须有事件 不同的事件产生的事件对象不同。 4 事件对象的兼容： var e = evt || event; 5 事件对象拥有该事件相关的属性和方法 6 事件处理函数,事件触发了,函数的代码就会执行,执行的时候,函数调用的时候 通过arguments.length 可以得出：事件处理函数中实际上都是有一个参数的 这个参数和事件有关系 是一个对象
07_事件处理
述安的博客
09-21 135
文章目录1.事件的基本使用 1.事件的基本使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>事件的基本使用</title> <!-- 引入Vue --> <script src="../js/vue.js" type="text/javascript"></script> </head&
Asynq包
最新发布
m0_64304174的博客
07-23 273
当我们第二次启动程序时，队列再次收到新来的任务后，会将任务转发给任务处理器，任务处理器收到请求，处理任务，任务包含新来的任务和第一次挤压在队列中的任务，所以任务会执行两次。Asynq是Go的一个包，可用作消息队列，延时任务。*********************************同样可以注册到任务处理函数*********************************************以上为任务处理器的实现，如果有多个任务类型和对应的任务处理函数**************
Qt重写鼠标事件处理函数
05-17
在Qt中，可以通过重写QWidget的鼠标事件处理函数来处理鼠标事件。具体步骤如下： 1. 在你的自定义QWidget类中重新实现鼠标事件处理函数。例如： ```c++ void MyWidget::mousePressEvent(QMouseEvent *event) { //...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值