HTML | DOM 类型事件属性

在HTML和DOM中，事件是指对浏览器或文档所发生的某种动作或情况做出响应的行为。事件属性指在元素或对象上所能触发的事件列表，可以通过JavaScript来操作这些属性来绑定事件处理程序。

常用的HTML事件属性

下表列出了一些常用的HTML事件属性及其说明：

| 事件属性 | 说明 | | ------------------- | ------------------------------- | | onload | 当文档或图像等的加载完成时触发 | | onclick | 当用户单击某个元素时触发 | | ondblclick | 当用户双击某个元素时触发 | | onmousedown | 当鼠标按钮在元素上按下时触发 | | onmousemove | 当鼠标在元素上移动时触发 | | onmouseout | 当鼠标从元素上移开时触发 | | onmouseover | 当鼠标移到某个元素上时触发 | | onmouseup | 当鼠标按钮从元素上松开时触发 | | onkeydown | 当用户按下键盘上的任意键时触发 | | onkeyup | 当用户释放键盘上的键时触发 | | onsubmit | 当表单提交时触发 | | onreset | 当表单重置时触发 | | onfocus | 当元素获得焦点时触发 | | onblur | 当元素失去焦点时触发 | | onchange | 当元素的内容改变时触发 |

举个例子：

<button onclick="alert('Hello World!')">点击我</button>

在这个例子中，当用户单击按钮时，会执行一个弹窗，显示"Hello World!"。

DOM事件属性

在DOM中，事件属性指的是通过JavaScript操作所绑定的事件处理程序，可以使用下面的语法来绑定事件处理程序：

element.event = function(){  //事件处理程序 }; 

其中，element是要绑定事件处理程序的元素，event是事件名称，可以是HTML事件属性或自定义事件，匿名函数中是事件处理程序。

下表列出了一些常用的DOM事件属性及其说明：

| 事件属性 | 说明 | | ------------------- | --------------------------------------------------------------- | | onabort | 当加载过程因意外中止而失败时触发 | | onerror | 当发生错误时触发，例如某个资源无法加载或不存在时 | | onresize | 当窗口或框架的大小发生变化时触发 | | onscroll | 当元素的滚动条被滚动时触发 | | oncontextmenu | 当右键单击鼠标时触发 | | onloadstart | 当开始加载时触发 | | onprogress | 在文件上传或下载过程中持续触发，表示进度和状态 | | onloadend | 当加载完成时触发 | | onbeforeunload | 当用户离开页面时触发，例如关闭浏览器或刷新页面等 | | onhashchange | 当浏览器的URL的片段标识符发生变化时触发 | | ontouchstart | 当触摸屏幕时触发 | | ontouchmove | 当在屏幕上触摸并拖动时持续触发 | | ontouchend | 当从屏幕上松开时触发 | | ontouchcancel | 当触摸事件被中止时触发 | | onorientationchange | 当设备的方向发生改变时触发 |

举个例子：

<button id="btn">点击我</button>
<script>
document.querySelector('#btn').onclick = function(){
    alert('Hello World!');
};
</script>

在这个例子中，当用户单击按钮时，会执行一个弹窗，显示"Hello World!"。

自定义事件

在DOM中，可以使用CustomEvent()对象来创建自定义事件，通常与dispatchEvent()方法一起使用，可以触发已经定义好的自定义事件，例如：

//创建自定义事件
var event = new CustomEvent('myEvent', { detail: { key: 'value' } });

//绑定事件处理程序
document.addEventListener('myEvent', function(e){ alert(e.detail.key); }, false);

//触发自定义事件
document.dispatchEvent(event);

在这个例子中，创建了一个包含key: value的自定义事件，并添加了一个事件处理程序，在触发自定义事件之后弹窗显示value。

总结

HTML和DOM事件属性提供了一组用于创建动态网页的机制，使用简单明了，而且灵活性高，通过使用HTML事件属性和DOM事件属性，可以轻松完成对事件响应的控制平台，以及自定义事件的触发和响应。