event事件对象(应用案例，比如阻止冒泡)

最新推荐文章于 2022-11-17 08:58:11 发布
最新推荐文章于 2022-11-17 08:58:11 发布
阅读量489 收藏
点赞数
文章标签： event 事件对象 阻止冒泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czh500/article/details/84945636
版权

event事件对象(应用案例，比如阻止冒泡)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示event事件对象(应用案例，比如阻止冒泡)-雪豹软件工作室</title>
<link rel="stylesheet" type="text/css" href="body.css">
<style type="text/css">

body {
	color: black;
	font-weight: bold;
}

input {
	width: 80%;
	height: 40px;
	border: 2px solid #8E388E;
	border-radius: 5px; /*设置边框的4个直角变成圆角有弧度*/
	font-weight: bold; /*文本框中的文本字体加粗*/
	color: blue;
}

input[type=button] {
	width: auto;
	color: white;
	background-color: #8E388E;
}

input[type=checkbox] {
	width: 16px;
	height: 16px;
}

h2 {
	color: red;
	text-algin: center;
	vertical-align: middle;
	display: inline;
}

div {
	background: #f0f0f0;
	width: 98%;
	height: 100px;
	border: solid 3px #8E388E;
	border-radius: 5px;
	margin: 0 auto;
	text-align: center;
	height: auto;
}

span {
	border: solid 3px #CD0000;
	border-radius: 5px; /*圆角弧度*/
	text-align: center;
	width: 300px;
	height: 60px;
	display: block; /*对span设置display属性等于block后，span就会变成独占一行，span元素的前后内容会换行*/
	display: inline-block; /*即能实现span宽度和高度生效，又让span元素前后内容不换行*/
}

.myDiv {
	border: solid 3px black;
}

.myDiv2 {
	border: solid 3px green;
}

.myDiv3 {
	border: solid 3px blue;
}
</style>

<script type="text/javascript">
	/**
	 参考网页 http://www.jb51.net/article/48935.htm
	 参考网页http://www.itxueyuan.org/view/6340.html
	 参考网页http://www.w3school.com.cn/jsref/dom_obj_event.asp
	 */

	/**
	 * 关于事件对象，以下这篇文章写得很详细，可以参考
	 参考文章http://www.jb51.net/article/26552.htm
	 */

	function testEvent() {
		alert(window.event);
	}

	function testFirefoxEvent() {
		/**
		既然匿名函数的event传入了，那么在该闭包中clk是可以获取到event的，事实上点
		击后Firefox会报错：event is not defined。猜测该匿名函数的闭包和function clk(){alert(event);}不
		是同一个闭包环境
		 */
		alert(arguments.callee.caller);
		alert(event);
	}

	function testFirefoxEvent2(arg1, arg2) {
		alert(arguments.callee.caller);
		alert(arg1);
		alert(arg2);
		alert("arguments[0]" + arguments[0]);
	}

	
	/*
	CSS、Display(显示)与 Visibility(可见性)参考http://www.runoob.com/css/css-display-visibility.html
		display
	　　　　隐藏必须使用none值，该隐藏不占位，页面源代码可见。
	　　　　显示可使用空或block或inline，意思分别为：无此属性、显示视为div（有换行符）、显示视为span（无换行符）。
	    
		visibility
　　　　	隐藏必须使用hidden值，该隐藏占位，页面源代码可见。
　　　　	显示可使用空或visible，意思分别为：无此属性、显示。
	*/
	
	//显示或隐藏div(display的方式不会占位置)
	function showOrHideElement1(elementId) {
		var divNode = document.getElementById(elementId);
		if (divNode.style.display == "none") {
			divNode.style.display = "block";
		} else {
			divNode.style.display = "none";
		}
	}

	//显示或隐藏div(visibility的方式始终会占位置)
	function showOrHideElement2(elementId) {
		var divNode = document.getElementById(elementId);
		if (divNode.style.visibility == "hidden") {
			divNode.style.visibility = "visible";
		} else {
			divNode.style.visibility = "hidden";
		}
	}
	
	//给每一个文本框的边框设置随机颜色
	function randomColor(){
		//定义一个颜色的数组
		var colors = new Array("red", "blue", "#228B22", "#8E388E", "#5B5B5B", "#0A0A0A");
		var inputNodes = document.getElementsByTagName("input");
		for (var index = 0; index < inputNodes.length; index++) {
			if (inputNodes[index].type == "text") {
				//随机设置文本框元素的边框颜色
				inputNodes[index].style.border = "3px solid " + createRandomColor(colors);
			}
		}
	}
	
	//产生随机颜色
	function createRandomColor(colorArray){
		//产生随机数
		var randomNumber = Math.round(Math.random() * (colorArray.length - 1));
		return colorArray[randomNumber];
	}
	
	//阻止元素(在这里是指点击的那个复选框)的默认行为
	function testCheckBox(e){
		//阻止元素的默认行为
		window.event ? window.event.returnValue = false : e.preventDefault();
	}
	
</script>

</head>
<body onload="randomColor()">

	<div id="div1">
	<h2>演示阻止元素的默认行为-雪豹软件工作室</h2><br>
	爱好1上网<input type="checkbox" onclick="testCheckBox(event)">&nbsp;&nbsp;
	爱好2看书<input type="checkbox" onclick="testCheckBox(arguments[0])">&nbsp;&nbsp;
	<br> <br>
		<h2>演示event事件对象(应用案例，比如阻止冒泡)-雪豹软件工作室</h2>
		<br> <br>
		<h2>演示div层的visibility属性和display属性的区别</h2>
		<br> <br>
	</div>
	<br>
	<div class="myDiv3">
		<br> <input type="button" value="点击我-显示隐藏层(display的方式不会占位置)"
			onclick="showOrHideElement1('div1')"> <br> <br>
	</div>
	<br>你们去改变世界，我只想认真赚钱!
	<span id="span1">我是span1</span>在你存款没100万前，你所有的爱好跟理想都应该是赚钱!
	<span id="span2">我是span2</span>小伙伴们，当务之急我们要做的只有一件事情，那就是拼命努力认真的赚钱！
	<br>
	<br>
	<input type="button" value="点击我-显示隐藏span(display的方式不会占位置)"
		onclick="showOrHideElement1('span1')">
	<br>
	<br>

	<input type="button" value="点击我-显示隐藏span(visibility的方式始终会占位置)"
		onclick="showOrHideElement2('span2')">
	<br>
	<br>

	<div id="div2" class="myDiv">
		<br> <br> <input type="text" value="点击我执行点击事件代码,火狐不支持"
			onclick="alert(window.event.type);"> <br> <br> <input
			type="text" value="点击我执行点击事件代码,支持IE，以前不支持火狐，现在支持火狐了"
			onclick="alert(event.type);"> <br> <br> <input
			type="text"
			value="我们可以通过Function的一个属性argumengs获取到该匿名函数的第一个参数，而该参数就是事件对象"
			onclick="alert(arguments[0].type);"> <br> <br> <input
			type="text" value="把匿名函数打印出来" onclick="alert(arguments.callee);">
		<br> <br> <input type="text" value="调用方法获取事件对象,火狐不支持"
			onclick="testEvent()"> <br> <br> <input type="text"
			value="因为在Firefox中匿名函数是具有event参数" onclick="testFirefoxEvent()">
		<br> <br> <input type="text" value="通过显示的参数传入"
			onclick="testFirefoxEvent2(this,arguments[0])"> <br> <br>
	</div>
	<br>
	<div id="div3" class="myDiv2">
		<br> <br> <input type="button"
			value="点击我-显示隐藏层(visibility的方式始终会占位置)"
			onclick="showOrHideElement2('div2')"> <br> <br>
	</div>

</body>
</html>

程宇寒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 事件冒泡简介及应用
12-10
一、什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个...
Event对象的常见应用
qq_39075021的博客
05-17 1122
1、event.preventDefault() 用于取消事件的默认行为，将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。 例如，如果 type 属性是 "submit"的表单提交，a标签的默认行为是跳转到对应的URL，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单和链接跳转。 注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。 2、event.st
event 对象的常见应用
ikEason_的博客
02-27 268
event 对象的常见应用 1. event.preventDefault(); // 阻止默认行为，阻止 a 链接默认的跳转行为 2. event.stopPropagation(); // 阻止冒泡 3. event.stopImmediatePropagation(); // 按钮绑定了 2 个响应函数，依次注册 a,b 两个事件， 点击按钮，a 事件中加 event.stopImmediatePropagation()就能阻止 b 事件 4. event.currentTarget // 早期的
华为快应用 阻止事件冒泡
zk_csdn917的博客
07-23 383
直接看官方文档
event案例
bingmo_的博客
10-12 131
<html> <head> <title>event案例</title> <meta charset="UTF-8"/> <style type="text/css"> #showdiv{ width: 50%; ...
JS阻止事件冒泡的方法详解
01-19
<%@ Page Language=C# AutoEventWireup=true CodeFile=Default5.aspx.csInherits=Default5%> <!DOCTYPE ...<... <head runat=server>...Porschev--
JavaScript捕捉事件和阻止冒泡事件实例分析
12-03
事件的冒泡：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的...
JQuery中阻止事件冒泡几种方式及其区别介绍
12-09
JQuery 提供了两种方式来阻止事件冒泡。 方式一：event.stopPropagation(); 代码如下: $(“#div1”).mousedown(function(event){ event.stopPropagation(); }); 方式二：return false; 代码如下: $(“#div1”)....
Jquery阻止事件冒泡 event.stopPropagation
10-28
帮朋友写了一个小效果，单击标签后标签变色并添加一个叉的图片，点击叉标签恢复原样，具体效果请点击下面的result
同步对象Event的用法
chinaclock的专栏
07-05 2662
<br /><br /><br />首先介绍CreateEvent是创建windows事件的意思，作用主要用在判断线程退出，线程锁定方面.<br />CreateEvent函数功能描述：创建或打开一个命名的或无名的事件对象.<br />EVENT有两种状态：发信号，不发信号。 <br />SetEvent/ResetEvent分别将EVENT置为这两种状态分别是发信号与不发信号。 <br />WaitForSingleObject()等待(阻塞)，直到参数所指定的OBJECT成为发信号状态时才返回，OBJE
7.event 对象的常见应用？
yezi153的博客
11-13 307
1、event.preventDefault(); // 阻止默认行为,例如阻止 a 链接默认的跳转行为，阻止表单提交 阻止a链接的默认跳转行为阻止表单提交 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name..
【快应用】小程序转快应用如何阻止事件向上冒泡
华为开发者联盟
11-17 315
小程序转快应用，在快应用中使用view标签包裹两层，在每层都写了一个点击事件，在点击最里面的一个button按钮的时候会触发所有view标签上绑定的点击事件，该如何处理才能只触发一个button按钮的事件呢？bind 事件绑定不会阻止冒泡事件向上冒泡，所以在点击最里面的一个层级后，会触发所有的事件，要想只触发对应的事件可以使用catch事件绑定来阻止向上冒泡。欲了解更多更全技术文章，欢迎访问。
事件对象Event的使用
牧秦丶
06-18 1434
最近使用到Event，做一下总结。 1、对象的创建： 创建了一个匿名的初始状态为“无信号”状态的Event。 HANDLE _hEvent = ::CreateEvent(NULL, FALSE, FALSE, NULL); 2、信号状态切换： ::SetEvent(_hEvent); // 设置为有信号状态. ::ResetEvent(_hEv
阻止冒泡的方法 event.stopPropagation();
waterDjj的博客
08-16 832
标准浏览器 和  ie浏览器    w3c的方法是event.stopPropagation()         IE则是使用event.cancelBubble = true       bubble   冒泡  泡泡       cancel 取消   兼容的写法：   if(event && event.stopPropagation)         {            
EVENT事件-------阻止冒泡+阻止默认
m0_51272779的博客
05-26 222
EVENT事件-------阻止冒泡+阻止默认
js中的event.stopPropagation()阻止冒泡用法和event.preventDefault()用法
qq_40407998的博客
09-09 780
event.preventDefault()的作用是阻止一些默认的行为，比如点击链接不会跳到对应的地址； var link = document.getElementById('myLink'); link.onclick = function(event){ event.preventDefault(); } event.stopPropagation()的作用是阻止事件冒泡； var btn = document.getElementById('myBtn'); document.onclic
Event事件案例
weixin_42971706的博客
10-31 245
没什么好多说的，字面意思，wait等待，set发出开启信号。 from multiprocessing import Process,Event #from threading import Event import time def stu(name): print('%s 上课中' % name) event.wait() # 参数为超时等待的时间 秒为单位 pr...
如何阻止事件冒泡
热门推荐
庸人方自扰，自在就好
01-27 1万+
1、事件处理过程中，阻止了事件冒泡，但不会阻止默认行为（执行超链接的跳转）2、事件处理过程中，阻止了事件冒泡，也阻止了默认行为（不执行超链接的跳转）3、事件处理过程中，不阻止事件冒泡，但阻止默认行为（父元素以上全部会触发该事件，但不执行超链接跳转）
百度地图API的事件处理：覆盖物阻止冒泡
最新发布
05-16
如果要阻止事件冒泡，可以在事件处理函数中调用event对象的stopPropagation()方法。 例如，假设有一个覆盖物marker，可以通过以下方式阻止点击事件冒泡： ``` marker.addEventListener('click', function(event){ ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值