j개체에 등록된 이벤트 핸들러 찾기
개체에 등록된 이벤트 처리기를 찾아야 합니다.
예:
$("#el").click(function() {...});
$("#el").mouseover(function() {...});
$("#el")클릭 및 마우스 오버가 등록되어 있습니다.
이벤트 핸들러에 대해 확인하고 반복할 수 있는 기능이 있습니까?
적절한 방법으로 jQuery 객체에서 가능하지 않다면, 일반 DOM 객체에서도 가능합니까?
jQuery 1.8 기준으로 이벤트 데이터는 더 이상 "퍼블릭 API"에서 데이터로 사용할 수 없습니다.이 jQuery 블로그 게시물을 읽어보십시오.이제 이 기능을 대신 사용해야 합니다.
jQuery._data( elem, "events" );
elemHTML Element여야 하며 jQuery 개체 또는 선택기가 아니어야 합니다.
이 구조는 내부의 '개인' 구조이므로 수정해서는 안 됩니다.디버깅 목적으로만 사용합니다.
이전 버전의 jQuery에서는 다음과 같은 이전 방법을 사용해야 할 수 있습니다.
jQuery( elem ).data( "events" );
다음과 같이 이벤트(jQuery 1.8+ 기준)를 크롤링하여 실행할 수 있습니다.
$.each($._data($("#id")[0], "events"), function(i, event) {
// i is the event type, like "click"
$.each(event, function(j, h) {
// h.handler is the function being called
});
});
다음은 사용할 수 있는 예입니다.
$(function() {
$("#el").click(function(){ alert("click"); });
$("#el").mouseover(function(){ alert("mouseover"); });
$.each($._data($("#el")[0], "events"), function(i, event) {
output(i);
$.each(event, function(j, h) {
output("- " + h.handler);
});
});
});
function output(text) {
$("#output").html(function(i, h) {
return h + text + "<br />";
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="el">Test</div>
<code>
<span id="output"></span>
</code>jQuery 1.8+의 경우 내부 데이터가 다른 개체에 배치되어 더 이상 작동하지 않습니다.
은 - 최비적그인방법식공 (2 $._data(element, "events")
여기서 차이를 만드는 것은 밑줄("_")입니다.내부적으로, 그것은 부르고 있습니다.$.data(element, name, null, true)마지막(네 번째) 모수는 내부 모수("sigma")입니다.
파렴치한 플러그지만 findHandler를 사용할 수 있습니다.제이에스
이 기능을 사용하려면 findHandlers를 포함해야 합니다.JS(또는 크롬의 콘솔 창에 원시 자바스크립트 코드를 복사하여 붙여넣기만 하면 됨)를 선택하고 관심 있는 요소에 대한 이벤트 유형과 재쿼리 선택기를 지정합니다.
예를 들어 다음을 수행하여 언급한 이벤트 처리기를 빠르게 찾을 수 있습니다.
findEventHandlers("click", "#el")
findEventHandlers("mouseover", "#el")
반환되는 항목은 다음과 같습니다.
에 등록된 실제 요소입니다.
관심 있는 이벤트 유형(예: 클릭, 변경 등)에 대한 jquery 이벤트 처리기에 대한 정보가 있는 배열
function 을 마우스 버튼으로 function definition을 볼 수 입니다.
위임된 이벤트에 대해 제공된 선택기입니다.직접 이벤트의 경우 비어 있습니다.
이 이벤트 처리기가 대상으로 하는 요소를 나열합니다.예를 들어, 문서 오브젝트에 등록되고 페이지의 모든 단추를 대상으로 하는 위임된 이벤트 처리기의 경우, 이 속성은 페이지의 모든 단추를 나열합니다.마우스를 이동하여 크롬으로 강조 표시된 것을 볼 수 있습니다.
여기서 사용해 보세요.
저는 이 목적으로 이벤트 버그 플러그인을 사용하여 버그를 발생시킵니다.
@jps의 두 솔루션을 하나의 기능으로 결합했습니다.
jQuery.fn.getEvents = function() {
if (typeof(jQuery._data) === 'function') {
return jQuery._data(this.get(0), 'events') || {};
}
// jQuery version < 1.7.?
if (typeof(this.data) === 'function') {
return this.data('events') || {};
}
return {};
};
그러나 이 함수는 jQuery 자체를 사용하여 설정된 이벤트만 반환할 수 있습니다.
요소에서 이벤트를 확인하는 방법
var events = $._data(element, "events")
$(document).on("event-name", "jq-selector", function() {/logic})을 사용하는 경우에는 직접 이벤트 핸들러에서만 작동합니다. 이 답변의 맨 아래에 getEvents 기능이 표시됩니다.
예:
var events = $._data(document.getElementById("myElemId"), "events")
또는
var events = $._data($("#myElemId")[0], "events")
전체 예:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$("#textDiv").click(function() {
//Event Handling
});
var events = $._data(document.getElementById('textDiv'), "events");
var hasEvents = (events != null);
});
</script>
</head>
<body>
<div id="textDiv">Text</div>
</body>
</html>
$(문서)와 함께 설치된 동적 수신기를 포함하여 보다 완벽한 확인 방법입니다.에
function getEvents(element) {
var elemEvents = $._data(element, "events");
var allDocEvnts = $._data(document, "events");
for(var evntType in allDocEvnts) {
if(allDocEvnts.hasOwnProperty(evntType)) {
var evts = allDocEvnts[evntType];
for(var i = 0; i < evts.length; i++) {
if($(element).is(evts[i].selector)) {
if(elemEvents == null) {
elemEvents = {};
}
if(!elemEvents.hasOwnProperty(evntType)) {
elemEvents[evntType] = [];
}
elemEvents[evntType].push(evts[i]);
}
}
}
}
return elemEvents;
}
사용 예:
getEvents($('#myElemId')[0])
1.9에서 이전 동작을 복원하기 위해 마이그레이션 플러그인을 사용하는 것 외에 이벤트를 검색하는 문서화된 방법은 없습니다.jps에서 언급하는 _.data() 메서드를 사용할 수 있지만 이는 내부 메서드입니다.따라서 이 기능이 필요한 경우 올바른 작업을 수행하고 마이그레이션 플러그인을 사용하십시오.
jQuery 문서에서 다음 날짜에
1.9 이전 버전에서는 .data("events")를 사용하여 "events"라는 이름으로 데이터 요소를 정의한 다른 코드가 없는 경우 요소에 대한 jQuery의 문서화되지 않은 내부 이벤트 데이터 구조를 검색할 수 있었습니다.이 특수 케이스는 1.9에서 제거되었습니다.이 내부 데이터 구조를 검색할 공용 인터페이스가 없으며 문서화되지 않은 상태로 남아 있습니다.그러나 jQuery Migrate 플러그인은 이 플러그인에 종속된 코드에 대해 이 동작을 복원합니다.
할당된 이벤트 핸들러에 대한 jQuery의 캐시와 기본 방법을 사용하여 추가하는 요소를 모두 확인하는 사용자 지정 jQuery 선택기를 만들었습니다.
(function($){
$.find.selectors[":"].event = function(el, pos, match) {
var search = (function(str){
if (str.substring(0,2) === "on") {str = str.substring(2);}
return str;
})(String(match[3]).trim().toLowerCase());
if (search) {
var events = $._data(el, "events");
return ((events && events.hasOwnProperty(search)) || el["on"+search]);
}
return false;
};
})(jQuery);
예:
$(":event(click)")
클릭 핸들러가 연결된 요소를 반환합니다.
5이 설치된 에서 / ECMA는 5.1을 합니다.Array.prototype.map사용할 수도 있습니다.
jQuery._data(DOCUMENTELEMENT,'events')["EVENT_NAME"].map(function(elem){return elem.handler;});
쉼표로 구분된 처리기의 소스를 인쇄하는 브라우저 콘솔입니다.특정 이벤트에서 모든 것이 실행 중인 것을 확인하는 데 유용합니다.
이벤트는 다음을 사용하여 검색할 수 있습니다.
jQuery(elem).data('events');
또는 jQuery 1.8+:
jQuery._data(elem, 'events');
참고: 다음을 사용하여 제한된 이벤트$('selector').live('event', handler)다음을 사용하여 검색할 수 있습니다.
jQuery(document).data('events')
jQuery는 단순히 특정 요소의 이벤트에 액세스할 수 있도록 허용하지 않습니다.문서화되지 않은 내부 방법을 사용하여 액세스할 수 있습니다.
$._data(element, "events")
하지만 여전히 모든 이벤트를 제공하지는 않습니다. 정확히 말하면 할당된 이벤트를 보여주지는 않습니다.
$([selector|element]).on()
이러한 이벤트는 문서 내에 저장되므로 다음을 통해 검색하여 가져올 수 있습니다.
$._data(document, "events")
하지만 전체 웹 페이지에 대한 이벤트가 있기 때문에 그것은 힘든 일입니다.
위의 Tom G는 주어진 요소의 이벤트에 대해서만 문서를 필터링하고 두 메서드의 출력을 병합하는 함수를 만들었지만 출력에서 이벤트를 복제하는 결함이 있었습니다(그리고 효과적으로 요소의 jQuery 내부 이벤트 목록에서 응용 프로그램을 교란시킵니다).저는 그 결함을 고쳤고 당신은 아래의 코드를 찾을 수 있습니다.개발 콘솔이나 앱 코드에 붙여넣고 필요할 때 실행하면 지정된 요소에 대한 모든 이벤트 목록을 얻을 수 있습니다.
중요한 점은 요소가 실제로는 jQuery 개체가 아닌 HTMLElement라는 점입니다.
function getEvents(element) {
var elemEvents = $._data(element, "events");
var allDocEvnts = $._data(document, "events");
function equalEvents(evt1, evt2)
{
return evt1.guid === evt2.guid;
}
for(var evntType in allDocEvnts) {
if(allDocEvnts.hasOwnProperty(evntType)) {
var evts = allDocEvnts[evntType];
for(var i = 0; i < evts.length; i++) {
if($(element).is(evts[i].selector)) {
if(elemEvents == null) {
elemEvents = {};
}
if(!elemEvents.hasOwnProperty(evntType)) {
elemEvents[evntType] = [];
}
if(!elemEvents[evntType].some(function(evt) { return equalEvents(evt, evts[i]); })) {
elemEvents[evntType].push(evts[i]);
}
}
}
}
}
return elemEvents;
}
저는 많은 대답들이 흥미롭다고 말해야 하지만, 최근에 저는 비슷한 문제를 겪었고, DOM 방식을 택함으로써 해결책이 매우 간단했습니다.반복하지 않고 필요한 이벤트를 직접 겨냥하기 때문에 다르겠지만, 아래에서 좀 더 일반적인 답변을 드리겠습니다.
연속적으로 이미지가 있었습니다.
<table>
<td><tr><img class="folder" /></tr><tr>...</tr></td>
</table>
그리고 그 이미지에는 클릭 이벤트 핸들러가 연결되어 있었습니다.
imageNode.click(function () { ... });
클릭 가능한 영역을 전체 행으로 확장하는 것이 제 의도였기 때문에 먼저 모든 이미지와 관련 행을 얻었습니다.
tableNode.find("img.folder").each(function () {
var tr;
tr = $(this).closest("tr");
// <-- actual answer
});
이제 실제 답변 줄에서 저는 원래 질문에 대한 답을 제시하면서 다음과 같이 했습니다.
tr.click(this.onclick);
그래서 DOM 요소에서 직접 이벤트 핸들러를 가져와 jQuery click 이벤트 핸들러에 넣었습니다.매력적으로 작동합니다.
자, 일반적인 경우로.예전의 jQuery 이전 시대에는 Douglas Crockford가 우리에게 준 단순하지만 강력한 두 가지 기능을 가진 물체에 모든 이벤트를 첨부할 수 있었습니다.
function walkTheDOM(node, func)
{
func(node);
node = node.firstChild;
while (node)
{
walkTheDOM(node, func);
node = node.nextSibling;
}
}
function purgeEventHandlers(node)
{
walkTheDOM(node, function (n) {
var f;
for (f in n)
{
if (typeof n[f] === "function")
{
n[f] = null;
}
}
});
}
크롬을 사용하는 경우 jquery 디버거 플러그인을 사용해 보십시오. https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl=en
또 다른 방법은 jQuery를 사용하여 요소를 파악한 다음 실제 Javascript를 통해 이벤트 핸들러를 가져오고 설정 및 재생하는 것입니다.예를 들어:
var oldEventHandler = $('#element')[0].onclick;
// Remove event handler
$('#element')[0].onclick = null;
// Switch it back
$('#element')[0].onclick = oldEventHandler;
저는 위의 답변 중 일부를 조합하여 이 미친 듯 보이지만 기능적인 스크립트를 만들었습니다. 이 스크립트는 주어진 요소에 있는 대부분의 이벤트 청취자를 나열합니다.여기서 자유롭게 최적화하십시오.
var element = $("#some-element");
// sample event handlers
element.on("mouseover", function () {
alert("foo");
});
$(".parent-element").on("mousedown", "span", function () {
alert("bar");
});
$(document).on("click", "span", function () {
alert("xyz");
});
var collection = element.parents()
.add(element)
.add($(document));
collection.each(function() {
var currentEl = $(this) ? $(this) : $(document);
var tagName = $(this)[0].tagName ? $(this)[0].tagName : "DOCUMENT";
var events = $._data($(this)[0], "events");
var isItself = $(this)[0] === element[0]
if (!events) return;
$.each(events, function(i, event) {
if (!event) return;
$.each(event, function(j, h) {
var found = false;
if (h.selector && h.selector.length > 0) {
currentEl.find(h.selector).each(function () {
if ($(this)[0] === element[0]) {
found = true;
}
});
} else if (!h.selector && isItself) {
found = true;
}
if (found) {
console.log("################ " + tagName);
console.log("event: " + i);
console.log("selector: '" + h.selector + "'");
console.log(h.handler);
}
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-element">
<span id="some-element"></span>
</div>언급URL : https://stackoverflow.com/questions/2518421/jquery-find-events-handlers-registered-with-an-object
'programing' 카테고리의 다른 글
| mongoDb 연결 문자열에서 "+srv"의 의미 (0) | 2023.06.22 |
|---|---|
| mongoose로 문서를 업데이트하고 저장하는 방법을 만드시겠습니까? (0) | 2023.06.22 |
| SQL Server : 식을 데이터 형식 int로 변환하는 동안 산술 오버플로 오류가 발생했습니다. (0) | 2023.06.22 |
| SQL Server의 모든 데이터베이스에 있는 모든 테이블을 단일 결과 집합으로 나열하려면 어떻게 해야 합니까? (0) | 2023.06.22 |
| SQL 서버에서 외부 키 제약 조건을 제거하는 방법은 무엇입니까? (0) | 2023.06.22 |