Javascript tutorial addEventListener Best HTML Event Handling W3C Recommended Method

Поділитися
Вставка
  • Опубліковано 4 жов 2024
  • Code: www.adamkhoury...
    Learn how to use the JavaScript addEventListener() method for an optimal way of adding user interactivity into your HTML4 and HTML5 websites and web applications that apply JavaScript.

КОМЕНТАРІ • 59

  • @ga7853
    @ga7853 6 років тому +1

    Adam, you are great, no one has bother to show old ways and new ways the way you do, thanks a million for a fully explained subject.

  • @StuartKaufman
    @StuartKaufman 9 років тому +4

    Here's a Fantastic Javascript EventListener Tutorial. Thanks Adam Khoury!!

  • @SonaSwing
    @SonaSwing 10 років тому +1

    Very useful, I am just learning so don't even know the old way but your video makes very much sense. Thank you!

  • @tonywilliams2164
    @tonywilliams2164 5 років тому

    The "Down-2-Earth Guru"!! Appreciate the heads up Adam!

  • @cink09
    @cink09 11 років тому

    i love the way you explain the whole process,
    very helpful, found my answer thanks to you.

  • @McGavel1
    @McGavel1 9 років тому

    Cool stuff and thanks for showing browser backward compatibility!

  • @ladyd7778
    @ladyd7778 6 років тому

    Love this tutorial. Simple and easy to follow. Thank you so much!

  • @carmenxena
    @carmenxena 10 років тому

    Really explains this stuff clearly. Nice!!!

  • @iggymach
    @iggymach 9 років тому +1

    Awesome, this will release my HTML code from some unnecessary weight :-)

  • @nc840
    @nc840 3 роки тому

    you are awesome. my professor recommend your video

  • @McGavel1
    @McGavel1 9 років тому

    I love how we can just use the *this* keyword to access a object's methods and properties

  • @alvincruz8296
    @alvincruz8296 6 років тому +3

    This video is very instructive and easy to follow. But its 2018 already, I am thinking if the methods as shown here are still the best as of now.

    • @General_Aladeen
      @General_Aladeen 6 років тому +1

      yup, still they are.

    • @iamreg1965
      @iamreg1965 4 роки тому

      No basically.
      The event model has always supported capturing, target and bubbling phases.
      The eventerlistener interface implements one method - eventHandler.
      One can utilise event delegation controlled by objects implementing the eventlistener interface.
      It makes it a breeze to dynamically add and remove both elements and events.
      Google event delegation and eventHandler for further details.

    • @iamreg1965
      @iamreg1965 4 роки тому

      Google event delegation and eventHandler for much easier ways of controlling DOM events.

  • @rupalitanna6046
    @rupalitanna6046 9 років тому

    very nice tutorial thanks

  • @hercules1943
    @hercules1943 11 років тому

    very thanks! i very like your tutorial! thanks again.

  • @harkcitizens5299
    @harkcitizens5299 9 років тому

    Thank you very much for this tutorial. Iam french

  • @dragonore2009
    @dragonore2009 11 років тому +8

    At the school I attend they teach the old DOM methods and still use the dreaded document.write() all the time. I am constantly finding more innovative ways to write my javaScript instead of the crap they teach at school.

    • @magnusoliver6086
      @magnusoliver6086 3 роки тому

      I know I am pretty randomly asking but do anybody know of a good place to stream new movies online?

    • @kabircameron1818
      @kabircameron1818 3 роки тому

      @Magnus Oliver Lately I have been using Flixzone. You can find it on google :)

    • @marcoalvaro627
      @marcoalvaro627 3 роки тому

      @Kabir Cameron Definitely, I have been watching on FlixZone for since march myself :D

    • @magnusoliver6086
      @magnusoliver6086 3 роки тому

      @Kabir Cameron thanks, I signed up and it seems like they got a lot of movies there :D I really appreciate it!!

    • @kabircameron1818
      @kabircameron1818 3 роки тому

      @Magnus Oliver happy to help =)

  • @donfeto7636
    @donfeto7636 6 років тому

    Good Job Man You Are The Best

  • @dubbertrouble
    @dubbertrouble 11 років тому

    Really helpful!

  • @TakanashiYuuji
    @TakanashiYuuji 11 років тому

    Because of variable 'hoisting'. Function definitions get moved to the top.

  • @hdjksa52
    @hdjksa52 10 років тому

    Heavy north east accent. thanks for showing the code

  • @MiddleEasternInAmerica
    @MiddleEasternInAmerica 11 років тому

    thanks million

  • @24kKarl
    @24kKarl 10 років тому

    Is there a simple way to do this for say hundreds of checkboxes? When the box is checked, I want the value for that checkbox to be added to a list. Ty for the video Adam.

  • @kamaboko1
    @kamaboko1 11 років тому

    Great tut! Thanks.

  • @ath6192
    @ath6192 4 роки тому

    Great!
    Q: Do you have a tutorial for adding the addEventListeners and buttons through an array? :)

  • @valix85
    @valix85 9 років тому

    How can i register My personal event And fires it?
    Congratulations forse yours video, i follow You, simply And Clean, perfect for My worst English :)

  • @Bhuyakasha
    @Bhuyakasha 10 років тому

    It works pretty well, but when i try to add arguments to the function it will always execute the function, without me clicking on the object.

  • @SandeepKumar-cx3kw
    @SandeepKumar-cx3kw 8 років тому

    thanks,, great help

  • @moodkilt2665
    @moodkilt2665 11 років тому

    hmm..actually i rather use the old way. In wich way is it not good to have the callings withing the body tags...Is it only because it can get messy for you to find where you are in the document or will the page run into more errors or something like that?

  • @TheRandomDestruction
    @TheRandomDestruction 11 років тому

    Thanks 256!

  • @jaepark75
    @jaepark75 8 років тому +1

    What text editor are you using?

  • @justakidify
    @justakidify 11 років тому

    How is it possible for btn1Func to be called on line 7 before it was defined (line 13)?

  • @clipoff
    @clipoff 9 років тому

    what does the usecaptuer true do? exactly what is captured?

  • @ionicafardefrica
    @ionicafardefrica 6 років тому

    As someone accustomed to back end, Java Script/jQuery has always been a pain in the ass. You ALWAYS need a mock up front to demonstrate your work, and most of the time, it needs to be pretty good. Not only you need to know something you consider outside your domain (and kind of boring/trivial and non intuitive), but also something that doesn't have a standard and works on all kinds of spaghetti for four types of browsers. And now it evolves. What the fuck people, can we get standards? Any day now? For example, can we agree if left click event is 0 or 1???

  • @mayue5547
    @mayue5547 9 років тому

    why window.onload = addListeners?
    does this line overwrite the window.onload method?

    • @AdamSalma
      @AdamSalma 9 років тому

      +Ma Yue Its so that the function only runs after the entire html document has been loaded, otherwise it can bring up errors later on.
      eg with document.getElementById('myId'): the html element with the id "myId" isn't loaded and so can't be selected in JS

  • @andrewrico8321
    @andrewrico8321 5 років тому

    are you still on the road?

  • @muhammadkarolia2722
    @muhammadkarolia2722 7 років тому

    what app did you use

  • @damionreid3164
    @damionreid3164 8 років тому

    This is not the best way to do this. Given that for every "document.getElemen...." you have to add it both in the addEventListener as well as the attachEvent block. Create a function and pass the object, event and handler to it. then depending on whether the attachEvent exists, it either attach the event or adds the event listener

  • @js312
    @js312 5 років тому

    Is it still the right way to do it in 2019?

    • @AdamKhoury
      @AdamKhoury  5 років тому

      Yes I think so. Anonymous functions can be replaced by arrow functions, if you so desire... that is the only change since this video. But it is not necessary to change all of your anonymous functions to arrow functions.

    • @js312
      @js312 5 років тому

      Do you guys still care about people using ie 8-9 ?
      @@AdamKhoury , thanks. Also should you really bother writing if else inside addListeners function ? If the users use way out of date technology it should be theirs problem and they should update isin't it ?

  • @marclaren6193
    @marclaren6193 5 років тому

    WHAT DOES "WINDOW" STAND FOR ??

    • @AdamKhoury
      @AdamKhoury  5 років тому

      The JavaScript "window" object.

  • @das_evoli
    @das_evoli 9 років тому

    But why false or true?

  • @codeacademybd
    @codeacademybd 8 років тому +1

    too much zoom and zoom :(

  • @benja303
    @benja303 9 років тому +1

    YELLOWTEXTTOOOBRIGHT

  • @marclaren6193
    @marclaren6193 5 років тому

    THIS VIDEO IS SOOOOO CONFUSING !!!!

    • @AdamKhoury
      @AdamKhoury  5 років тому

      I'll try to help clarify anything you find confusing. This exercise just shows how to apply event handling through script instead of adding event handling to your html elements directly in the HTML code.