Chapters

33 Chapters | 3:02:08 |

01

Lift Stuff! The js- Prefix

7:39
02

(document).ready() & Ordering

4:45
03

All about Event Bubbling

4:31
04

The Event Argument & stopPropagation

3:07
05

The DOM Element Object

6:35
06

The Magical this Variable & currentTarget

4:30
07

A Great Place to Hide Things! The data- Attributes

5:48
08

Organizing with Objects!

5:08
09

"Static" Objects & the this Variable

6:05
10

Getting to the bottom of the this Variable

4:29
11

Fixing "this" with bind()

6:08
12

Immediately Invoked Function Expression!

7:56
13

The window Object & Global Variables

6:12
14

Instantiatable Objects & Constructors

4:17
15

The Object prototype!

3:32
16

prototype Versus __proto__

7:02
17

Extending the Prototype

2:34
18

AJAX Form Submit: The Lazy Way

5:41
19

Old-School AJAX HTML

7:17
20

Delegate Selectors FTW!

3:45
21

Proper JSON API Endpoint Setup

4:46
22

POSTing to the API Endpoint

3:59
23

Handling JSON Validation Errors

6:40
24

Clearing the Form, Prepping for a Template

3:56
25

JavaScript Templating

5:57
26

Full-JavaScript Rendering & FOSJsRoutingBundle

7:26
27

All About Promises!

8:11
28

Catching a Failed Promise

5:58
29

Promise catch: Catches Errors?

6:40
30

Making (and Keeping) a Promise

7:57
31

Promise Chaining

3:43
32

SweetAlert: Killing it with Promises

5:11
33

Sweet Alert: Create a Promise!

4:45

> JavaScript Fundamentals > JavaScript for PHP Geeks

Buy Access to Course

04.

The Event Argument & stopPropagation

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

7 Comments

Sort By

Login or Register to join the conversation

Johan 8 years ago

I think I've used the stopPropagation() function before.

I had a table where each row had a delete button and each row was clickable as well, navigating to some other page. If you're clicking the delete button, you don't want to trigger the event that navigates to the page. I'm not sure if I used stopPropagation() for that but I think that function could be useful in that case.

1 |

weaverryan SFCASTS Johan 8 years ago

Hey Johan!

I think that's indeed a valid use-case! If what you described is your requirements, I can't think of a better way of doing this. LOVE it - thanks for commenting :).

Cheers!

2 |

Vuong N. 6 years ago edited

there what's font name and font size you using in Phpstorm ? Thanks teacher.

|

Jozef Repáň 8 years ago

what about using href="javascript:void(0)" instead of href="#" in jQuery handled links?

|

Victor SFCASTS Jozef Repáň 8 years ago

Hey Jozef,

Yes, you can use it as well. But actually, it's something different than href="#" so we can't compare it. Actually, it's more similar to "event.preventDefault();". because without preventDefault() you will add '#' to the end of the current URL. But I think, event.preventDefault() is more proper way than using href="javascript:void(0)" nowadays and worth you nothing if you handle clicks with JS code - just add e.preventDefault() to the beginning of your handler.

Cheers!

1 |

Rafael F. 8 years ago

Hello guys.

Could you please explain the difference between e.stopPropagation() and e.stopImmediatePropagation() ? One time i also so a code like that.

$(document).on("submit", "form", function(e){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
[......]

});

Is this really necessary? Thanks..

|

MolloKhan SFCASTS Rafael F. 8 years ago edited

Hey Rafael F.

What "e.stopPropagation()" does is to stop any other *parent* handlers from being executed. and "e.stopImmediatePropagation()" stops *all* handlers. Give it a check to the code snippet shown in this answer: https://stackoverflow.com/a...

Cheers!

|

This tutorial uses an older version of Symfony... but since it's a JavaScript tutorial, the concepts are still ? valid!

Symfony 3

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "symfony/symfony": "3.1.*", // v3.1.10
        "twig/twig": "2.10.*", // v2.10.0
        "doctrine/orm": "^2.5", // v2.7.1
        "doctrine/doctrine-bundle": "^1.6", // 1.10.3
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.2
        "symfony/swiftmailer-bundle": "^2.3", // v2.4.0
        "symfony/monolog-bundle": "^2.8", // 2.12.0
        "symfony/polyfill-apcu": "^1.0", // v1.2.0
        "sensio/distribution-bundle": "^5.0", // v5.0.22
        "sensio/framework-extra-bundle": "^3.0.2", // v3.0.16
        "incenteev/composer-parameter-handler": "^2.0", // v2.1.2
        "friendsofsymfony/user-bundle": "~2.0@dev", // dev-master
        "doctrine/doctrine-fixtures-bundle": "~2.3", // v2.4.1
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.2.1
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "friendsofsymfony/jsrouting-bundle": "^1.6" // 1.6.0
    },
    "require-dev": {
        "sensio/generator-bundle": "^3.0", // v3.1.1
        "symfony/phpunit-bridge": "^3.0" // v3.1.6
    }
}

Previous Chapter

Next Chapter