JavaScript：关于事件处理程序何时可以直接访问元素的属性

指定在元素的的事件处理程序中指定

<input type="button" value="click me" onclick="alert(this.value)"/>

这段代码可以正确工作，点击之后会弹出 click me字符串；

如果把该代码改为：

<script>

    function clickMe(){

         alert(value);

    }

</script>

<input type="button" value="click Me" onclick="clickMe()"/>

没有任何反应。

如果再修改为在JavaScript代码中动态指定事件处理函数，如下：

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

<script>

    function clickMe(){

         alert(this.value);

    }

    var btn = document.getElementById("myBtn");

    btn.onclick=clickMe;

</script>

那么点击按钮之后，弹出的就是click Me，也就是此时this有效。

原因在于，在html代码中直接指定的事件响应代码，浏览器会动态创建一个封装着元素属性的函数，函数内部还有一个局部变量event，然后再调用在onclick属性中指定的那段js代码。

如果要模拟一下，则类似于如下的代码：

假设有如下元素：

 <input type="button" id="myMock" value="mock" onclick="clickMe1()" />  

那么当点击该按钮的时候，浏览器会创建如下这么一个函数来执行在onclick属性中指定的JavaScript代码。

<script>

        function mock() {

            with (document) {

                var item = getElementById("myMock");

                with (item) {

                    clickMe1();

                }

            }

        } 

</script>

因为clickMe1不是mock的内部函数，他只是在mock中被调用，所以clickMe1内部直接访问value是无效的。

而如果我们在onclick中指定的不是一个执行函数的代码，而是直接把该函数的代码放在这里，也就是：

 <input type="button" value="mock" id="myMock" onclick="alert(value)" />  

那么响应的mock函数就会变为

<script>

        function mock() {

            with (document) {

                var item = getElementById("myMock");

                with (item) {

                    alert(value);

                }

            }

        } 

</script>

此时当然可以正确获取到item的value的值。

 

来自为知笔记(Wiz)