相关疑难解决方法(0)

我找不到这样做之间的区别：

window.onscroll = () => console.log("scroll")

和这个：

window.addEventListener('scroll', () => console.log("scroll"))

除了浏览器兼容性之外，大多数 IE 版本似乎都不支持这两者！

这只是语法差异吗？使用 删除处理程序似乎很简单removeEventListener，但我假设window.onscroll = null具有类似的效果。

我错过了什么吗？

我从一个空页开始.如果我跑,document.body.onclick我得到null.如果我应用以下代码:

document.body.onclick = function() { return "Click"; };

我得到的function() { return "Click"; },当我运行document.body.onclick.那讲得通!但是当我跑步的时候

document.body.addEventListener("click", function() { return "Click"; });

document.body.onclick仍然null,但输出是"Click"我跑的时候document.body.click().

所以我的问题是,使用时存储的功能在addEventListener哪里？

在函数的输入中是具有这种结构的对象:

{
  tag: 'a', //type of html object
  content: "blabal", //inner content
  attr: {
    href: "vk.com",
    id: 'someId'
  },
  events: {
    click: 'alert(this.href)',
    focus: 'this.className="active"'
  },
  style: {
    width:"100px"
  }
}

它描述了一个HTML元素.它必须返回具有指定属性的HTML元素.怎么解析呢？我有这样的事情:

elemen={
  tag:'a',
  content:"blabal",
  attr:{
    href:"vk.com",
    id:'someId'
  },
  events:{
   click:'alert(this.href)',
   focus:'this.className="active"'
  },
  style:{
    width:"100px"
  }
};
console.log(elemen.tag);
var node = document.createElement(elemen.tag);
node.innerHTML= elemen.content;

for(var prop in elemen.events){

  var fun =new Function(elemen.events[prop]);
  console.log(fun);
  node.bind(prop, fun);
//   divv.bind(prop, fun);
}

在我看来，当每个资源及其依赖资源都完成加载时，这两个事件都会被触发。这就引出了一些问题：

1. 这些事件之间有什么区别吗？
2. 哪个事件首先被触发？
3. 在所有内容都完成加载后，哪个事件可以或应该被首选用于向正文添加额外的 HTML 元素？

我已经知道 Jquery 解决方案

$('#myid').one('click', function(event) {
  ...
});

但现在我正在寻找纯 JavaScript 方式，因为我没有使用 Jquery

我已经检查了一次选项，但并非所有浏览器都支持它，请参阅文档

我只使用JavaScript,没有jQuery.

<div onclick="doFunction()"></div>
<div onclick="doFunction()"></div>
<div onclick="doFunction()"></div>
<div onclick="doFunction()"></div>
<div onclick="doFunction()"></div>
<div onclick="doFunction()"></div>

VS

document.addEventListener('click', function () {
    //code here
});

我想要做的是添加一个用于上传文件的按钮，我可以设置样式并显示所选文件的名称。

我已经搜索了很多，我搜索的越多，我发现的不同解决方案就越多。我发现，你不能直接设置输入的样式，因为你不能...... :(。

最后，我从每个解决方案中挑选了一点，并得出以下结论：

我在标签中为 input[type file] 设置了一个 span，并通过 display:none; 隐藏了输入。

现在我可以根据我的需要设置跨度的样式，并在单击时调用输入。在最后的小 JS 中，获取输入的值（所选文件的名称是什么）并将其显示在样式按钮上的跨文本中。

但看看你自己：

#input-file {
    display: none;
    }

.upload-btn {

    display: block;
    text-align: center;
    margin: 20px auto 20px;
    width: 50%;
    height: 30px;
    background-color: #fcff7f;
    line-height: 30px;

    }

.upload-btn:hover {
    background-color: #c39d5a;
    color: white;
    cursor: pointer;
    }

<label class="upload-btn">
  <input type="file" id="input-file" onchange="changeText()" />
  <span id="selectedFileName">Browse</span>
</label>


<script type="text/javascript">
  function changeText() {
    var y = document.getElementById("input-file").value;
    document.getElementById("selectedFileName").innerHTML = y;
  }
</script>

我想知道的是，这有什么问题？就我而言，它非常简单，简单到我“还”不明白为什么我在互联网上找到的所有解决方案都更加困难。他们总是尝试使用虚假输入，不透明等等。

所以请非常有经验的人告诉我是否可以像这样使用它，或者我必须改变它吗？要什么？

谢谢;) 以及很多英语不好的借口。

我\xe2\x80\x99m 学习事件如何工作，主要是事件捕获和冒泡addEventListener。这篇文章对于整体理解很有帮助。

捕获和冒泡定义父元素中事件发生的顺序。据我了解，由于事件委托，这很重要。\xe2\x80\x99t实际上addEventListener不会为您委托事件，它只是搜索委托事件，这是正确的吗？

除了事件委托之外，还有其他原因需要搜索 DOM 层次结构吗？

当我将事件附加DOM level 1 onclick到父元素并单击其子元素之一时，我仍然将子元素作为事件获取target。因此，我不认为将事件侦听器附加到子元素然后冒泡以搜索委托元素有什么意义。我这里一定缺少什么东西..

当然，如果您手动维护委托事件，则无需在 DOM 层次结构中向上搜索委托事件？

示例：https : //stackoverflow.com/a/372​​89566/710887

我看到这种情况越来越频繁地发生。

我总是被教导将 javascript、css 和 html 分开（当然，html 链接到源/脚本）。

在 HTML 属性（例如onclick, onchange, etc:）中使用 Javascript 是不好的做法吗？

<span id="valBox">25</span>
<input type="range" min="5" max="50" step="1" value="25" onchange="valBox.textContent = this.value">

我在stackoverflow上看过这个链接:$(document).ready等效没有jQuery

在我的背景下,我正在使用

$(document).keydown(Keypress);
$(document).keyup(Keyoff);

为了功能

 function Keypress(evt) {
     if (evt.keyCode == 39) rightpress = true;
     else if (evt.keyCode == 37) leftpress = true;
 }

 //unset
 function Keyoff(evt) {
     if (evt.keyCode == 39) rightpress = false;
     else if (evt.keyCode == 37) leftpress = false;
 }

有javascript等价吗？喜欢window.onload？