gpt4 book ai didi

javascript - 对于这个 J-Query 扩展文本区域来说,这是正确的 JS 吗? 'this' 也和 JS 中的 event.target 一样吗?

转载 作者:行者123 更新时间:2023-12-02 23:12:21 26 4
gpt4 key购买 nike

我在代码笔上遇到了一个正在扩展的文本区域,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>

问题:

  1. 查看function_handler中的第一条语句(JS版本和相应的jQuery)。那里有一个未声明的符号“行”。有一个逗号运算符,因此我希望对 row 进行求值,但控制台中没有错误。然后将行下面的两个语句分配给,同样没有声明,也没有错误。

    此外,为什么要使用逗号运算符,因为行是最后评估并返回的?

  2. 在同一条语句中,我认为“data-min-rows”是一个潜在的程序员定义的属性,因此除非已添加该属性,否则它将返回未定义。我想然后它后面的按位或与将优先并且返回零。

    正确吗?

  3. 在 jQuery 中,显然“this”与 e.target 相同。 (在一些引用文献中发现)。然而,当我翻译代码时,我错过了将“this”更改为 e.target,但它仍然有效。

    thisJavascript 事件处理程序中是否也可靠地使用 e.target ? (我从搜索中找到的引用文献似乎都在谈论 jQuery。)

  4. jQuery 代码还将事件处理程序分配给 textarea.autoExpand,但“textarea”不是事件名称。那是在做什么? Javascript 中有对应的东西吗?

最佳答案

  1. var a, b; 声明了 2 个变量,它是 var a; 的简写形式var b;.

  2. 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com