JS-为句柄添加监听函数

最新推荐文章于 2024-10-30 18:24:25 发布

weixin_34293911

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量93

点赞数

文章标签： javascript ViewUI

具体谈如何实现JS为句柄添加监听函数之前先看一段代码,算是抛出这个问题。

<html>
<head>
<title>JS为句柄添加监听函数</title>  
 
<script>
    function message(){
        alert("hello!");
    }   
</script>
</head>
<body>
    <center>
        <div onclick="message();"><p>JavaScript</p></div>
    </center>
</body>
</html>

程序代码本身的运行是不会有问题的。不过我的着眼点在于CSS是为了让html文档结构和变现分离,JavaScript着眼于文档结构和行为的分离,上面带按摩并未做到文档结构和行为的彻底分离(div上指明了onclick事件)。

接下来就是如何在js中实现对div添加onclick监听函数。

JS实现行为、结构分离

其实在JavaScript中为DOM元素绑定事件监听函数是一件非常常见的事情,但是这里也有许多bug。各种浏览器对于事件的绑定都提供了很多的方法,但是可靠的只有3种:

传统绑定:

<html><head>
    <title>JS为句柄添加监听函数</title>
 
    <script>
        function message(message) {
            alert(message);
        }
 
        window.onload = function() {
            var div = document.getElementById("div");
            div.onclick = function(event) {
                message(event.type);
            };
        }
    </script></head><body>
    <center>
        <div id="div">
            <p>JavaScript</p>
        </div>
    </center></body></html>

A：传统的绑定方法,非常简单稳定,而且函数体内的this就是正在处理事件的节点。

B:一个元素的事件句柄只能注册一个函数,重复注册会产生覆盖;而且传统的绑定只会在事件冒泡中运行。

Tips:事件冒泡:当一个元素上的事件触发时,同样的事件会在该元素的所有祖先元素中触发。该事件从元素一直冒泡到DOM树的最上层,这一过程称为事件冒泡。

W3C标准绑定:

<html><head>
    <title>JS为句柄添加监听函数</title>
 
    <script>
        function message(message) {
            alert(message);
        }
 
        window.onload = function() {
            var div = document.getElementById("div");
            //注册监听函数
            div.addEventListener('click',function(event){
                message(event.type+"  hello");
            },false);
            //重复注册监听函数
            div.addEventListener('click',function(event){
                message(event.type+"  world");
            },false);
        }
    </script></head><body>
    <center>
        <div id="div">
            <p>JavaScript</p>
        </div>
    </center></body></html>

A、这种绑定方法同时支持事件处理的捕获和冒泡两个阶段;同一元素的同一事件句柄可以注册多个监听函数;而且内部this指向当前元素

Tips:adEventListener中的第三个额参数为false(冒泡获取由里向外)|true(由外向里)

B、我大IE不支持这种注册方法。

IE绑定:

<html><head>
    <title>JS为句柄添加监听函数</title>  <script>
        function message(message) {
            alert(message);
        }
 
        window.onload = function() {
            var div = document.getElementById("div");
            //注册监听函数
            div.attachEvent('onclick',
                function() {
                    message(window.event.srcElement.innerHTML + ' ' + this.innerHTML + 1);
                }
            );
            //重复注册监听函数
           div.attachEvent('onclick',
                function() {
                    message(window.event.srcElement.innerHTML + ' ' + this.innerHTML + 2);
                }
            );
        }
    </script></head><body>
    <center>
        <div id="div">
            <p>JavaScript</p>
        </div>
    </center></body></html>

A:这种绑定方法,可以为同一事件句柄注册多次。

B:IE的事件模型不支持事件捕获;监听函数体内的this指向的不表示当前元素,而且window.event.srcElement指向的是发生事件的节点,而不是当前节点。

除了强烈的吐槽一下IE浏览器之外,我们也只能静下心来寻求一种兼容的方法了,接下来介绍两种方法:

跨浏览器方法一:

function addEvent(element, type, handler) {
      if (!handler.$$guid) handler.$$guid = addEvent.guid++;
      if (!element.events) element.events = {};
      var handlers = element.events[type];
      if (!handlers) {
        handlers = element.events[type] = {};
        if (element["on" + type]) {
          handlers[0] = element["on" + type];
        }
      }
      handlers[handler.$$guid] = handler;
      element["on" + type] = handleEvent;
    };
    addEvent.guid = 1;
     
    function removeEvent(element, type, handler) {
      if (element.events && element.events[type]) {
        delete element.events[type][handler.$$guid];
      }
    };
    function handleEvent(event) {
      var returnValue = true;
      event = event || fixEvent(window.event);
      var handlers = this.events[event.type];
      for (var i in handlers) {
        this.$$handleEvent = handlers[i];
        if (this.$$handleEvent(event) === false) {
          returnValue = false;
        }
      }
      return returnValue;
    };
     
    function fixEvent(event) {
      event.preventDefault = fixEvent.preventDefault;
      event.stopPropagation = fixEvent.stopPropagation;
      return event;
    };
    fixEvent.preventDefault = function() {
      this.returnValue = false;
    };
    fixEvent.stopPropagation = function() {
      this.cancelBubble = true;
    };

参考:http://dean.edwards.name/weblog/2005/10/add-event2/

跨浏览器方法二:

function addEvent( obj, type, fn ) {
      if ( obj.attachEvent ) {
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
        obj.attachEvent( 'on'+type, obj[type+fn] );
      } else
        obj.addEventListener( type, fn, false );
    }
    function removeEvent( obj, type, fn ) {
      if ( obj.detachEvent ) {
        obj.detachEvent( 'on'+type, obj[type+fn] );
        obj[type+fn] = null;
      } else
        obj.removeEventListener( type, fn, false );
    }

参考::http://ejohn.org/projects/flexible-javascript-events/