HTML | DOM 界面事件

HTML 中的DOM UiEvent是由属于 UiEvent 对象的用户界面触发的事件。
UI 事件的两个主要目的是：

• 允许注册事件侦听器并通过树结构描述事件流。
• 提供现有浏览器中使用的当前事件系统的公共子集。

句法：

Event_name = function

返回值：这将返回附加了指定事件的对象。

属于UiEvent 对象的事件类型有：

Event	function
abort	This event occurs when the loading of a media is aborted.
beforeunload	This event occurs before the document is about to be unloaded
error	This event occurs when an error occurred during the loading of a media file.
load	This event occurs when an object has loaded.
resize	This event occurs when the document view is resized.
scroll	This event occurs when an element’s scrollbar is being scrolled.
select	This The event occurs after the user selects some text for(“input” and “textarea”).
unload	This event occurs once a page has unloaded (for “body”).

示例 1：此示例基于“onresize”事件。

    body {
        width: 90%;
        color: green;
        border: 2px solid green;
        height: 40%;
        font-weight: bold;
        text-align: center;
        padding: 30px;
        font-size: 20px;
    }
      
    #demo {
        color: black;
    }

  


    Welcome to GeeksforGeeks!
    Try to resize the browser window to 
       display the windows height and width.
  
    
  
    
        function mainFunction() {
            var w = window.outerWidth;
            var h = window.outerHeight;
            var txt = "width of window = " + w + 
                ", Height of window = " + h;
            
            document.getElementById("demo").innerHTML = txt;
        }
    
  

  

输出 ：

最初的：

当窗口的宽度增加到 110% 时，宽度和高度的值将是：

示例 2：此示例基于“加载”事件。

    body {
        width: 90%;
        color: green;
        border: 2px solid green;
        height: 40%;
        font-weight: bold;
        text-align: center;
        padding: 30px;
        font-size: 20px;
    }
      
    #demo {
        color: black;
    }

  

  

  
    Welcome to GeeksforGeeks!
    This page loaded.
  
    
        function myFunction() {
            alert("Page is loaded");
        }
    
  

  

页面加载时：

支持的浏览器：

• 谷歌浏览器
• 火狐浏览器
• 边缘
• 苹果浏览器
• 歌剧