They seem to be doing the same thing...Is one modern và one old? Or are they supported by different browsers?

When I handle events myself (without framework) I just always kiểm tra for both and execute both if present. (I also return false, but I have the feeling that doesn"t work with events attached with node.addEventListener).

Bạn đang xem: Event

So why both? Should I keep checking for both? Or is there actually a difference?

(I know, a lot of questions, but they"re all sort of the same =))



Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first)
stopPropagation prevents further propagation of the current event in the capturing & bubbling phases.

preventDefault prevents the default kích hoạt the browser makes on that event.



$("#but").click(function (event) event.preventDefault())$("#foo").click(function () alert("parent click event fired!"))
$("#but").click(function (event) event.stopPropagation())$("#foo").click(function () alert("parent click sự kiện fired!"))

With stopPropagation, only the button"s click handler is called while the div"s click handler never fires.

Where as if you use preventDefault, only the browser"s default kích hoạt is stopped but the div"s click handler still fires.

Below are some docs on the DOM event properties and methods from MDN:

For IE9 và FF you can just use preventDefault và stopPropagation.

To tư vấn IE8 và lower replace stopPropagation with cancelBubble & replace preventDefault with returnValue




Event capturing

When you use sự kiện capturing

| |---------------| |-----------------| element1 | | || -----------| |----------- || |element2 / | || ------------------------- || sự kiện CAPTURING |-----------------------------------the sự kiện handler of element1 fires first, the sự kiện handler of element2 fires last.

Event bubbling

When you use event bubbling

/ ---------------| |-----------------| element1 | | || -----------| |----------- || |element2 | | | || ------------------------- || event BUBBLING |-----------------------------------the event handler of element2 fires first, the event handler of element1 fires last.

Xem thêm: Phim Trò Chơi Hôn Nhân

Any event taking place in the W3C event model is first captured until it reaches the target element và then bubbles up again.

If the capturing EventListener wishes khổng lồ prevent further processing of the sự kiện from occurring it may hotline the stopPropagation method of the sự kiện interface. This will prevent further dispatch of the event, although additional EventListeners registered at the same hierarchy cấp độ will still receive the event. Once an event"s stopPropagation method has been called, further calls khổng lồ that method have no additional effect. If no additional capturers exist and stopPropagation has not been called, the event triggers the appropriate EventListeners on the target itself.

For event bubbling:

Any event handler may choose to prevent further sự kiện propagation by calling the stopPropagation method of the event interface. If any EventListener calls this method, all additional EventListeners on the current EventTarget will be triggered but bubbling will cease at that level. Only one call to stopPropagation is required lớn prevent further bubbling.

For event cancelation:

Cancelation is accomplished by calling the Event"s preventDefault method. If one or more EventListeners gọi preventDefault during any phase of sự kiện flow the default kích hoạt will be canceled.


In the following examples, a click on the hyperlink in the website browser triggers the event"s flow (the sự kiện listeners are executed) & the sự kiện target"s default action (a new tab is opened).



var el = document.getElementById("c");function capturingOnClick1(ev) el.innerHTML += "DIV event capture";function capturingOnClick2(ev) el.innerHTML += "A event capture";function bubblingOnClick1(ev) el.innerHTML += "DIV event bubbling";function bubblingOnClick2(ev) el.innerHTML += "A event bubbling";// The 3rd parameter useCapture makes the sự kiện listener capturing (false by default)document.getElementById("a").addEventListener("click", capturingOnClick1, true);document.getElementById("b").addEventListener("click", capturingOnClick2, true);document.getElementById("a").addEventListener("click", bubblingOnClick1, false);document.getElementById("b").addEventListener("click", bubblingOnClick2, false);Example 1: it results in the output

DIV event captureA event captureA sự kiện bubblingDIV event bubblingExample 2: adding stopPropagation() to lớn the function

function capturingOnClick1(ev) el.innerHTML += "DIV event capture"; ev.stopPropagation();results in the output

DIV sự kiện captureThe sự kiện listener prevented further downward and upward propagation of the event. However it did not prevent the default action (a new tab opening).

Example 3: adding stopPropagation() to lớn the function

function capturingOnClick2(ev) el.innerHTML += "A sự kiện capture"; ev.stopPropagation();or the function

function bubblingOnClick2(ev) el.innerHTML += "A event bubbling"; ev.stopPropagation();results in the output

DIV sự kiện captureA event captureA event bubblingThis is because both sự kiện listeners are registered on the same event target. The sự kiện listeners prevented further upward propagation of the event. However they did not prevent the default kích hoạt (a new tab opening).

Example 4: adding preventDefault() khổng lồ any function, for instance

function capturingOnClick1(ev) el.innerHTML += "DIV sự kiện capture"; ev.preventDefault();prevents a new tab from opening.