码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 事件

时间:2018-09-04 10:36:01      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:demo   title   等等   inner   验证   触发事件   现在   utf-8   代码   

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
HTML 事件
HTML 事件可以是浏览器行为,也可以是用户行为。
以下是 HTML 事件的实例:
    HTML 页面完成加载
    HTML input 字段改变时
    HTML 按钮被点击
通常,当事件发生时,你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。
<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
        <button onclick="getElementById(‘demo‘).innerHTML=Date()">现在的时间是?</button>
        <p id="demo"></p>
    </body>
</html>
以上实例中,JavaScript 代码将修改 id="demo" 元素的内容。
在下一个实例中,代码将修改自身元素的内容 (使用 this.innerHTML):
<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
        <button onclick="this.innerHTML=Date()">现在的时间是?</button>
    </body>
</html>
JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用:
<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
        <p>点击按钮执行 <em>displayDate()</em> 函数.</p>
        <button onclick="displayDate()">点这里</button>
        <script>
            function displayDate(){
                document.getElementById("demo").innerHTML=Date();
            }
        </script>
        <p id="demo"></p>
    </body>
</html>
下面是一些常见的HTML事件的列表:
    onchange    HTML 元素改变
    onclick    用户点击 HTML 元素
    onmouseover    用户在一个HTML元素上移动鼠标
    onmouseout    用户从一个HTML元素上移开鼠标
    onkeydown    用户按下键盘按键
    onload    浏览器已完成页面的加载

JavaScript 可以做什么?
    事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:
    页面加载时触发事件
    页面关闭时触发事件
    用户点击按钮执行动作
    验证用户输入内容的合法性
    等等 ...
    
可以使用多种方法来执行 JavaScript 事件代码:
    HTML 事件属性可以直接执行 JavaScript 代码
    HTML 事件属性可以调用 JavaScript 函数
    你可以为 HTML 元素指定自己的事件处理程序
    你可以阻止事件的发生。
    等等 ...

 

JavaScript 事件

标签:demo   title   等等   inner   验证   触发事件   现在   utf-8   代码   

原文地址:https://www.cnblogs.com/larken/p/9582429.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!