JavaScript基础练习源码（二）Event事件相关

sshong 发表于2013年4月25日 19:44:16 更新于2013年4月25日 19:44:59

js里的event跟flash的一样（actionscript也是ECMAScript，本是同根生），也有捕获阶段--目标阶段--冒泡阶段。
window --> document --> HTMLHtmlElement --> body --> 父element --> element --> 父element --> body --> HTMLHtmlElement --> document --> window
当然也不是所有事件都冒泡。

html里事件侦听的方式有3种：
1、在js里设置对象的属性为处理函数,

window.onload = function(){}

2、在html里设置标签属性为一段js代码，

<button onclick='alert("click");'>

浏览器会把这段js代码封装转换为一个函数，并转化为1的方式。

function wrap(event) {
    with(document) {
        with(this.form || {}) {
            with(this) {
                alert("click");
            }
        }
    }
}

1和2的设置方式会互相覆盖。
另外，对于有些window事件如onload、onunload等，js中是直接对window设置侦听，如果写在html里是放在body上，如

<body onload='xxx'>等同于window.onload=wrap(){xxx;}

3、addEventListener（IE9之前只支持attachEvent）

document.addEventListener('click', function(){XXX}, true|false)

以上方式，不推荐方式2。2的方式在html里夹杂js代码，不便于分离，同时由于有匿名函数封装，作用域也很诡异。
1、3方式中，在事件处理函数中的this就是侦听器所在的对象。

参考如下代码：

<html>
<head>
    <title>test event(www.asarea.me)</title>
    <script type="text/javascript">
    //load事件不冒泡
    //click事件冒泡
    window.onclick = function() {
        console.log('window click');
    }

    window.onload = function() {
        console.log('window loaded handler by onload');
    }

    addListener(window, 'load', function () {
        console.log('window loaded handler by addEventListener');

        var img = document.createElement('img');
        img.src = 'http://www.asarea.me//res/upload/htmltree_20130424211111.gif';
        img.onload = function () {
            console.log('img loaded');
        }

        var script = document.createElement('script');
        script.src = "http://lib.sinaapp.com/js/jquery/1.8.2/jquery.min.js";
        script.onload = function() {
            console.log('script loaded');
        }

        document.body.appendChild(img);
        (document.head || document.getElementsByTagName('head')[0]).appendChild(script);
    });

    //写在html上的body中的onload响应会覆盖window.onload
    function loadHandlerByHtmlProp() {
        console.log('window loaded handler by loadHandlerByHtmlProp');
    }


    //以下document相关侦听
    document.onclick = function() {
        console.log('document clicked', this === document);
    }

    document.onload = function() {
        console.log('document loaded event handler');
    }
    
    addListener(document, 'load', function() {
        console.log('document loaded event handler');
    });


    function addListener(obj, evt, handler) {
        if(obj.addEventListener) {
            obj.addEventListener(evt, handler);
        }
        else if(obj.attachEvent) {
            obj.attachEvent('on' + evt, handler);
        }
    }
    </script>
</head>
<!--这会覆盖js中的window.onload写法-->
<body onload='loadHandlerByHtmlProp();'>
</body>
</html>

输出如下：

标签：无分类：JS&Html5阅读：2471

旧一篇：JavaScript基础练习源码（一）DOM相关新一篇：JavaScript基础练习源码（三）css脚本化相关

暂无评论

添加评论

联系我

分类

琐碎文字 As3&Flex RIA UG English CodingArt C++ PHP Webserver E音乐盒 Unity3d C# JS&Html5 Tools mobile golang