event事件对象(应用案例，比如阻止冒泡)
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)">
爱好2看书<input type="checkbox" onclick="testCheckBox(arguments[0])">
<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>