4

我正在尝试理解 Meteor 中的 Todos 示例。有一段代码我无法理解：

// Returns an event map that handles the "escape" and "return" keys and
// "blur" events on a text input (given by selector) and interprets them
// as "ok" or "cancel".
var okCancelEvents = function (selector, callbacks) {
  var ok = callbacks.ok || function () {};
  var cancel = callbacks.cancel || function () {};

  var events = {};
  events['keyup '+selector+', keydown '+selector+', focusout '+selector] =
    function (evt) {
      if (evt.type === "keydown" && evt.which === 27) {
        // escape = cancel
        cancel.call(this, evt);

  } else if (evt.type === "keyup" && evt.which === 13 ||
             evt.type === "focusout") {
    // blur/return/enter = ok/submit if non-empty
    var value = String(evt.target.value || "");
    if (value)
      ok.call(this, value, evt);
    else
      cancel.call(this, evt);
  }
};
  return events;
};

产生什么events['keyup '+selector+', keydown '+selector+', focusout '+selector] = function(){}？

为什么我们需要将以下内容转换为字符串：String(evt.target.value || "")？

上述函数的 evt 参数是否必须具有 .type、.target 和 .target.value？我可以在 evt 中传递什么？

4

2 回答 2

4

为events['keyup '+selector+', keydown '+selector+', focusout '+selector] = function(){}流星创建一个函数来映射按键（keyup，keydown）事件和失去焦点事件（focusout）。该函数被生成并提供给流星模板系统，以使用特定的 css 选择器绑定到元素。

该值包含触发事件时触发evt的 DOM值。event唯一应该传递的是触发事件时给出evt的原始 DOM ，它在触发事件时由事件中的（作为变量）给出。eventevent

我最好用代码来解释它。todos 示例的作用相同，只是它使用 css 选择器将事件绑定到元素：

<input type="text" onkeyup="doSomething(event);"/>
<script>
//js code
function doSomething(evt) { console.log(evt.target.value) }
</script>

String(evt.target.value || "")基本上确保 ifevt.target.value是一个字符串，以防它作为其他内容输入。我不能 100% 确定它什么时候不能是字符串，但我认为浏览器并不总是标准地触发事件。

该事件并不总是需要的。但它非常有用。在代码示例中，您使用它来识别哪个文本框触发了事件以及按下了哪些键。

更多活动信息：

于 2013-02-06T17:51:46.037 回答
4

我把这个问题分成了三个部分：

events['keyup '+selector+', keydown '+selector+', focusout '+selector] = function(){} 会产生什么？

该okCancelEvents方法是一种将DOM和DOM 事件包装在单个函数周围的方法，该函数将每个函数结果的详细信息整理到自定义keyup或事件中。keydownfocusoutokcancel

这会产生一个EventMap绑定到Template.todos.events实现的对象，以便所有keyup,keydown和focusout事件都作为ok或cancel通过EventMap.

为什么我们需要将以下内容转换为字符串：String(evt.target.value || "")？

我不认为这是必要的。var value = evt.target.value || ""工作得很好，因为浏览器会将字符串原语解释为字符串对象。

上述函数的 evt 参数是否必须具有 .type、.target 和 .target.value？我可以在 evt 中传递什么？

evt参数是event从keyup、keydown和focusout方法传入的，target并且是本机对象target.value的烘焙属性。event您不需要手动构建它。

于 2013-02-06T18:18:37.320 回答