blocks|key|1599048|text|一种选择是让setEvent返回绑定的函数，这样testBind就可以删除它：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1599049|​|1599050|function+testBind(boundListener,+element)+{
++element.removeEventListener('mouseup',+boundListener);
}

function+setEvent()+{
++var+element+=+document.getElementById("testBtn");
++const+yesFunction+=+()+=>+console.log('listener+running');
++var+boundListener+=+yesFunction.bind(this,+this);
++element.addEventListener('mouseup',+boundListener);
++return+{+boundListener,+element+};
}

const+{+boundListener,+element+}+=+setEvent();
testBind(boundListener,+element);|code-block|syntax|javascript|1599051|<button+id="testBtn">click</button>|1599052|1599053|你需要一些方法来传递绑定的函数。如果你在setEvent中创建它，setEvent应该返回绑定的函数，或者调用testBind本身，或者类似的东西。您还可以在setEvent外部创建绑定函数，将其传递给setEvent，也可以将其传递给testBind。|1599054|entityMap^0|6|8|O|8|0|0|0|0|0|K|8|X|8|1J|8|27|8|2T|8|3A|8|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|S|$]]

<p>One option would be for <code>setEvent</code> to return the bound function, so that <code>testBind</code> can remove it:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function testBind(boundListener, element) {
  element.removeEventListener('mouseup', boundListener);
}

function setEvent() {
  var element = document.getElementById("testBtn");
  const yesFunction = () =&gt; console.log('listener running');
  var boundListener = yesFunction.bind(this, this);
  element.addEventListener('mouseup', boundListener);
  return { boundListener, element };
}

const { boundListener, element } = setEvent();
testBind(boundListener, element);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="testBtn"&gt;click&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>You'll need <em>some</em> way to pass around the bound function. If you create it in <code>setEvent</code>, <code>setEvent</code> should return the bound function, or call <code>testBind</code> itself, or something like that. You can also create the bound function outside of <code>setEvent</code>, pass it to <code>setEvent</code>, and also pass it to <code>testBind</code>.</p>


blocks|key|1813399|text|如果(由于代码中的约束)为this+preferred+solution+is+not+possible，另一种选择是通过自定义属性将处理程序与元素相关联：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1813400|addEvent.boundYes+=+boundYes;+/*+Assign+boundYes+function+to+element+*/|code-block|syntax|javascript|1813401|这为您提供了在testBind()期间注销'mouseup'事件时通过DOM元素本身访问此函数处理程序实例的方法|style|CODE|1813402|​|1813403|function+yesFunction()+{
++console.log('yesFunction');
}

function+testBind(var1,+var2)+{

++const+addEvent+=+document.getElementById("testBtn");
++const+boundYes+=+addEvent.boundYes;

++/*+Check+to+see+if+boundYes+associated+with+element+*/
++if+(boundYes)+{

++++/*+Remove+the+event+listener+from+element+*/
++++addEvent.removeEventListener('mouseup',+boundYes);

++++/*+Disaccoaite+the+function+from+element+*/
++++addEvent.boundYes+=+undefined;
++++alert('bound+event+now+removed');
++}
}

function+setEvent()+{
++var+addEvent+=+document.getElementById("testBtn");
++
++/*+Prevent+multiple+boundYes+handlers+*/
++if+(!addEvent.boundYes)+{

++++var+boundYes+=+yesFunction.bind(this,+this);
++++addEvent.addEventListener('mouseup',+boundYes);

++++/*+Attach+boundYes+function+to+element+*/
++++addEvent.boundYes+=+boundYes;
++}
}


setEvent();

testBind();|1813404|<button+id="testBtn">testBtn</button>|1813405|1813406|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/56728744/8526705^0|D|13|0|0|0|7|A|L|9|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|16|8|@$A|17|B|18|K|L]|$A|19|B|1A|K|L]]|9|@]|C|$]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|C|$]]|$1|O|3|P|5|F|7|1C|8|@]|9|@]|C|$G|H]]|$1|Q|3|R|5|F|7|1D|8|@]|9|@]|C|$G|H]]|$1|S|3|N|5|6|7|1E|8|@]|9|@]|C|$]]|$1|T|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|U|$V|$5|W|X|Y|C|$Z|10]]]]

<p>If (due to constraints in your code) <a href="https://stackoverflow.com/a/56728744/8526705">this preferred solution is not possible</a>, another option would be to associate the handler to the element via a custom property:</p>

<pre><code>addEvent.boundYes = boundYes; /* Assign boundYes function to element */
</code></pre>

<p>This would give you the means to access this function handler instance via the DOM element itself when deregistering the <code>'mouseup'</code> event during <code>testBind()</code>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function yesFunction() {
  console.log('yesFunction');
}

function testBind(var1, var2) {

  const addEvent = document.getElementById("testBtn");
  const boundYes = addEvent.boundYes;

  /* Check to see if boundYes associated with element */
  if (boundYes) {

    /* Remove the event listener from element */
    addEvent.removeEventListener('mouseup', boundYes);

    /* Disaccoaite the function from element */
    addEvent.boundYes = undefined;
    alert('bound event now removed');
  }
}

function setEvent() {
  var addEvent = document.getElementById("testBtn");
  
  /* Prevent multiple boundYes handlers */
  if (!addEvent.boundYes) {

    var boundYes = yesFunction.bind(this, this);
    addEvent.addEventListener('mouseup', boundYes);

    /* Attach boundYes function to element */
    addEvent.boundYes = boundYes;
  }
}


setEvent();

testBind();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="testBtn"&gt;testBtn&lt;/button&gt;</code></pre>
</div>
</div>
</p>


<p>I am trying to remove an event listener with bound variables from a different function from where the listener was set.</p>

<p>I have already sen <a href="https://stackoverflow.com/questions/46455624/javascript-addeventlistener-removeeventlistener-and-bind">this post that describes how to remove a bound listener</a> from within the same function, which is different from what I am trying to do:</p>

<pre><code>function testBind(var1,var2){
//remove the bound event from within this function &lt;&lt;&lt;
alert('bound event now removed');
}

function setEvent(){
var addEvent =  document.getElementById("testBtn");   
var boundYes = yesFunction.bind( this, this );
addEvent.addEventListener('mouseup', boundYes);
}
</code></pre>

<p>All of the examples I found have the event listener being removed inside the same function where the event listener is set:</p>

<pre><code>addEvent.removeEventListener("mouseup", boundYes ); 
</code></pre>

<p>I understand that using bind creates a new event listener every time and to remove the listener you need to set and remove it by the same variable. </p>

<p>How can I properly remove the event listener from the <code>testBind</code> function?</p>


Javascript: Remove bound event handler from outside set up function

我正在尝试从设置侦听器的不同函数中删除具有绑定变量的事件侦听器。我已经从相同的函数中发送了，这与我试图做的事情不同：function testBind(var1,var2){//remove the bound event from within this function <<<alert('bound event ...

问Javascript:从设置函数外部删除绑定的事件处理程序
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript:从设置函数外部删除绑定的事件处理程序EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript:从设置函数外部删除绑定的事件处理程序
EN