<javascript> 5. event
by BFine- onclick()
<script>
function ck() {
console.log("world!");
};
</script>
<style>
#ev{
width:200px;
height:100px;
background-color:aquamarine;
text-align:center;
line-height:100px;
font-weight:bold;
color:#ffffff;
}
</style>
</head>
<body>
<div id="ev" onclick="ck()">Hellow</div>
</body>
실행
Hellow 클릭시 ----> consloe
- Event 삭제
var ev = document.getElementById("ev");
ev .onclick = null; 추가하면 한번만 실행되고 이후 이벤트는 실행되지 않는다.
- 표준 핸들러 모델
<script>
onload = function(){
function clik() {
console.log("World!");
};
function rm() {
console.log("rem");
ck_add.removeEventListener("click", clik, false);//클릭이벤트 삭제
};
var ck_add = document.getElementById("ck");
ck_add.addEventListener("click", clik, false);
var ck_rm = document.getElementById("ckrm");
ck_rm.addEventListener("click", rm, false);
// 클릭 이벤트 생성
}
</script>
<style>
div {
width: 200px;
height: 150px;
background-color: blueviolet;
}
#ck {
text-align:center;
line-height:150px;
font-size:1.7em;
color:aliceblue;
}
#ckrm {
background-color: aqua;
text-align:center;
line-height:150px;
font-size:1.7em;
color:aliceblue;
}
</style>
</head>
<body>
<div id="ck">
click
</div>
<div id="ckrm">
remove
</div>
</body>#80 빨강 80 초록 80 파랑
실행
remove를 클릭하면 더이상 world! 이벤트가 발생하지 않는다
'공부(2018~2019) - 스킨변경전 > Javascript' 카테고리의 다른 글
| <jQuery> 0. basic (0) | 2018.03.28 |
|---|---|
| <javascript> 5. event(2) (0) | 2018.03.28 |
| <javascript> 4. document 객체 (0) | 2018.03.27 |
| <javascript> 3. prototype , getter&setter (0) | 2018.03.26 |
| <javascript> 2. How to define Object (0) | 2018.03.26 |
블로그의 정보
57개월 BackEnd
BFine