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

相关文章

  • 前端面试题(3)——DOM事件类

    基本概念:DOM事件的级别 DOM事件模型:事件冒泡事件捕获 DOM事件流 描述DOM事件捕获的具体流程 Even...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级、DOM1级、DOM2级、DOM3级DOM事件:DOM0级事件处理、...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级,DOM1级,DOM2级和DOM3级DOM事件:DOM0级事件处理,...

  • DOM0和DOM2级事件简单理解

    关于DOM0 和DOM1级事件可以简单理解为:事件分为DOM 0级事件和Dom 2级事件,DOM2级事件也叫做事件...

  • Dom事件

    基本概念 Dom事件级别 Dom事件模型 Dom事件流 描述Dom事件捕获的具体流程 Event对象的常见应用 自...

  • 3-6 DOM事件

    问题 DOM 事件的级别 DOM 事件模型(就是捕获和冒泡儿) DOM 事件流 描述DOM事件捕获的具体流程 Ev...

  • HTML DOM 事件

    HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中...

  • 网易微专业-DOM编程艺术 05 事件

    1、DOM事件⑴主要内容▪事件流▪事件注册▪事件对象▪事件分类▪事件代理 ⑵什么是DOM事件▪点击一个DOM元素▪...

  • DOM事件类

    基本概念:DOM事件的级别 DOM事件模型 DOM事件流 描述DOM事件捕获的具体流 Event对象的常见应用 自...

  • DOM事件

    DOM事件的级别 DOM事件模型 DOM事件流 描述DOM时间捕获的具体流程 Event对象的常见应用 自定义事件...

网友评论

      本文标题:DOM事件

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