DOM事件

作者: 努力进化 | 来源:发表于2018-08-23 16:21 被阅读0次

    JavaScript与HTML之间的交互式通过事件实现的

    onclick
    onfocus  :  聚焦
    onblur    :  失焦
    onmouseover  :  鼠标移到某元素之上
    onmouseout  :  鼠标从某元素移开
    onload  :  页面加载时触发
    onchange  :  域的内容改变时发生
    onsubmit  :  表单中的确认按钮被点击时发生
      :  有事件一定有对应一个处理结果,用函数表示
    onresize  :  浏览器的尺寸发生改变
    onscroll  :  窗口滚动
    onchange  :  事件支持的标签input,select,textarea
    

    无论在文本框中输入什么,最后都变成change ,前面有学到这个,当时是变成大写。

    <input type="text" id="txt">
        <script>
            var txt = document.getElementById("txt");
            txt.onchange = function () {
                this.value = "change"
            }
        </script>
    

    键盘事件与KeyCode属性

    onkeydown:用户按下一个键盘按键时发生
    onkeypress:在键盘按键按下并释放一个键时发生
    onkeyup:在键盘按键松开时发生
    keyCode:返回onkeypress,onkeydown或onkeyup事件触发的键的值的字符代码,或键的代码
    

    eg:

    当按下按键时,网页弹出所按的按键的键码。
    <body>
        <script>
             document.onkeydown = function(event){
                alert(event.keyCode)
    }
        </script>
    </body>
    

    eg:

    当松开按键时,显示当前文本长度

    <p>你还可以输入<em id="section">0</em>/150</p>
        <textarea cols="30" rows="10" id="txt"></textarea>
        <script>
            var section = document.getElementById("section");
            var txt = document.getElementById("txt");
            txt.onkeyup = function(){
                var length = txt.value.length;
                section.innerHTML = length;
            }
        </script>
    
    01.png

    相关文章

      网友评论

          本文标题:DOM事件

          本文链接:https://www.haomeiwen.com/subject/mnxmiftx.html