DOM初探（23）——事件处理程序的运行环境

事件处理程序的运行环境：

1.ele.onxxx = function(event){}

程序this指向的是dom元素本身

2.obj.addEventListener(type,fn,false);

程序this指向的是dom元素本身

3.obj.attachEvent(“on”+type,fn)；

程序this指向的是window

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <div style="width:100px;height:100px;background-color:red;"></div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
            div.onclick = function () {
                console.log(this);
            }
        </script>
    </body>
</html>

他绑定的就是他自己。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <div style="width:100px;height:100px;background-color:red;"></div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
            div.addEventListener("click",function(){
                console.log(this);
            },false)
        </script>
    </body>
</html>

他绑定的也是他自己。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <div style="width:100px;height:100px;background-color:red;"></div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
            div.attachEvent("onclick",function(){
                console.log(this);
            });
        </script>
    </body>
</html>

人家偏偏就指向window。但是咱们不想要window这个结果，你想我们在绑定事件里面写this的话，肯定想要这个this指向自己吧，这是最好的一种情况，怎么办呢？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <div style="width:100px;height:100px;background-color:red;"></div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
            div.attachEvent("onclick",function(){
                handle.call(div);
            });
            function handle(){
                this.
            }
        </script>
    </body>
</html>

练习45：封装兼容性的addEvent(elem,type,handle);方法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <div style="width:100px;height:100px;background-color:red;"></div>
        <script type="text/javascript">
            function addEvent(elem,type,handle) {
                if(elem.addEventListener){
                    elem.addEventListener(type,handle,false);
                }else if(elem.attachEvent){
                    elem.attachEvent("on" + type,function(){
                        handle.call(elem);
                    })
                }else{
                    elem["on" + type] = handle;
                }
            }
        </script>
    </body>
</html>

DOM初探（23）——事件处理程序的运行环境

猜你喜欢