JavaScript事件类型（一)

╰半夏微凉° 2022-09-23 08:07 183阅读 0赞

当我们打开浏览器的时候实际上就会触发一个事件，浏览器加载完成之后会触发一个load事件，当我们鼠标移动的时候有可能也会触发一个事件，当我们点击的时候也会触发事件。事件在我们的浏览器中显得如此重要，下面来认识一下事件；

# 事件类型 #

**1.UI事件，当用户与页面上的元素交互时触发；**

**2.焦点事件，当元素获得或失去焦点时触发；**

**3.鼠标事件，当用户通过鼠标在页面上执行操作时触发；**

**4.滚轮事件，当使用鼠标滚轮（或类似设备）时触发；**

**5.文本事件，当在文档中输入文本时触发；**

**6.键盘事件，当用户通过键盘在页面上执行操作时触发；**

**7.合成事件，当为IME输入字符时触发；**

**8.变动事件，当底层DOM结构发生变化时触发。**

**9.变动名称事件，当元素或属性名变动时触发。此类事件已经被废弃，没有任何浏览器实现他们；**

# UI事件 #

UI事件是指那些不一定与用户有关的事件。

## DOMactivate:表示元素已经被用户操作（通过鼠标或键盘激活）。 ##

load:当页面加载后在window上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕时在<img>元素上面触发，或者当嵌入的内容完毕时在<object>元素上面触发。

<html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("img").load(function(){
        $("div").text("图像已加载");
      });
    });
    </script>
    </head>
    <body>
    <img src="/i/shanghai_lupu_bridge.jpg" />
    <div>图像正在加载中 ...</div>
    <p><b>注释：</b>根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。</p>
    </body>
    </html>

## unload: ##

当页面完全卸载后在window上面触发，当所有框架都卸载后在框架集上面触发，或者当嵌入的内容卸载完毕后在<object>元素上面触发。

Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。

描述：  
　　　事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。

触发于：  
　　　·关闭浏览器窗口   
　　　·通过地址栏或收藏夹前往其他页面的时候   
　　　·点击返回，前进，刷新，主页其中一个的时候   
　　　·点击 一个前往其他页面的url连接的时候   
　　　·调用以下任意一个事件的时候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.   
　　　·当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。   
　　　·重新赋予location.href的值的时候。   
　　　·通过input type=”submit”按钮提交一个具有指定action的表单的时候。   
　　可以用在以下元素：  
　　　·BODY, FRAMESET, window  
　　平台支持：  
　　　IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
     </head>
     <body οnbefοreunlοad="close()">
    	
     </body>
     <script>
    	 function close(){
    		alert('该窗口已经被关闭')
    	} 
     </script>
    </html>

onload和onbeforeunload区别在上面已经说过，其他的用法和特征基本上都一样；

## resize事件 ##

当浏览器窗口被调整到一个新的高度或者宽度时，就会触发resize事件，这个事件在window(窗口)上面触发，因此可以通过Javascript或者<body>元素中的onresize特性来指定事件处理程序。如前所述，我们还是推荐使用如下所示的javaScript方式；

这里要使用一个工具类叫做

## EventUtil——跨浏览器的事件对象 ##

他主要是为我们操作方法做了一些兼容和封装，可以让我们更加简单的去操作；

接着调用我们的resized例子：

EventUtil.addHandler(window,"resize",function(event){
    		alert("resized");
    	 });

## scroll事件 ##

虽然scroll事件是在window对象上发生的，但它实际表示的则是页面中相应元素的变化，在混杂模式下，可以通过<body>元素的scrollLeft和scrollTop来监控这一变化；

EventUtil.addHandler(window,"scroll",function(event){  
         if(document.compatMode=="CSS1Compat"){
    		alert(document.documentElement.scrollTop);
    	 }else{
    		alert(document.body.scrollTop);
    	 }
     });

scroll事件会在文档被滚动期间被触发，但是要防止重复被触发;