HTML事件属性

青春..荒唐

浏览: 972815 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

HTML

HTML 4 增加了使事件在浏览器中触发动作的能力，比如当用户点击元素时启动 JavaScript。

下面列出了添加到 HTML 元素以定义事件动作的全局事件属性。

一.【Window 事件属性】

针对 window 对象触发的事件（应用到 <body> 标签）：

（1）onafterprint【H5新标签】文档打印之后运行的脚本

【兼容：只有IE和火狐Firefox支持】

<script>
    function printmsg(){
        alert("此文档现在正在打印！");
    }
</script>
<body onafterprint="printmsg()">
</body>

注释：在 IE 中，onafterprint 属性在打印对话框出现之前而不是之后发生

（2）onbeforeprint【H5新标签】文档打印之前运行的脚本

【兼容：只有IE和火狐Firefox支持】

<script>
    function printmsg(){
        alert("即将打印该文档！");
    }
</script>
<body onbeforeprint="printmsg()">
</body>

（3）onbeforeunload【H5新标签】文档卸载之前运行的脚本

（4）onerror【H5新标签】在错误发生时运行的脚本

（5）onhaschange【H5新标签】当文档已改变时运行的脚本

（6）onload 页面结束加载之后触发

onload 常用在 <body> 中，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。

<script>
    function load(){
        alert("页面已加载！");
    }
</script>
<body onload="load()">
<h1>Hello World!</h1>
</body>

（7）onmessage【H5新标签】在消息被触发时运行的脚本

（8）onoffline【H5新标签】当文档离线时运行的脚本

（9）ononline【H5新标签】当文档上线时运行的脚本

（10）onpagehide【H5新标签】当窗口隐藏时运行的脚本

（11）onpageshow【H5新标签】当窗口成为可见时运行的脚本

（12）onpopstate【H5新标签】当窗口历史记录改变时运行的脚本

（13）onredo【H5新标签】当文档执行撤销（redo）时运行的脚本

（14）onresize【H5新标签】当浏览器窗口被调整大小时触发

【兼容：所有主流浏览器都支持 onresize 属性】

使用场景：onresize 发生于对象被调整大小时，常用于浏览器窗口被调整尺寸时

<script>
    function showMsg(){
        alert("您已改变浏览器窗口的尺寸！");
    }
</script>
<body onresize="showMsg()">
<p>请试着调整浏览器窗口的大小。</p>
</body>

【注意：】不同浏览器有不同对应情况，经测试谷歌响应1次，IE响应2次

（15）onstorage【H5新属性】在 Web Storage（Web存储）区域更新后运行的脚本

（16）onundo【H5新属性】在文档执行 undo（解压）时运行的脚本

（17）onunload 一旦页面已下载时触发（或者浏览器窗口已被关闭）

<!DOCTYPE html>
<html>
<meta charset="utf-8"> 
<title>教程</title>
<head>
<script>
    function goodbye(){
	alert("感谢你访问教程");
    }
</script>
</head>
<body onunload="goodbye()">
<h1>欢迎访问我的主页</h1>
<p>关闭窗口或者按 F5 刷新页面。</p>
</body>
</html>

①onunload 属性在用户关闭一个页面时触发

②onunload 在用户离开页面(通过点击链接，提交表单，关闭浏览器窗口等)触发

【注意】：如果你重新载入页面，unload 事件将被触发( onload 事件)

二.【Form 事件】

由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：

（1）onblur 在元素失去焦点时触发，常用于表单验证代码（例如用户离开表单字段），与onfocus聚焦属性相反

（2）onchange 在元素值被改变时运行

适用于：<input>、<textarea> 以及 <select> 元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本改动</title>
    <script>
        function checkField(val) {
            alert("输入值已更改。新值是：" + val);
        }
    </script>
</head>
<body>
<p>请修改输入字段中的文本，然后在字段外点击以触发 onchange。</p>
请输入文本：<input type="text" name="txt" value="Hello" onchange="checkField(this.value)">
</body>
</html>

（3）oncontextmenu（H5新事件）当上下文菜单被触发时运行的脚本

（4）onfocus 当元素获得焦点时运行

onfocus 常用于 <input>、<select> 以及 <a>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>聚焦变色</title>
    <script>
        function setStyle(x) {
            document.getElementById(x).style.background="yellow";
        }
    </script>
</head>
<body>
<p>当输入字段获得焦点时触发函数。此函数改变输入字段的背景色。</p>
姓: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
名: <input type="text" id="lname" onfocus="setStyle(this.id)">
</body>
</html>

【注释】：onfocus 属性不适用于以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>

（5）onformchange【H5新标签】在表单改变时运行

（6）onforminput【H5新标签】当表单获得用户输入时运行

（7）oninput【H5新标签】当元素获得用户输入时运行

（8）oninvalid 【H5新标签】当元素无效时运行

（9）onreset【H5新标签】当表单中的重置按钮被点击时触发（H5不支持）

（10）onselect 在元素中文本被选中后触发，是当你选择文本内容是而触发的事件，例如Tab键切换到该输入框时弹框提示

<input type="text" value="你好!" onselect="alert('你选择了莫些文字')">

【注意】：经测试，只有首次选中才会触发

可用于以下元素内：<input type="file">、<input type="password">、<input type="text">、<keygen> 以及 <textarea>

（11）onsubmit 在提交表单时触发

<script>
    function checkForm(){
        alert("表单已提交！");
    }
</script>
<form onsubmit="checkForm()">
姓：<input type="text" name="lname"><br>
名：<input type="text" name="fname"><br>
<input type="submit" value="提交">
<p>函数 checkForm() 在提交按钮被点击时触发。此函数向用户显示一段消息。</p>

三.【Keyboard（键盘）事件】

【顺序】：相对于 onkeydown 事件的事件次序：

onkeydown（按下按键）--- onkeypress（敲击按钮）--- onkeyup（释放按钮）

（1）onkeydown 在用户按下按键时触发，在用户（在键盘上）按键时触发

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
</head>
<body>
<p>当用户在输入字段中按下按键时触发函数。此函数提示用户已按按键。</p>
<input type="text" onkeydown="displayResult()">
<script>
    function displayResult() {
        var x;
        if(window.event){// IE8 以及更早版本
            x=event.keyCode;
        }else if(event.which){ // IE9/Firefox/Chrome/Opera/Safari
            x=event.which;
        }
        var keychar=String.fromCharCode(x);
        alert("按键 " + keychar + " 被按下");
    }
</script>
</body>
</html>

注释：onkeydown 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>

（2）onkeypress 在用户（在键盘上）按键时触发

【注释】：

①在任何浏览器中，onkeypress 事件不会被所有按键触发（例如 ALT、CTRL、SHIFT、ESC）

②onkeypress 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>

（3）onkeyup 当用户释放按键时触发

用法和适用性与onkeypress（按键）事件相同

四.【Mouse（鼠标）事件】

由鼠标或类似用户动作触发的事件：

（1）onclick 元素上发生鼠标点击时触发

（2）ondblclick 元素上发生鼠标双击时触发

{《鼠标拖拽事件》}

（3）鼠标拖拽事件相关【H5新事件】：

ondrag 元素被拖动时运行

ondragend 在拖动操作末端运行

ondragenter 当元素元素已被拖动到有效拖放区域时运行

ondragleave 当元素离开有效拖放目标时运行

ondragover 当元素在有效拖放目标上正在被拖动时运行

ondragstart 在拖动操作开端运行

ondrop 当被拖元素正在被拖放时运行

{《鼠标按钮点击事件》}

（4）鼠标按钮点击事件：

onmouseup 松开鼠标按钮时触发

onmousedown 按下鼠标按钮时触发

①鼠标左/中键（事件顺序）：onmousedown---onmouseup---onclick

②限于鼠标右键（事件顺序）：onmousedown---onmouseup---oncontextmenu【右击菜单】

【注释】：onmouseup和onmousedown属性不适用于以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>

{《鼠标滑过事件》}

（5）鼠标滑过事件：

onmousemove当鼠标移动的时候触发

onmouseover 当鼠标经过的时候触发

onmouseout 当鼠标离开的时候触发

（6）onmousewheel【H5新标签】当鼠标滚轮正在被滚动时运行

（7）onscroll【H5新标签】当元素滚动条被滚动时运行

JavaScript onscroll 事件：

当浏览器滚动条滚动时会触发 onscroll 事件，通常情况下指上下滚动条滚动。

需要注意的是，浏览器一旦检测到滚动条发生滚动，就可以触发 onscroll 事件，而无需等到滚动行为结束。

【例子】下面的例子演示了一个极普遍的应用：利用 onscroll 事件检测滚动条位置，当向下滚动到一定位置时，在页面右下角会出现“返回顶部”的锚链接，以方便网站用户快速返回顶部

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>滚轮事件</title>
    <style type="text/css">
        #top_div{
            position:fixed;
            bottom:80px;
            right:0;
            display:none;
        }
        hr{
            margin: 200px 0;
        }
    </style>
    <script>
        window.onscroll = function(){
            var t = document.documentElement.scrollTop || document.body.scrollTop;
            var top_div = document.getElementById( "top_div" );
            if( t >= 300 ) {
                top_div.style.display = "inline";
            } else {
                top_div.style.display = "none";
            }
        }

    </script>
</head>
<body>
<a name="top">顶部</a>
<hr>
    <div id="top_div"><a href="#top">返回顶部</a></div>
<hr>
<hr>
<hr>
<hr>
<hr>
</body>
</html>

五.【Media（媒体）事件】

由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:

（1）onabort 在退出时运行

（2）oncanplay【H5新属性】当文件就绪可以开始播放时运行（缓冲已足够开始时）

（3）oncanplaythrough【H5新属性】当媒介能够无需因缓冲而停止即可播放至结尾时运行

（4）ondurationchange【H5新属性】当媒介长度改变时运行

（5）onemptied【H5新属性】当发生故障并且文件突然不可用时运行（比如连接意外断开时）

（6）onended【H5新属性】当媒介已到达结尾时运行（可发送类似“感谢观看”之类的消息）

（7）onerror【H5新属性】当在文件加载期间发生错误时运行

（8）onloadeddata【H5新属性】当媒介数据已加载时运行

（9）onloadedmetadata【H5新属性】当元数据（比如分辨率和时长）被加载时运行

（10）onloadstart【H5新属性】在文件开始加载且未实际加载任何数据前运行

（11）onpause【H5新属性】当媒介被用户或程序暂停时运行

（12）onplay【H5新属性】当媒介已就绪可以开始播放时运行

（13）onplaying【H5新属性】当媒介已开始播放时运行

（14）onprogress【H5新属性】当浏览器正在获取媒介数据时运行

（15）onratechange【H5新属性】每当回放速率改变时运行（比如当用户切换到慢动作或快进模式）

（16）onreadystatechange【H5新属性】每当就绪状态改变时运行（就绪状态监测媒介数据的状态）

（17）onseeked【H5新属性】当 seeking（需求）属性设置为 false（指示定位已结束）时运行

（18 ）onseeking【H5新属性】当 seeking 属性设置为 true（指示定位是活动的）时运行

（19）onstalled【H5新属性】在浏览器不论何种原因未能取回媒介数据时运行

（20）onsuspend【H5新属性】在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行

（21）ontimeupdate【H5新属性】当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行

（22）onvolumechange【H5新属性】每当音量改变时（包括将音量设置为静音）时运行

（23）onwaiting 当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行

分享到：

H5视频音频 | HTML语言代码

2018-01-26 08:58
浏览 1088
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论