Add events, prevent event propagation, and delete events on the page

1. Add events

Method 1: embed the event script in XHTML directly ('clicked' is displayed ')

<input type="button" onclick="alert('clicked');" value="click me"/>

Method 2: Separate the event script from the function ('clicked' pops up ')

<input type="button" onclick="clickEvent();" value="click me" /><script type="text/javascript">    function clickEvent() {        alert("clicked");    }</script>

Method 3: The behavior structure is completely separated ('clicked again 'pops up and only the last Bound event is executed). This method allows only one processor for the same event of an element, it is executed only once.

<input type="button" id="Example" value="click me" /><script type="text/javascript">    var btn = document.getElementById("Example");    btn.onclick = function () {        alert("clicked");    };    btn.onclick = function () {        alert("clicked again");    };</script>

Method 4: Listen to events (IE6, IE7, and IE8), pop up 'clicked again 'and 'clicked' in sequence, and pop up 'clicked' and 'clicked again' in other browsers in sequence '), the reason is that the W3C standard addeventlistener method executes events in the order of event registration. The attachevent method of IE is the opposite. Events registered after the registration are first published, and events registered before the registration are triggered.

<input type="button" id="Example" value="click me" /><script type="text/javascript">    function addEvent(eventTarget, eventType, evrntHandler) {        if (eventTarget.addEventListener) {            eventTarget.addEventListener(eventType, evrntHandler, false);        }        else if (eventTarget.attachEvent) {            eventType = "on" + eventType;            eventTarget.attachEvent(eventType, evrntHandler)        }        else { eventTarget["on" + eventType] = evrntHandler; }    }    var btn = document.getElementById("Example");    addEvent(btn, "click", function () {        alert("clicked");    });    addEvent(btn, "click", function () {        alert("clicked again");    });</script>

In summary, Method 4 is the best choice for adding events.

2. Prevent event bubbles

Events will be transmitted in nested functions. In the following code, click inner, and pop up 'inner ', 'middle', and 'out'. Then click middle, in turn, click 'ddle' and 'out', and then 'out. The third parameter of the addeventlistener (event, function, capture/bubble) function: True indicates the capture stage, and false indicates the bubble stage. To be compatible with IE event processing, set it to false. If the third parameter is set to true, in the standard browser, click inner, pop up 'out', 'middle', and 'inner 'in sequence '.

<script type="text/javascript">    function addEvent(eventTarget, eventType, evrntHandler) {        if (eventTarget.addEventListener) {            eventTarget.addEventListener(eventType, evrntHandler, false);        }        else if (eventTarget.attachEvent) {            eventType = "on" + eventType;            eventTarget.attachEvent(eventType, evrntHandler)        }        else { eventTarget["on" + eventType] = evrntHandler; }    }    addEvent(window, "load", function () {        var out = document.getElementById("out");        var middle = document.getElementById("middle");        var inner = document.getElementById("inner");        addEvent(out, "click", function () { alert("out") })        addEvent(middle, "click", function () { alert("middle") })        addEvent(inner, "click", function () { alert("inner") })    });</script><div style="padding:20px;background:red" id="out">    <div style="padding:20px;background:green" id="middle">        <div style="padding:20px;background:white" id="inner">        </div>    </div></div>

How to Prevent event Propagation? The following code can solve the problem. Click inner to bring up 'inner '. Click middle to bring up 'middle'. Click out to bring up 'out'

<script type="text/javascript">    function addEvent(eventTarget, eventType, evrntHandler) {        if (eventTarget.addEventListener) {            eventTarget.addEventListener(eventType, evrntHandler, false);        }        else if (eventTarget.attachEvent) {            eventType = "on" + eventType;            eventTarget.attachEvent(eventType, evrntHandler)        }        else { eventTarget["on" + eventType] = evrntHandler; }    }    function cancelPropagation(event) {        event = window.event || event;        if (document.all) {            event.cancelBubble = true;        } else {            event.stopPropagation();        }    }    addEvent(window, "load", function () {        var out = document.getElementById("out");        var middle = document.getElementById("middle");        var inner = document.getElementById("inner");        addEvent(out, "click", function () { alert("out") })        addEvent(middle, "click", function (evt) {            alert("middle");            cancelPropagation(evt);        });        addEvent(inner,"click",function(evt){            alert("inner");            cancelPropagation(evt);        });    });</script><div style="padding:20px;background:red" id="out">    <div style="padding:20px;background:green" id="middle">        <div style="padding:20px;background:white" id="inner">        </div>    </div></div>

If you want to release the binding event, use the following code.

<script type="text/javascript">    function addEvent(eventTarget, eventType, evrntHandler) {        if (eventTarget.addEventListener) {            eventTarget.addEventListener(eventType, evrntHandler, false);        }        else if (eventTarget.attachEvent) {            eventType = "on" + eventType;            eventTarget.attachEvent(eventType, evrntHandler)        }        else { eventTarget["on" + eventType] = evrntHandler; }    }    function removeEvent(eventTarget, eventType, evrntHandler) {        if (eventTarget.removeEventListener) {            eventTarget.removeEventListener(eventType, evrntHandler, false);         }        else if (eventTarget.detachEvent) {            eventType = "on" + eventType;            eventTarget.detachEvent(eventType, evrntHandler)         }        else { eventTarget["on" + eventType] = null; }     }    addEvent(window, "load", function () {        var ok = document.getElementById("ok");        var switchBtn = document.getElementById("switchBtn");        var flag = true;        addEvent(switchBtn, "click", function () {            if (flag) {                addEvent(ok, "click", show);                switchBtn.value = "removeEvent";                flag = false;            }            else {                removeEvent(ok, "click", show);                switchBtn.value = "addEvent";                flag = true;             }        });    });    function show() {        alert("I am here");    }</script><input type="button" value="addEvent" id="switchBtn" /><input type="button" value="Try to click me^_^" id="ok" />