Hey.

  1. If I write function func(){...}; document.getElementById("red").onclick=func; function func(){...}; document.getElementById("red").onclick=func; , the onclick property will refer not to "null", but to the func() function.
    But at the same time, for some reason, the <div id="red"> ...</div> element in dev tools (the Elements tab, where the elements of the document are shown) does not add the onclick attribute, although in the div object itself the onclick property will not be referenced on "null", and on function function(){...} .

    Question: why not added?

    As far as I understand, properties and attributes of the same name are tied tightly - if there is a standard attribute, there must be a property of the same name, and vice versa.
    Strange it turns out: the property is there, but the attribute of the same name is not.
    I used the basic DOM event model level 0 . In this case, the target object is associated with the handler function through the onclick property.

  2. If you use the W3C DOM Level 2 event model, the entry changes.
    I write function func(){...}; document.getElementById("red").addEventListener("click", func, false); function func(){...}; document.getElementById("red").addEventListener("click", func, false); .

    In this case, the onclick property of the document.getElementById("red") object will still refer to "null". That is, in the document.getElementById ("red") object there is no property that refers to the handler function func() .
    How does this even work?
    How does the target object communicate with the handler function?

  • I would like to see references to places in the standards for which conclusions were made - Grundy
  • exactly what conclusions? - Dimon
  • I wrote as I understand. if something is wrong - straighten - Dimon
  • for example this: if there is a standard attribute, there must be a property of the same name, and vice versa. - Grundy
  • I honestly did not find a DOM level 0 - Grundy

1 answer 1

Your events do not have to be output to the DOM element, but this does not affect whether an event handler was installed. In your cases, the handler is installed and it simply does not work.

You can assign a handler using the property of the DOM element on <event>.

An example of installing a click handler:

 <input id="elem" type="button" value="Нажми меня" /> <script> elem.onclick = function() { alert( 'Спасибо' ); }; </script>

If the handler is set via an attribute, the browser reads the HTML markup, creates a new function from the content of the attribute, and writes it to the onclick property.

The handler is stored in the DOM property, and the attribute is only one of the ways to initialize it.

Read about event initialization

  • and the event is not entered into the DOM. DOM is a tree of DISPLAY node objects. and the handler function (it is also an object, since the function in the prototype chain has Object {}), which, for example, is referenced by the onclick property, is not included in the DOM, since it does not have a Node object in the prototype chain and it does not displayed on screen - Dimon
  • Then your question is not at all clear - Mihanik71
  • why not understandable. there is a BOM, there is a DOM, there is a CSSOM, and CSSOM and the DOM are parts of the BOM. if you take an object, for example, input from your example, then it is a DOM node object. it has a "non-zero" onclick property, which refers to an unnamed handler function (function is an object), this function is a handler, although it is nested in a DOM node object, but does not belong to DOM (because it is not displayed on the screen). but at the same time it becomes clear - there is a handler, and there is an onclick property that refers to it (if you use the DOM event model of level 0) - Dimon
  • If you use the W3C DOM Level 2 event model, then I don’t see the connection between the handler function and the target object - the onclick property doesn’t link anywhere - Dimon