click event not producing the expected result

Question

I have this code that looks clean and fine, but it is not producing the desired result.
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();

I actually expected to see the name of the event in my console, instead this is what i am having as the result "DOMContentLoaded".

Can anybody tell me a reason for this?

Answer 1

assuming you want to get type of event (here Click i guess) something like

HTML:

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

and js:

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

Should work...:D

Edit: you almost have the answer(still just gave edit to my post :D ;D) from your post you must have called the

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

within the document.ready(function(){//here}) block..to get DOMContentLoaded Message...as you got the result, the reason for it being You have not assigned any event by anchor.onclick=click(); instead you called it and assigned it to anchor.onclick...a simple console.log(anchor.onclick) would show that...Just in case for explicit binding of event you can use

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

Answer 2

I actually expected to see the name of the event in my console, instead this is what i am having as the result "DOMContentLoaded".

Can anybody tell me a reason for this?

This happens due to the following line:

 var ev = window.event;

and the fact that you call the click

 anchor.onClick = click();

When you script would be parsed and executed the DomContentLoaded event happens and this is why you see that you described.

If you wan't to use your approach then you have to make a few corrections. Please see the below script.

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>

Otherwise, you could achieve that you are looking for using the following snippet, in a more compact way:

$(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>

Since you load jquery and you use it for the Dom Ready event to attach an event handler, then it would be more natural to use jQuery to select elements from the DOM rather than using plain JavaScript. At least, this is my two cents.

Last but not least, it follows the plain JavaScript approach:

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 3

By appending () you are executing click immediately inside your jQuery(document).ready(function () { Inside this block, you are assigning var ev = window.event which is what you see when you console/log: DomContentLoaded is the window event, as execution is inside the document/ready block.

One way to avoid your problem is to substitute the following:

anchor.onClick = click();

With the following which only executes on click, instead of immediately:

$(anchor).on('click', click);

Answer 4

Problem: This code anchor.onClick = click(); you are not passing in any event into the called function function click(ev) so ev is undefined, Also var ev = window.event; this is you are assigning a window event which is undefined too.

I see you are using Jquery, The above script can be made simple as below.

$(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>

Edit: from your comments the reason for the ready function, is to avoid my selection returning null you can better use window.onload which is equivalent to document ready.

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