我在代码笔上遇到了一个正在扩展的文本区域，https://codepen.io/vsync/pen/frudD看起来效果很好。驱动它的代码是:
$(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)。那里有一个未声明的符号“行”。有一个逗号运算符，因此我希望对 row 进行求值，但控制台中没有错误。然后将行下面的两个语句分配给，同样没有声明，也没有错误。此外，为什么要使用逗号运算符，因为行是最后评估并返回的？
在同一条语句中，我认为“data-min-rows”是一个潜在的程序员定义的属性，因此除非已添加该属性，否则它将返回未定义。我想然后它后面的
按位或与零将优先并且返回零。正确吗？
在 jQuery 中，显然“this”与 e.target 相同。 (在一些引用文献中发现)。然而，当我翻译代码时，我错过了将“this”更改为 e.target，但它仍然有效。
this在Javascript事件处理程序中是否也可靠地使用e.target？ (我从搜索中找到的引用文献似乎都在谈论 jQuery。)jQuery代码还将事件处理程序分配给textarea.autoExpand，但“textarea”不是事件名称。那是在做什么？ Javascript 中有对应的东西吗？
最佳答案
var a, b;声明了 2 个变量，它是var a; 的简写形式var b;.myVariable | 0将变量“转换”为数字:
“wadsd”| 0>0
未定义| 0>0
真 | 0>1
123 | 0>123
3:是的，this 指的是 e.currentTarget。 (source)
4:那是 delegated event handler 。它监听类 .autoExpand 的文本区域上的“focus.autoExpand”事件。它已注册在文档上，因此可以在目标元素存在之前注册事件。
关于javascript - 对于这个 J-Query 扩展文本区域来说，这是正确的 JS 吗？ 'this' 也和 JS 中的 event.target 一样吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57293597/