js事件总编

1. js事件

1.1 onclick 点击事件

1.2 onload 用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）

1.3 onunload 用户离开某个页面的时候触发（onload 和 onunload 事件可用于处理 cookie。）

1.4 onchange 内容变化事件（常结合对输入字段的验证来使用）

1.5 onmouseover 鼠标移动到HTML元素上方的事件

1.6 onmouseout 鼠标移出HTML元素上方的事件

1.7 onmousedown 鼠标按下的时候触发的事件

1.8 onmouseup 鼠标弹起触发的事件（onmousedown，onmouseup和onclick区别，onclick是鼠标完成点击事件的时候触发的事件）

1.9 onfocus 元素获取焦点事件

1.10 onblur 元素失去焦点事件

1.11 onabort 图像的加载失败

1.12  ondblclick 双击事件

1.13 onerror 当加载图像和文档时发生错误

1.14 onkeydown 键盘按键被按下发生的事件

1.15 onkeyup 键盘按键被松开发生的事件

1.16 onkeypress 键盘按键按下并松开发生的事件

1.17 onmousemove 鼠标移动

1.18 onresize 窗口或者框架被重新调整大小

1.19 onselect 文本被选中

1.20 onreset 重置按钮被点击

1.21 onsubmit 提交按钮被点击

(阻止事件冒泡：ie使用 e.cancleBubble = true、e.stopPropagation()； 取消默认事件： e.preventDefault()，IE则是使用e.returnValue = false )
在JavaScript中，有三种常用的绑定事件的方法：

    在DOM元素中直接绑定；
    在JavaScript代码中绑定；
    绑定事件监听函数。

如下：
                                            一. 在DOM元素中直接绑定

    这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为：
        onXXX="JavaScript Code"

                                             二. 在JavaScript代码中绑定

在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

在JavaScript代码中绑定事件的语法为：
elementObject.onXXX=function(){
    // 事件处理代码
}

三. 绑定事件监听函数

 绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);

参数    说明
elementObject    DOM对象（即DOM元素）。
eventName    事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle    事件句柄函数，即用来处理事件的函数。
useCapture    Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。

 
attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);
参数    说明
elementObject    DOM对象（即DOM元素）。
eventName    事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
handle    事件句柄函数，即用来处理事件的函数。
————————————————
版权声明：本文为CSDN博主「前端念初」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_62765236/article/details/126694881