According to the docs, a react synthetic event is a
a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.
Why is it important that the events work the same in every browser if their interface is always the same (as implied by 'It has the same interface as the browser’s native event')? Dose the fact that React uses event delegation make this nesessary somehow?
A couple of years ago, developers needed to use something like this to be sure that one even would work on every browser.
function addEvent(evnt, elem, func) {
if (elem.addEventListener) // W3
elem.addEventListener(evnt,func,false);
else if (elem.attachEvent) { // Internet Explorer
elem.attachEvent("on"+evnt, func);
}
else { // other browsers
elem["on"+evnt] = func;
}
}
Most of the times the problems were caused by Internet Explorer. React (the same way as jQuery does) that care of it for us. Because still today most companies are still using IE10/11 we need to pay attention in writing the correct code to attach an event.