此J-Query扩展textArea是否适合此JS？ 'this'是否也与JS中的event.target相同？

Question

我在代码笔https://codepen.io/vsync/pen/frudD上遇到了一个扩展的textArea，它似乎运行良好。 驱动它的代码是：

$(document)
    .one('focus.autoExpand', 'textarea.autoExpand', function(){
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.autoExpand', 'textarea.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0, rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });

我将其翻译成以下Javascript。 这似乎也运行良好，并且在控制台上没有出现任何错误：

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>

  <script>
    'use strict'; 
    function handler_focusin(e){
      let savedValue = e.target.value;
      e.target.value = '';
      e.target.baseScrollHeight = e.target.scrollHeight;
      e.target.value = savedValue;
    }
    function handler_input(e){
      let minRows = e.target.getAttribute('data-min-rows')|0, rows;
      e.target.rows = minRows;
      rows = Math.ceil((e.target.scrollHeight - e.target.baseScrollHeight) / 16);
      e.target.rows = minRows + rows;
    }
    let els = document.getElementsByClassName("autoExpand");
    [...els].forEach( el => {
      el.addEventListener('focusin', handler_focusin);
      el.addEventListener('input', handler_input);
    })
  </script>
</body>

问题：

查看function_handler中的第一条语句（在JS版本和相应的jQuery ）。 那里有一个未声明的符号“行”。 有一个逗号运算符，所以我希望对行进行评估，但是控制台中没有错误。 然后将两个语句向下分配给行，再次没有声明也没有错误。
另外，为什么要麻烦逗号运算符，因为最后要评估并返回行？
在同一条语句中，我收集到“ data-min-rows”是可能由程序员定义的属性，因此，除非已添加该属性，否则它将返回undefined。 我认为，紧随其后的bitwise或zero优先，并且此操作返回零。
正确？
在jQuery中，“ this”显然与e.target相同。 （在几个参考文献中发现）。 但是，当我翻译代码时，我错过了将“ this”更改为e.target的机会，但仍然可以使用。
难道this也可靠e.target中Javascript事件处理程序？ （我从搜索中找到的引用似乎都是在谈论jQuery。）
jQuery代码还将事件处理程序分配给textarea.autoExpand但是'textarea'不是事件名称。 那是在做什么 在Java中有对应的东西吗？

Answer 1

var a, b; 声明2个变量，它是var a; var b;的简写var a; var b; var a; var b; 。
myVariable | 0 myVariable | 0将变量“强制转换”为数字：
"wadsd" | 0 "wadsd" | 0 > 0
undefined | 0 undefined | 0 > 0
true | 0 true | 0 > 1
123 | 0 123 | 0 > 123

3：是的， this是指e.currentTarget 。 （来源）

4：那是委派的事件处理程序。 它在类为.autoExpand的文本区域上侦听'focus.autoExpand'事件。 它已在文档中注册，因此可以在目标元素存在之前注册事件。

此J-Query扩展textArea是否适合此JS？ 'this'是否也与JS中的event.target相同？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-07-31 15:01:32

此J-Query扩展textArea是否适合此JS？ &#39;this&#39;是否也与JS中的event.target相同？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-07-31 15:01:32

此J-Query扩展textArea是否适合此JS？ 'this'是否也与JS中的event.target相同？

解决方案1
1 已采纳 2019-07-31 15:01:32