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








  • 相关阅读:
    JDK里面包含jre,为什么还要下载一个jre呢?
    2021年11月2日,面试经历
    linux内核学习心得
    关于QQ短信接口的使用。
    软件测试--开发者测试例子
    此博客相关声明·AP2017060911I
    21RNC201906034I·代码重构
    20RNC201901313I·代码重构
    19RND201808172·层次设定
    18RND201801311·图像方案日记
  • 原文地址:https://www.cnblogs.com/strinkbug/p/5370659.html
Copyright © 2011-2022 走看看