바닐라 javascript 클래스 호버시 조작

스플래시 페이지에서 호버 및로드에 대한 몇 가지 기본적인 클래스 조작을 시도합니다. 왜 그것이 작동하지 않는지, 다시는 바닐라에 글을 쓰지 않았는지 확실하지 않습니다.바닐라 javascript 클래스 호버시 조작

기본 DOM :

<body> 
    <article> 
     <p>test</p> 
    </article> 
</body>

자바 스크립트 :

var bod  = document.getElementsByTagName('body')[0], 
    article = document.getElementsByTagName('article')[0]; 

article.onMouseOver = function(){ 

    bod.classList.add('focus'); 
} 

article.onMouseOut = function(){ 

    bod.classList.remove('focus'); 
} 

window.onLoad = function(){ 

    bod.classList.remove('loading'); 
}

출처

2013-05-26 technopeasant

바닐라를 찾으려면 CSS 만 사용해야합니다. 'article : hover' – Bergi

사용 소문자 핸들러 :

article.onmouseover

그러나 일반적으로는 addEventListner 방법을 사용하는 것이 좋습니다. .onevent 메서드를 사용하면 하나의 핸들러 만 허용되며 빠르고 쉽게 처리 할 수 있습니다. 그러나 그것은 코드와 html을 엉망으로 만듭니다. 어떤 경우에는 심지어 다른 중요한 코드를 실행에서 제거 할 수도 있습니다. 그 이유는 addEventListener이 더 좋기 때문입니다. 체인이 맞고 하나의 이벤트를 듣는 여러 핸들러를 가질 수 있습니다. 형태. 여기

은 (위의 단락에서 당신을위한 그러나 나는 꽤 많은 액수 그것을) 정확한 차이점에 대한 또 다른 유래의 사용자로부터 좋은 답변입니다 .. 여기 AddEventListener vs element.onevent

적절한 이벤트 처리를 사용하여 고정 바이올린입니다 : http://jsfiddle.net/hXjFz/1/

출처

2013-05-26 20:26:22

모두 좋습니다. 동시에 응답 - 당신이 옳은만큼 당신에게 여전히 신용을 줄 것입니다. 도와 주셔서 감사합니다. – technopeasant

나는 바보입니다. 핸들러는 낙타가 아닙니다.

article.onmouseover; 
article.onmouseout; 
window.onload;

출처

2013-05-26 20:26:35 technopeasant

네,하지만 그 중 하나를 사용해서는 안됩니다 .. 당신과 다른 사람들이 연결할 수 있도록 addEventListener를 사용하십시오. –

@dory 저는이 경우 체인 할 필요가 없으므로 짧고 달콤합니다. 하지만 당신이 다른 사람들을 위해 jsfiddle에 링크하고자한다면 참고가 될 것입니다. – technopeasant

헤이 난 그냥이 질문에 적절하게 대답하려고 노력하고있다. :) 당신은 당신에게 좋은 것을 결정한다. 나는 너무 게으르거나 더 빠르고 더러운 것을 할 때, 무엇인가를 여러 번 사용했다. 여하튼, 나는 대답을 추가했다. –

바닐라 javascript 클래스 호버시 조작

답변

관련 문제