JS inside the Dome

The DOM0 event model in JS
1, content model: directly the function name as an attribute value of an event property of an HTML tag;
Example Rg:<button onlick= "func ()" > Buttons </button>

2, the script model: in the JS script through the event attribute to bind;

Example eg:window.onlead = function () {}
But it also has limitations: the same node can only bind one type of event

the DOM2 event model in JS
1, adding event Bindings: Btn1.addevent ("Onlick" function)
Other browsers: Btn1btn1.addeventlistener ("click" function, True/false);
parameter three: false (default); Indicates event bubbling, true: Indicates event capture
Compatible wording: if (btn1btn1.addchevent) {
Btn1.btn1.addchEvent
}else{
Btn1.btn1.addEventListener ()
}
Pros: Consent node, you can add multiple listeners of the same type of event

2. Cancel Event Binding:
Note: If you cancel an event binding, the callback function must use the known function when binding the event, and the anonymous function cannot be used.
because you need to pass in the function name when you cancel the event binding
RemoveEventListener ("click, function Name) detachevent (" onclick "function name)
3. Block Event bubbling:
(1) Set the E.cancebubble property to true in IE browser
Other Browsers: Call E.stoppropagetion ();
compatible wording: function Myparagrapheventhandler (e) {
e = e | | window.event;
if (e.stoppropagation) {
e.stoppropagation (); outside//ie
} else {
e.cancelbubble = true;//ie
                           }
                    }
(2) block default events:

in IE: Set the E.returnvalue property to false;
Other Browsers: Call E.preventdefault ();
compatible wording: function EventHandler (e) {
e = e | | window.event;
Prevent default behavior
if (e.preventdefault) {
E.preventdefault (); outside//ie
} else {
E.returnvalue = false;//ie
                       }
                 }

Third, the stream of events in JS

   1, element bubbling: When a DOM element triggers an event,   starts from the current DOM element, triggering its ancestor element one by one, Directs the DOM root node
               DOM model   are bubbling events
              ie used, attachevent () added event   is bubbling;
             other browsers,. AddEventListener Add event when three event argument is false   bubble
  2, event capture : When a DOM element fires an event, it starts at the root of the DOM, triggering the same type of event of its ancestor element one at a time, knowing that

is triggered to the current element.

The current element can only be captured when you add an event using. AddEventListener and you set 43 parameters to Ture

Note: Bubbling event: Current element---> root node Capture event: root node---> current element

JS inside the Dome