JavaScript学习笔记(DOM 事件、事件监听器)

JavaScript学习笔记(DOM 事件、事件监听器)

    • @[TOC](JavaScript学习笔记(DOM 事件、事件监听器)
    • HTML事件属性
    • 使用HTML DOM分配事件
    • onload和onunload事件
    • onchange事件
    • onmouseove 和onmouseout事件
    • onmousedown,onmouseup 以及onclick事件
    • 事件监听器
      • addEventListener()方法
      • 外部函数 的方式
      • 向相同元素添加多个事件处理程序
      • 能够向相同元素添加不同类型的事件:
      • 向Window对象添加事件处理程序
    • 传递参数
    • 事件 冒泡还是事件捕获?
      • removeEventListener()方法
      • 跨浏览器解决方案:

HTML DOM 允许 JavaScript 对 HTML 事件作出反应:


对事件作出反应
JavaScript能够在事件发生时,比如当用户点击某个HTML元素时。
为了在用户点击元素时执行代码,请向HTML事件属性添加JavaScript代码:

onclick = JavaScript

HTML事件的例子:

  • 当用户点击鼠标时
  • 当网页加载后
  • 当图像加载后
  • 当鼠标移至元素上时-
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • 当用户敲击按键时
    例如,当用户点击h1时,会改变其内容
<body>
    <h1 onclick="this.innerHTML='谢谢小可爱'">请点击我!</h1>
</body>

使用事件处理程序调用函数:

<body>
    <!-- <h1 onclick="this.innerHTML='谢谢小可爱'">请点击我!</h1> -->
    <h1 onclick="changeText(this)">请点击我亲爱的!</h1>

    <script>
        function changeText(id) {  
            id.innerHTML = "你是不是傻啊!";        }
    </script>
</body>

HTML事件属性

如需向 HTML 元素分配事件,您能够使用事件属性。
向button元素分配onclick事件:

	<p>请点击按钮来显示日期。</p>

    <button onclick="displayDate()">今天的时间是?</button>

    <script>
        function displayDate() {  
            document.getElementById("demo").innerHTML = Date();
        }
    </script>

    <p id="demo"></p>

JavaScript学习笔记(DOM 事件、事件监听器)_第1张图片
在上例中,名为 displayDate 的函数会在按钮被点击时执行。


使用HTML DOM分配事件

HTML DOM允许使用JavaScript向HTML元素分配事件:

实例为button元素指定onclick事件:


                    
                    

你可能感兴趣的:(#,javaScript,javascript)