Javascript 事件绑定持久性
Javascript event binding persistence
如果你有一个不断渲染/销毁的HTML元素,Javascript事件绑定到HTML是持久化,还是有必要在创建/销毁周期中绑定/取消绑定事件?
我正在使用 D3 生成美国各县的地图。 此外,我正在生成一个工具提示覆盖,其中包括有效选择的单击事件上的按钮。
单击事件处理程序的一部分,我将模板的 HTML 绑定到工具提示元素,然后将 Javascript 事件处理程序绑定到所述 HTML
thisObj._tooltip.template = template : "<div id = 'tooltip_template'>" +
"<div class = 'county_data'></div>" +
"<img src = '/static/images/delete.png' width = '28' height = '28' class = 'delete_logo' id = 'close_tooltip' />" +
"<button id = 'add_prospective_market' class = 'tooltip_button'>Prospective Market</button>" +
"<button id = 'add_market' class = 'tooltip_button'>Market County</button>" +
"<button id = 'remove_market' class = 'tooltip_button'>Remove Market</button></div>"
thisObj._tooltip.tooltip.html(thisObj._tooltip.template)
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 50) + "px")
.style("pointer-events" , "auto")
.style("width", "400px")
.style("height", "150px");
$(".county_data").text(d.name + ", " + d.properties.StateCode);
addTooltipHandlers();
thisObj._tooltip.tooltip.transition()
.duration(800)
.style("opacity", 1);
我通过以下方式将事件处理程序绑定到元素
var addTooltipHandlers = function(){
$("#add_market").on("click", function(){
console.log("Adding new Market")
});
$("#add_prospective_market").on("click", function(){
console.log("Adding new Prospective market")
});
$("#remove_market").on("click", function(){
console.log("Removing this market")
});
$("#close_tooltip")
.on("mouseover", function(){
$(this).css({"border-color" : "red", "opacity" : 1});
})
.on("mouseout", function(){
$(this).css({"border-color" : "black", "opacity" : 0.5});
})
.on("click", function(){
console.log("Closing tooltip");
d3.selectAll($("#" + thisObj._tooltip.county))
.style("fill", thisObj._currentCounty.color);
thisObj._tooltip.tooltip.transition()
.duration(500)
.style("opacity", 0)
.style("pointer-events", "none");
thisObj._tooltip.open = false;
removeTooltipHandlers();
});
}
由于工具提示仅在注册关闭事件之前在屏幕上可见,然后销毁,因此一旦事件侦听器绑定到元素,当销毁并重新创建该元素时,该绑定是否仍然存在?
为了使事件处理程序持久化,您必须在jquery中使用事件委托
而不是
$(...).on(event, handler)
用
$(...).on(event, selector, handler)
例如
$('body').on('click','a.saveButton', saveHandler)
这样,您可以将事件处理程序附加到 body 元素,而不是可以销毁或添加到 DOM 的实际元素。因此,处理程序将一直工作,直到您关闭它们。
更好的是,对于所有全局事件处理程序,您可以使用事件命名空间,例如:
$('body').on('click.app','a.saveButton', saveHandler)
$('body').on('click.app','a.addButton', addHandler)
这将允许您将它们off
在一起:
$('body').off('.app')
更新:非常简单的jsfiddle来显示事件委托。
相关文章:
- 在VanillaJS中模拟模型双向数据绑定
- 无法通过数组映射绑定
- 主干-不管怎样,检查事件以前是否绑定过
- 用于搜索的聚合物嵌套绑定
- Angular:更新一次性绑定的数据
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- react.js中的密钥绑定
- 使用regex的jquery keydown绑定不会验证撇号和句点
- 将事件处理程序绑定到任何可能的事件
- AngularJS指令只识别双向绑定类型
- Telerik rad组合框多列数据绑定
- 对API数据使用声明性绑定
- 如何销毁/删除/取消绑定SnapSVG.js
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 数据绑定:'系统Char'不包含名为'xxxxx'
- react组件中的绑定方法
- 如何将ngrepeat下的ngmodel绑定到$scope
- WinJS内联绑定语法
- Javascript 事件绑定持久性
- 控制器之间的绑定持久性很奇怪