【汇智学堂】js/jQuery使用事件之三
原创
©著作权归作者所有:来自51CTO博客作者wx622c0209dfb71的原创作品,请联系作者获取转载授权,否则将追究法律责任
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hour 9-1</title>
<link rel="stylesheet" type="text/css" href="css/css3.css">
<script type="text/javascript" src="js/js3.js"></script>
</head>
<body onload="onloadHandler()">
<div id="div1">Say Yes</div>
<div id="div2">Say No</div>
<div id="heading"></div>
</body>
</html>
div{
border-radius: 5px;
margin: 3px;
padding:5px;
background-color: lightgray;
font-weight: bold;
display: inline-block;
cursor: pointer;
}
function clickHandler(e,objId,num,msg) {
var obj=document.getElementById(objId);
obj.innerHTML="DIV"+num+" says "+msg+" at X position: "+e.screenX;
}
function yesWrapper(e) {
clickHandler(e,"heading",1,"yes");
e.target.removeEventListener('click',yesWrapper)
}
function noWrapper(e) {
clickHandler(e,"heading",2,"no");
e.target.removeEventListener('click',noWrapper)
}
function onloadHandler() {
document.getElementById("div1").addEventListener('click',yesWrapper,false);
document.getElementById("div2").addEventListener('click',noWrapper,false);
}