JavaScript事件处理

来源：互联网发布：mac桌面文件夹隐藏编辑：程序博客网时间：2024/05/21 14:51

一、事件：在页面上的任何操作都可能被称为事件源。所有事件在JavaScript中都是以“onXxx”的形式命名的。
下列是JavaScript中常用事件：
(1)onmouseover：当鼠标移至 HTML 元素上方时触发。
(2)onmouseout：当鼠标移出 HTML 元素上方时触发。
(3)onmousedown：点击鼠标按钮时触发。
(4)onmouseup：释放鼠标按钮时触发。
(5)onclick：完成鼠标单击时触发。
(6)onLoad：用户进入页面时被触发，可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
(7)onunLoad：用户离开页面时被触发。
页面加载事件和页面卸载事件只能在body元素中进行处理，可用于处理 cookie。

例：页面加载事件

    <head>        <meta charset="UTF-8">        <title>Document</title>        <script type="text/javascript">            function loadHandle(){                alert("欢迎");            }        </script>    </head>    <body onLoad="loadHandle();" onunLoad="closeHandle();">    </body>

二、动态事件操作
所有的事件除了以上的方式（onXxx()）定义之外也可以动态设置，这种形式在开发中使用最多；使用addEventListener(事件类型，处理函数名称，触发时机)进行动态设置。

例：动态设置

<head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript">        function handle(){            alert("事件触发")；        }        window.onload=function(){                var imgElement=document.getElementById("myimg");        imgElement.addEventListener("click",handle,false);            }    </script></head><body>    <img id="myimg" src="./css/a.jpg" height="50%"></body>

注：对于整个JavaScript事件的处理分为两个部分    1.事件的冒泡过程；2.事件的触发过程；    触发时机都会设置为false，表示在事件的触发过程进行处理。阻止事件的冒泡。这种动态设置操作事件的最大好处在于：html不会和JavaScript混合在一起。

阅读全文

1 0