Javascript : eventListener를 사용한 페이지 새로 고침

Question

자바 스크립트 모범 사례를 이해하려고 할 때 외부 자바 스크립트 파일의 이벤트 리스너를 추가하여 인라인 자바 스크립트를 다시 만들려고합니다. 내 문제에 관한

<p id="inline" align="left"> 
This is a body paragraph which changes alignment 
when a user clicks on a link below 
</p> 
<p> 
<a href="" onclick="document.getElementById('inline').setAttribute('align', 'right'); return false;">Align Right</a> 
</p> 

는 여기에 주목해야 할 중요한 것은 return false;가 실제로 잘 모르겠어요 (다시로드에서 페이지를 방지한다는 이유, 그리고 같으면 : 인라인 코드는 잘 작동하고 다음과 같습니다

특히 내 문제에 대한 해결책과 관련이 있다면 ...). 이것이 내가 원하는거야. 텍스트를 오른쪽으로 이동하려면 페이지를 다시로드 할 필요가 없습니다.

그러나 재로드에서 페이지를 유지하는 가장 좋은 방법은 자바 스크립트가 외부 파일에있는 시점입니다. 내 첫 시도는 다음과 같습니다. 다음과 같습니다

<p id="external" align="left"> 
This is a body paragraph which changes alignment 
when a user clicks on a link below. It uses an 
external .js file. 
</p> 
<p> 
<a href="" id="aRight">Align Right</a> 
</p> 

그리고 자바 스크립트 : I는 다음과 같습니다 HTML 시작

이 거의 작품

function alignListener() { 
    document.getElementById('external').setAttribute('align', 'right'); 
} 
function installListeners() { 
    var aRight = document.getElementById('aRight'); 
    aright.addEventListener('click', alignListener, false); 
} 

하지만 전혀 내가 기대하는 방법에 대해 설명합니다. '오른쪽 정렬'링크를 클릭하면 텍스트가 짧게 오른쪽 정렬되지만 현재 페이지의 링크를 따라 정렬을 다시 왼쪽으로 재설정합니다.

<a href="" ... 대신 <a href="#" ...을 사용하여 문제를 해결할 수있는 방법을 발견했습니다. 이 페이지를 다시로드하지는 않지만 (그래서 텍스트가 정렬 된 상태로 유지됨), 필자는 필자가 원하지 않는 페이지로 이동합니다. 인라인 자바 스크립트와 함께 작동하는 return false;과 비슷한 솔루션을 원합니다. 이 작업을 수행하는 간단한 방법이 있습니까? 아니면 완전히 잘못하고있는 것입니까?

Answer 1

function event(e){ 
    var e=window.event||e; 
    //do stuff 
    if(e.preventDefault){e.preventDefault()}else{e.returnValue=false} 
} 

참고하는이 새로운 기능에 갈 필요하지 않습니다 대부분의 이러한 유형의 답변은 mozilla 개발자 네트워크에 있습니다. 읽기 쉽고 JavaScript와 DOM을 이해하는 데 도움이됩니다. (자바 스크립트 ... DOM이 어색! 좋은)

특히, 이벤트 : 일반적으로 https://developer.mozilla.org/en/DOM/event

, 이벤트, preventDefault(), stopPropagation(), return false;을 중지 할 수있는 몇 가지 방법이 있습니다 https://developer.mozilla.org/

, 위에서 제안한대로 JavaScript 프레임 워크를 사용하십시오. jQuery는 훌륭하다. 거기에는 많은 다른 사람들이있다 (YUI, Dojo, MooTools 등). 그리고 그들은 모두 당신의 JavaScript가 다른 브라우저와 더 잘 호환되도록 노력한다.

Answer 2

당신은 사용할 수 있습니다 .addEventListener("click",function(e){/*the above function*/})

간 호환 이벤트 리스너 : 내가보기 엔 추천

if(element.addEventListener){ 
    element.addEventListener(eventName, function, false); 
}else{ 
    element.attachEvent("on"+eventName, function); 
}