어떻게 프로그래밍 방식으로 호출 onclick()에서 이벤트 태그는 앵커을 유지하면서'이것은'참조 onclick 기능입니까?

StackOverflow https://stackoverflow.com/questions/906486

  •  05-09-2019
  •  | 
  •  

문제

다음과 같은 작동하지 않...(적어도 Firefox: document.getElementById('linkid').click() 지 않는 기능)

<script type="text/javascript">
    function doOnClick() {
        document.getElementById('linkid').click();
        //Should alert('/testlocation');
    }
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>
도움이 되었습니까?

해결책

당신은 필요합니다 apply 해당 요소의 맥락에서 이벤트 핸들러 :

var elem = document.getElementById("linkid");
if (typeof elem.onclick == "function") {
    elem.onclick.apply(elem);
}

그렇지 않으면 this 위의 코드가 실행되는 컨텍스트를 참조합니다.

다른 팁

이것을 해결하는 가장 좋은 방법은 바닐라 JS를 사용하는 것이지만, 이미 jQuery를 사용하고 있다면 매우 쉬운 솔루션이 있습니다.

<script type="text/javascript">
    function doOnClick() {
        $('#linkid').click();
    }
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>

IE8-10, Chrome, Firefox에서 테스트.

이벤트를 트리거하려면 기본적으로 해당 요소의 이벤트 핸들러에게 전화하십시오. 코드에서 약간의 변화.

var a = document.getElementById("element");
var evnt = a["onclick"];

if (typeof(evnt) == "function") {
    evnt.call(a);
}

$("#linkid").trigger("click");

물론, OP는 이것이 효과가 없다고 매우 유사하게 언급했지만 나에게도 그렇게했습니다. 내 출처의 메모를 기반으로 OP의 게시물 이후 또는 그 이후에 구현 된 것 같습니다. 아마도 지금은 더 표준 일 것입니다.

document.getElementsByName('MyElementsName')[0].click();

제 경우에는 내 버튼에 ID가 없었습니다. 요소에 ID가있는 경우 다음 (테스트되지 않은)을 사용하십시오.

document.getElementById('MyElementsId').click();

나는 원래이 방법을 시도했지만 작동하지 않았습니다. 인터넷 검색 후 나는 돌아와서 내 요소가 이름으로라는 것을 깨달았고 ID가 없다는 것을 깨달았습니다. 올바른 속성이라고 부르는 이중 점검.

원천: https://developer.mozilla.org/en-us/docs/web/api/htmlelement/click

handleEvent 메소드를 살펴보십시오
https://developer.mozilla.org/en-us/docs/web/api/eventlistener

"RAW"JavaScript :

function MyObj() {
   this.abc = "ABC";
}
MyObj.prototype.handleEvent = function(e) {
   console.log("caught event: "+e.type);
   console.log(this.abc);
}

var myObj = new MyObj();

document.querySelector("#myElement").addEventListener('click', myObj);

이제 요소를 클릭하면 (ID "Mylement"포함) 콘솔에 다음을 인쇄해야합니다.

잡힌 이벤트 : 클릭
알파벳

이를 통해 객체 메소드를 이벤트 핸들러로 가질 수 있으며 해당 메소드의 모든 객체 속성에 액세스 할 수 있습니다.

너 캔트 객체의 메소드를 addeventListener에 직접 전달합니다 (예 : : element.addEventListener('click',myObj.myMethod);) 그리고 기대합니다 myMethod 마치 내가 대상을 보통 부름받은 것처럼 행동합니다. addeventListener로 전달 된 기능이 참조 대신 어떻게 든 복사 된 것으로 생각합니다. 예를 들어, 이벤트 리스너 함수 참조를 AddEventListener (변수 형태)에 전달하면이 참조를 설정하지 않으면 이벤트가 여전히 잡히면 이벤트 리스너가 실행됩니다.

이벤트 리스너 및 stil로서의 방법을 전달하기위한 또 다른 (덜 우아한) 해결 방법 this 이벤트 리스너 내에서 객체 속성에 여전히 액세스 할 수 있습니다.

// see above for definition of MyObj

var myObj = new MyObj();

document.querySelector("#myElement").addEventListener('click', myObj.handleEvent.bind(myObj));

OnClick 속성의 함수를 참조하기 위해 이것을 순전히 사용하는 경우 이것은 매우 나쁜 생각처럼 보입니다. 인라인 이벤트는 일반적으로 나쁜 생각입니다.

다음을 제안합니다.

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true;
    }
    else if (elm.attachEvent) {
        var r = elm.attachEvent('on' + evType, fn);
        return r;
    }
    else {
        elm['on' + evType] = fn;
    }
}

handler = function(){
   showHref(el);
}

showHref = function(el) {
   alert(el.href);
}

var el = document.getElementById('linkid');

addEvent(el, 'click', handler);

다른 JavaScript 코드에서 동일한 함수를 호출하려면 클릭을 시뮬레이션하여 기능을 호출하는 것이 가장 좋은 방법이 아닙니다. 고려하다:

function doOnClick() {
   showHref(document.getElementById('linkid'));
}

오래된 스레드,하지만 질문은 여전히 관련성이,그래서...

(1)이 예제에서 당신의 질문에 지금 가 에서 작동합니다.그러나 그외에 호출 이벤트 처리기(는 경고를 표시합),그 도 링크를 클릭의 원인,네비게이션(면 경고가 해고).

(2) 그 전화 이벤트 처리기(트리거하지 않고 탐색)단순히 교체:

document.getElementById('linkid').click();

가

document.getElementById('linkid').onclick();

일반적으로 나는 이벤트 핸들러를 '수동으로'호출하는 것을 권장합니다.

  • 여러 등록 된 청취자로 인해 무엇이 실행되는지 불분명합니다.
  • 재귀 및 무한 이벤트 루프에 들어가는 위험 (트리거 클릭 B를 클릭, 클릭 A 트리거 a 등).
  • DOM에 대한 중복 업데이트
  • 사용자가 발생하는보기의 실제 변경 사항을 초기화 코드 (한 번만 실행해야 함)로부터 변경 사항을 구별하기 어렵습니다.

더 나은 것은 정확히 원하는 일을 파악하고 기능에 넣고 수동으로 호출하고 이벤트 리스너로 등록하는 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top