Maison > interface Web > js tutoriel > Explication détaillée des compétences d'événement multi-navigateurs javascript handler_javascript

Explication détaillée des compétences d'événement multi-navigateurs javascript handler_javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2016-05-16 15:08:02
original
1313 Les gens l'ont consulté

Cet article partage le mécanisme de traitement des événements entre navigateurs JavaScript pour votre référence. Le contenu spécifique est le suivant

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>跨浏览器的事件处理程序</title>

</head>

<body>

  <input type="button" value="click me" id="myBtn"/>

  <input type="button" value="解除" id="unlisten"/>

  

  <script>

  

    function $(id){

      return document.getElementById(id);

    }

  

    var EventUtil={

      fnCount:0

      ,fnData:{}

      ,addHandler:function(element,type,handler){

        this.fnCount++;

        handler.fid = this.fnCount;

        var _fn = handler;

        handler = function(){

          _fn.call(element);

        };

        this.fnData[this.fnCount] = handler;

  

        if(element.addEventListener){

          element.addEventListener(type,handler,false);

        else if(element.attachEvent){

          element.attachEvent("on"+type,handler);

        else {

          element["on"+type]=handler;

        }

      }

      ,removeHandler:function(element,type,handler){

        handler = this.fnData[handler.fid];

        if(element.removeEventListener){

            element.removeEventListener(type,handler,false);

        }else if(element.detachEvent){

            element.detachEvent("on"+type,handler);

        }else{

            element["on"+type]=null;

        }

      }

    }

  

    var btn=$("myBtn");

    var unbtn = $('unlisten');

    var bindFn1=function(){

      alert(this.id);

    };

    var bindFn2=function(){

      alert('2');

    };

  

    EventUtil.addHandler(btn,"click",bindFn1);

    EventUtil.addHandler(btn,"click",bindFn2);

    //EventUtil.removeHandler(btn,"click",bindFn1);

    EventUtil.addHandler(unbtn,"click",function(){

      EventUtil.removeHandler(btn,"click",bindFn1);

    });

  

  

  </script>

</body>

</html>

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal