ECMAScript/ES6教程

ECMAScript/ES6事件

JavaScript与HTML的交互是通过浏览器或用户操作页面时发生的事件来处理的。事件是软件识别的事件或动作，系统或用户可以触发它们。

可以将事件声明为DOM(文档对象模型)级别3的一部分。事件发生在网页上进行某种类型的交互时。每个HTML元素都包含可以触发JavaScript代码的事件集合。事件的一些常见示例包括单击按钮，单击超链接，加载网页等。

1.事件处理程序

要对事件做出反应，我们可以分配一个处理程序(一个在事件发生时运行的函数)。可以将事件处理程序定义为在事件发生时执行的代码块。在JavaScript中使用事件处理程序来处理事件。

2.事件类型

它是用户单击按钮时激活的最常用的事件类型之一。在这种事件类型中，我们可以发出警告，验证等。单击时，“ onclick”会调用分配给它的相应function()。

下面我们通过一个简单的例子来理解事件处理。

示例

<html>
   <head>
      <script type = "text/javascript">
         function hello() {    
            alert ("你好，你点击了我吗？");
         }
      </script>
   </head>
   <body style="text-align:center;">
      <p>事件处理示例</p>
      <input type = "button" onclick = "hello()" value="点击我"/>
   </body>
</html>

运行结果如下：

2.1.提交事件类型

当需要提交表格时会发生这种情况。当您单击提交按钮时，“onsubmit”将调用相应的“return function()”，并以true或false接收来自function()的响应。如果function()返回true，则将提交表单。否则，它将不会提交表单数据。

2.1.onmouseout和onmouseover事件

这些事件可帮助我们使用文本和图像创建效果。顾名思义，将鼠标悬停在任何元素上时会触发onmouseover事件。将鼠标移出元素时，会触发onmouseout事件。

我们通过使用以下示例来理解它们。

<html>     
<head>   
    <script type="text/javascript">   
        function mouseOver() {   
            document.getElementById("div1").style.color   
                            = "blue";   

            document.getElementById("div2").innerHTML   
                            = "mouseOver事件触发";   

            document.getElementById("div2").style.color   
                            = "green";   
        }   
        function mouseOut() {   
            document.getElementById("div1").style.color   
                            = "magenta";   

            document.getElementById("div2").innerHTML   
                            = "mouseOut事件触发";   

            document.getElementById("div2").style.color   
                            = "red";   
                        }   
    </script>   
</head>   

<body style="text-align:center;">   

    <h1 id="div1" onmouseover="mouseOver()"  
                onmouseout="mouseOut()">   
        将鼠标移入其中。
    </h1>   

    <h3>   
        将光标移到上面的标题上以查看结果。
    </h3>   

    <h2><p id="div2"></p></h2>   
</body>   

</html>

在浏览器中执行上述代码时，将看到以下输出 -

将鼠标移到第一个标题上，将看到以下输出 -

将鼠标从第一个标题移出，将看到以下输出 -

3.HTML5标准事件

下表列出了一些常用的HTML事件。

属性	说明
onabort	在中止事件上触发。
offline	离线当文档离线时，它会触发。
onafterprint	在文档打印后触发。
onbeforeonload	它在文档加载之前触发。
onbeforeprint	它在打印文档之前触发。
onblur	当窗口失去焦点时触发。
onchange	在元素更改时触发。
onclick	它在鼠标单击时触发。
oncontextmenu	触发上下文菜单触发。
oncanplay	当媒体可以开始播放时触发。
oncanplaythrough	当媒体播放到最后而没有任何缓冲或停止时触发。
ondbclick	它会在双击鼠标时触发。
ondrag	拖动元素时触发。
ondrop	当拖放元素时触发。
ondragend	它在拖动操作结束时触发。
ondragenter	它在元素拖动到放置目标时触发。
ondragleave	当元素离开放置目标时触发。
ondragover	在将元素拖动到放置目标上时触发。
ondragstart	它在拖动操作开始时触发。
ondurationchange	更改介质长度时触发。
onended	当媒体到达末尾时触发。
omemptied	当媒体中的资源元素突然变空时触发。
onfocus	当窗口获得焦点时触发。
onerror	它在发生错误时触发。
onformchange	它在表单更改时触发。
onforminput	它在表单从用户获取输入时触发。
onhaschange	触发文档更改。
oninput	当元素从用户获得输入时触发。
oninvalid	它在无效元素上触发。
onkeyup	它在释放键时触发。
onkeydown	按下键时触发。
onkeypress	释放并按下键时触发。
onload	在加载文档时触发。
onloadedmetadata	在加载媒体元素的媒体数据和持续时间时触发。
onloadeddata	加载媒体数据时触发。
onmessage	它在消息触发时触发。
onloadstart	它在浏览器开始加载媒体数据时触发。
onmousemove	它在鼠标指针移动时触发。
onmousedown	它在按下鼠标按钮时触发。
onmouseover	在将鼠标指针移到某个元素上时触发。
onmouseout	当鼠标指针从元素移出时触发。
onmouseup	它在释放鼠标按钮时触发。
onmousewheel	旋转鼠标滚轮时会触发。
ononline	当在线文档时触发。
onoffline	在文档脱机时触发。
onpageshow	当窗口可见时触发。
onpagehide	在隐藏窗口时触发。
onplay	当媒体数据将要开始播放时触发。
onplaying	播放媒体数据时触发。
onpause	它在媒体数据暂停时触发。
onprogress	在浏览器获取媒体数据时触发。
onpopstate	在窗口历史记录更改时触发。
onratechange	更改媒体数据的播放速率时触发。
onreadystatechange	当就绪状态更改时触发。
onredo	它在文档执行重做操作时触发。
onresize	当窗口调整大小时触发。
onscroll	当滚动元素的滚动条时触发。
onseeking	当媒体元素的搜索属性为true且搜索已开始时触发。
onseeked	当媒体元素的搜索属性不为真且搜索结束时触发。
onselect	在选择元素时触发。
onstalled	当媒体数据获取错误时触发。
onsubmit	它在表单提交时触发。
onstorage	当文档加载时触发。
onvolumechange	当媒体元素更改其音量或音量处于静音状态时触发。
onwaiting	它在媒体元素停止播放但预期会恢复播放时触发。
onunload	它在用户离开文档时触发。
onundo	在文档执行撤消操作时触发。
ontimeupdate	当媒体元素的播放位置更改时触发。
onsuspend	它在浏览器获取媒体数据但在获取完整的媒体文件之前停止时触发。

上一篇：ECMAScript/ES6模板文字

下一篇：ECMAScript/ES6 Cookies

分类导航

关注微信小程序

扫描二维码
程序员编程王