function "onclick" is called even though it is not set in button

Question

I have following code. I haven't been able able to figure out why click event occurs even though I haven't set the function to onclick attribute of button.

var x = 0;
var onclick = function() {
  console.log("x = " + ++x);
};

<button type="button" onclick="">Click</button>

Answer 1

Well you set global variable onclick, which translates to global object window property onclick. This is basically the same as if you were to set it directly:

window.onclick = function() {
    console.log("x = " + ++x);
};

And because you have set click event on entire window object, it will fire not only on button click but on click on anything within your document (unless event propagation is stopped).