[javascript] onclick 함수에서 ‘this’참조를 유지하면서 앵커 태그에서 onclick () 이벤트를 프로그래밍 방식으로 호출하려면 어떻게해야합니까?

Program / 글쓴이

다음은 작동하지 않습니다 … (적어도 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위 코드가 실행되는 컨텍스트를 참조합니다.

답변

이 문제를 해결하는 가장 좋은 방법은 Vanilla 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를

“원시”자바 스크립트 :

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 “myElement”포함)를 클릭하면 콘솔에 다음이 인쇄됩니다.

잡힌 이벤트 : 클릭
ABC

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

객체의 메서드를 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));

답변

오래된 스레드이지만 질문은 여전히 ​​관련이 있으므로 …

(1) 귀하의 질문에있는 예제는 이제 Firefox에서 작동 합니다. 그러나 (경고를 표시합니다) 이벤트 핸들러를 호출뿐만 아니라, 그것은 ALSO (경고가 기각되면) 탐색을 일으키는 원인이되는 링크를 클릭.

(2)하기 JUST 단순히 대체 (탐색을 트리거하지 않고) 이벤트 핸들러를 호출

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

와

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