zoukankan      html  css  js  c++  java
  • 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的值。
     








  • 相关阅读:
    ADO.NET 3.5高级编程:应用LINQ&Entity Framework
    C#高级编程(第8版)
    ASP.NET MVC 4 Web编程
    Version of SQLCE in WP8
    字符圆角尖角实现对话框
    数字跳动放大
    jquery框架和mvvm框架的类名操作性对比
    按钮也是一门大学问
    图片轮播
    滑动显示大图升级版
  • 原文地址:https://www.cnblogs.com/strinkbug/p/5370659.html
Copyright © 2011-2022 走看看