Question

我的代码看起来很干净，但却没有产生预期的结果的 HTML

<nav>
  <div class="div1">
    <p>This is the first paragraph inside the division</p>
    <p>This is the second paragragh inside the division</p>
    <h5>This is a h5 header</h5>
    <p>This is a paragraph next to he h5 header</p>
    <a href="#" class="ankor" >justklick</a>
  </div>       
</nav>

JAVSCRIPT

jQuery(document).ready(function () {
    function click(ev) {
        var ev = window.event;
        console.log(ev.type);
    }
    var anchor = document.querySelector('.ankor');
    anchor.onClick = click();

我实际上希望在我的控制台中看到事件的名称，而这正是我所拥有的结果＆＃34; DOMContentLoaded＆＃34;。

有人可以告诉我这个原因吗？

Answer 1

我实际上希望在我的控制台中看到该事件的名称，   相反，这就是我所拥有的结果“DOMContentLoaded”。

有人可以告诉我这个原因吗？

这是由于以下行所致：

 var ev = window.event;

以及您致电click

的事实

 anchor.onClick = click();

当你解析并执行脚本时，会发生DomContentLoaded事件，这就是你看到你所描述的原因。

如果您不想使用您的方法，那么您必须进行一些更正。请参阅以下脚本。

jQuery(document).ready(function () {
    function click(event) {
        console.log(event.type);
    }
  
    // You should place here this code, because click is only visible 
    // in this scope.
    var anchor = document.querySelector('.ankor');
    anchor.onclick = click;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div class="div1">
    <p>This is the first paragraph inside the division</p>
    <p>This is the second paragragh inside the division</p>
    <h5>This is a h5 header</h5>
    <p>This is a paragraph next to he h5 header</p>
    <a href="#" class="ankor" >justklick</a>
  </div>       
</nav>

否则，您可以通过更紧凑的方式实现您正在寻找使用以下代码段：

$(function(){

  $(".ankor").on("click", function(ev){
        console.log(ev.type);
  });
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
     <div class="div1">
        <p>This is the first paragraph inside the division</p>
        <p>This is the second paragragh inside the division</p>
        <h5>This is a h5 header</h5>
        <p>This is a paragraph next to he h5 header</p>
        <a href="#" class="ankor" >justklick</a>
    </div>
</nav>

由于您加载了jquery并且将它用于Dom Ready事件以附加事件处理程序，因此使用jQuery从DOM中选择元素而不是使用纯JavaScript会更自然。至少，这是我的两分钱。

最后但并非最不重要的是，它遵循简单的JavaScript方法：

document.addEventListener("DOMContentLoaded", function(event){
    var ankors = document.getElementsByClassName("ankor");
    if(ankors.length){
        ankors[0].addEventListener("click",function(event){
            console.log(event.type);
        });
    }
})

<nav>
     <div class="div1">
        <p>This is the first paragraph inside the division</p>
        <p>This is the second paragragh inside the division</p>
        <h5>This is a h5 header</h5>
        <p>This is a paragraph next to he h5 header</p>
        <a href="#" class="ankor" >justklick</a>
    </div>
</nav>

Answer 2

问题：此代码anchor.onClick = click();您未将任何事件传递到被调用函数function click(ev)，因此ev未定义，var ev = window.event;这是你正在分配一个undefined的窗口事件。

我看到你正在使用Jquery，上面的脚本可以简化如下。

$(function() { //  shor hand for jQuery(document).ready(function(){...
  $('.ankor').on('click', function(e) {
    console.log(e.type);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div class="div1">
    <p>This is the first paragraph inside the division</p>
    <p>This is the second paragragh inside the division</p>
    <h5>This is a h5 header</h5>
    <p>This is a paragraph next to he h5 header</p>
    <a href="#" class="ankor">justklick</a>
  </div>

</nav>

来自您的评论the reason for the ready function, is to avoid my selection returning null的

修改，您可以更好地使用window.onload，这相当于文档就绪。

window.onload = function(){
  alert("onload event is fired");
};

Answer 3

假设您想获得类似事件（此处点击我猜）

HTML：

<a href="#" class='ank'>Click</a>

和js：

 $(document).ready(function(){
    $('.ank').click(function(event)
  {
    console.log(event.type);
  });
});

应该工作......：D

编辑：你几乎得到了答案（仍然只是编辑了我的帖子：D; D）从你的帖子你必须打电话给

var anchor =document.querySelector('.ankor');
    anchor.onClick = click();

在document.ready(function(){//here})块中...获取DOMContentLoaded消息...当您得到结果时，原因是您没有通过anchor.onclick=click();分配任何事件而是调用它并分配它to anchor.onclick ...一个简单的console.log(anchor.onclick)会显示...为了明确绑定事件你可以使用

 $('selector').on('eventtobind',function(){
//more code
});

Answer 4

通过附加()，您正在click内立即执行jQuery(document).ready(function () {在此块中，您正在分配var ev = window.event，这是您在控制台/日志时看到的内容：{ {1}}是窗口事件，因为执行位于文档/就绪块内。

避免问题的一种方法是替换以下内容：

DomContentLoaded

以下仅在点击时执行，而不是立即执行：

anchor.onClick = click();

单击事件不会产生预期结果

4 个答案: