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

时间:2022-01-05 05:24:25

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

<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的值。