<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.message {
width: 500px;
height: 500px;
padding: 1px;
font-size: 12px;
background-color: #999999;
overflow: auto;
}
.txts {
width: 496px;
height: 100px;
background-color: #0095BB;
}
</style>
<script type="text/javascript">
window.onload = function() {
var msg = document.getElementById("message");
var txts = document.getElementById("txts");
var btn = document.getElementById("btn");
btn.onclick = txts.onkeydown = function(e) {
var ev = e || window.event;
if(ev.type == "click" || (ev.type == "keydown" && ev.keyCode == "13" && ev.ctrlKey)) {
var eleP = document.createElement("p");
eleP.innerHTML = txts.value;
msg.appendChild(eleP);
txts.value = "";
txts.focus();
}
}
}
</script>
</head>
<body>
<div id="message" class="message">
<h3>留言板</h3>
<hr/>
</div>
<form name="msgForm">
<textarea class="txts" name="txts" id="txts">
</textarea>
<input class="btn" id="btn" type="button" value="提交"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.out {
width: 300px;
height: 300px;
border: 1px solid red;
padding: 20px;
}
.inner {
width: 150px;
height: 150px;
background-color: #999999;
}
</style>
<script type="text/javascript">
window.onload = function() {
var out = document.getElementById("out");
var inner = document.getElementById("inner");
//添加事件
out.addEventListener("click", fn1, true);
inner.addEventListener("click", fn2, true);
};
function fn1(event) {
alert("out");
// stopEvent(event);
}
function fn2() {
alert("inner");
}
function stopEvent(obj) {
if(document.all) {
//ie
ob2j.cancelBubble = true;
} else {
//FF
obj.stopPropagation();
}
}
</script>
</head>
<body>
<div class="out" id="out">
<div class="inner" id="inner"></div>
</div>
</body>
</html>