js DOM 의 이벤트 흔 한 조작 실례 상세 설명
자바 스 크 립 트 구성
JavaScript 기 초 는 세 부분 으로 나 뉜 다.
JS 는 이벤트 구동 을 핵심 으로 하 는 언어 다.
사건 의 세 가지 요소
이벤트 의 세 가지 요소:이벤트 소스,이벤트,이벤트 드라이버
총 결 은 다음 과 같다.
코드 작성 절 차 는 다음 과 같다.(중요)
document.getElementById("box"); // ios UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom]; box. onclick = function(){ };
<body>
<div id="box1">123</div>
<script type="text/javascript">
// 1、
var div = document.getElementById("box1");
// 2、
div.onclick = function () {
// 3、
alert(" ");
}
</script>
</body>
// 123
1.이벤트 원본 가 져 오 는 방법(DOM 노드 가 져 오기)
var div1 = document.getElementById("box1"); // ： id
var arr1 = document.getElementsByTagName("div1"); // ： ， s
var arr2 = document.getElementsByClassName("hehe"); // ： ， s방식 1:익명 함수 직접 연결
<div id="box1" >123</div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//
div1.onclick = function () {
alert(" ");
}
</script>
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//
div1.onclick = fn; // ， fn， fn()。fn() 。
//
function fn() {
alert(" ");
}
</script>
방식 3:줄 내 귀속
<!-- -->
// ， ， "fn()"， "fn"。 js ， 。
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert(" ");
}
</script>
<style>
#box {
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
var oDiv = document.getElementById("box");
// ， div ，
oDiv.onclick = function () {
oDiv.style.width = "200px"; //
oDiv.style.height = "200px";
oDiv.style.backgroundColor = "red"; // backgroundColor， background-Color
}
</script>
마우스 클릭 으로 색상 변경:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{ /*class*/
width:100px;
height:100px;
background-color:green;
}
</style>
</head>
<body>
<div class="box" id="box">alex</div>
</body>
<script type="text/javascript">
var oDiv = document.getElementById('box');
var isGreen =true;
oDiv.onclick=function(){
console.log(oDiv.style);
if (isGreen){
oDiv.style.backgroundColor='red';
isGreen=false; // isGreen
}else{
oDiv.style.backgroundColor='green';
isGreen=true;
}
}
</script>
</html>
/* */
페이지 로 딩(텍스트 와 그림)이 끝 났 을 때 onload 이벤트 가 실 행 됩 니 다.
<script type="text/javascript">
window.onload = function () {
console.log(" "); // ，
}
</script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//window.onload
window.onload = function () {
// ： img ， ， （src ）。
// ：
//1.
//2.
//3.
//1.
var img = document.getElementById("box");
//2. ( ： )
img.onmouseover = function () {
//3. ( src)
img.src = "2.jpg";
// this.src = "image/jd2.png";
};
}
</script>
</head>
<body>
<img id="box" src="1.jpg" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
