처음 웹페이지 접속했을 때 함수를 시작하고

window.onload = function(){}

이벤트 넣을 태그의 클래스 또는 아이디값을 선언해준 뒤

var gnb = document.querySelector(".gnb");
var lnb_box = document.querySelector(".lnb_box");

addEventListener를 이용하여 마우스 이벤트 생성

 

window.onload = function(){
    var gnb = document.querySelector(".gnb");
    var lnb_box = document.querySelector(".lnb_box");
    gnb.addEventListener("mouseover", hovered, false);
    lnb_box.addEventListener("mouseout", hoveredOut, false);
}

gnb 클래스에 마우스를 올렸을 때 hovered 함수가 실행되고

lnb_box 클래스에서 마우스가 아웃됐을 때 hoveredOut 함수가 실행

function hovered(e) {}
function hoveredOut(e) {}
반응형

'script' 카테고리의 다른 글

ajax 통신으로 json 형식 불러온 후 string 으로 변환  (0) 2019.01.22

서버에서 data를 json 형식으로 받아와서 html화면단에 출력하고 싶을 때 
jQuery함수중에 JSON.stringify() 함수를 사용하면 아주 간단하다.

$.ajax({ url:"RESTful", dataType:"JSON", success:function(json){ console.log(json) } });

위 코드를 사용해보면 웹브라우저 console창에 [object][object]로 표시될 것이다.
이걸

$.ajax({ url:"RESTful", dataType:"JSON", success:function(json){ var data = JSON.stringify(json); console.log(data); } });

요론식으로 바꿔서 다시 console.log를 찍어보면
string으로 바껴서 출력되는 json 데이터를 볼 수있다.
이걸 html단에 출력시킬려면

<div id="jsonCall"></div>

html 단에서 div를 생성해주고 id값을 부여한다.
그리고 ajax통신 부분에서 id값에 text로 출력시키면 끝

$.ajax({ url:"RESTful", dataType:"JSON", success:function(json){ var data = JSON.stringify(json); $("#jsonCall").text(data); } });

$("#jsonCall").text(data); 에서 굳이 text()를 사용안해도 된다. html()을 사용해도 상관없다.

 

반응형

'script' 카테고리의 다른 글

javascript 마우스 오버 이벤트  (0) 2023.09.12

+ Recent posts