JS Event Monitoring

Further implement business processing by adding event listeners. You can add the same event listener to the same element, execute the principle from top to bottom, or you can add multiple event listeners for the same element.

For element monitoring:

document.getElementById ("Idname"). AddEventListener ("EventType", functionname);//Note: The front is not added as the Click event

Monitoring for Window objects:

Window.addeventlistener ("Resize", function () {Aler ("form becomes larger or smaller");}); /Through resize this event triggers the listener to toggle the percentage of the browser window or maximize the minimized transformation.

Implement parameter passing in monitoring:

document.getElementById ("Idname"). AddEventListener ("click", Function () {var x=5; functionname (x);}) function FunctionName (a) {alert (a);};

Event bubbling:

Event bubbling mainly means that there are 2 elements a and B have listening events, a element contains B elements such as a element is a DIV.B element is span. By setting the listener event to them click, when you click on the div, there is no point to the span tag range. This will trigger the DIV's listener event, which will trigger the span tag's listener event when you click on the span tag, and then trigger the DIV listener event. That is, from inside to outside the event listener trigger process.

document.getElementById ("Idname"). AddEventListener ("click", Function () {alert ("Test");},false);//default is bubbling Pass

Event catch:

Event capture is just the opposite of event bubbling. Is the process of triggering a listener event from outside to inside

document.getElementById ("Idname"). AddEventListener ("click", Function () {alert ("Test");},true);//Capture and transfer

To remove a listener event:

All of the above are through AddEventListener (' EventType ', functionname) to add listening events, to remove the generated listener events with RemoveEventListener (' EventType ', functionname);

Note: AddEventListener () and RemoveListener () are not supported for opera 7.0,IE8 and previous versions. The solution is to use attachevent () and detachevent () instead of adding and deleting;

By judging if (Element.addeventlistener) {//using AddEventListener ()}else if (element.attachevent) {//Using attachevent ()}

JS Event Monitoring