前端绑定事件总结

冬至z

已于 2022-04-30 23:31:45 修改

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签：前端 javascript

于 2022-04-30 23:30:43 首次发布

本文链接：https://blog.csdn.net/zkx529/article/details/124520578

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前言

前端开发很多情况下都需要绑定事件，不同的事件对应不同的触发方式，不同需求下需要合适的事件，最近在开发中遇到了绑定事件的问题，所以总结一下前端绑定事件。

事件：元素天生具备的行为方式（和写不写JS代码没有关系）【onclick不是事件，click才是事件，浏览器会把一些常用事件挂载到元素对象的私有属性上，让我们可以实现DOM0事件绑定】，当我们去操作元素的时候会触发元素的很多事件
事件绑定：给当前元素的某个事件绑定方法，目的是让当前元素某个事件被触发时，做出一些反应

事件绑定方式

1.行内式

<a href="javascript:alert('Hello JavaScript')">点一下试试</a>

直接在代码中添加javascript代码，以属性的形式写在元素里面

2.在js中绑定

Dom 0级事件绑定

/* 猫二号 */
var btn2 = document.getElementById('btnId2'); //1.获取事件源：“猫二号”按钮。
btn2.onclick = function() { //2.绑定事件，即将事件类型(鼠标点击(onclick))绑定到事件源上。
    alert('捉老鼠二号'); //3.编写事件处理程序：弹出一个警告框。
};
/* 猫三号 */
var btn3 = document.getElementById('btnId3');
btn3.onclick = catchFunc; //catchFunc是函数名
// btn3['onclick'] = catchFunc; //catchFunc是函数名

元素对象.事件名（）=匿名函数；或者是元素对象.事件名（）=函数名；

3.用监听事件绑定

DOM 2级事件绑定

1.元素对象.addEventListener('事件名(不带on)', 匿名函数); //IE9及其以上才支持

2.元素对象.attacheEvent('事件名(带on)', 匿名函数); //IE8及其以下才支持

/* 猫四号 *//* IE9及其以上才支持 */
var btn4 = document.getElementById('btnId4');
btn4.addEventListener('click', function() { //注意这里的事件类型(鼠标点击('click'))。
    alert('捉老鼠四号');
})
//btn4.addEventListener('click', catchFunc);
/* 猫五号 *//* IE8及其以下才支持 */
var btn5 = document.getElementById('btnId5');
btn5.attacheEvent('onclick', function() { //注意这里的事件类型(鼠标点击('onclick'))。
    alert('捉老鼠五号');
})
//btn5.attacheEvent('onclick',catchFunc);
注：同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行。(IE8及其以下的按注册顺序相反顺序执行)
例：以此方式(根据浏览器选择合适的)对这里的按钮再进行一次事件绑定，那么将依次执行这两次绑定的事件。

DOM 0级和DOM 2级的区别

简单来说，Dom 0级事件绑定只能为dom元素绑定一个事件，后绑定的事件会覆盖之前绑定的事件，所以当绑定多个事件时相当于绑定了最后一个事件。

而DOM 2级事件可以绑定多个事件，当触发事件时会按顺序执行绑定的事件。

事件总结

表单元素常用事件

blur:失去焦点
focus:获取焦点
change:内容改变值被修改后需要鼠标点击输入框外才会触发
select:被选中事件

键盘常用事件行为

keydown:键盘按下
keyup:键盘抬起
keypress:键盘按下（中文输入法不能触发，英文状态下可以触发，因为文本被输入到文本框中）

鼠标常用事件行为

click:点击（不是单击）
dblclick:双击（300ms之内连续触发两次点击事件）
mouseover:鼠标滑过
mouseout:鼠标滑出
mouseenter: 鼠标进入
mouseleave: 鼠标离开
mousedown:鼠标按下（左键）
mouseup:鼠标左键抬起
mousewheel:鼠标滚轮滚动

其他常用事件行为

load:加载成功
error:加载失败
scroll:
resize:大小改变事件:window.onresize:浏览器窗口改变大小触发该事件

事件属性

type:当前触发事件的类型
target：事件源（当前鼠标操作的是那个元素）（IE6-8没有该属性，用srcElement这个属性代表事件源）
preventDefault:作用：阻止事件的默认行为；（IE6-8没有该方法，使用 returnValue=false处理）
stopPropagation:阻止事件的冒泡传播 [IE6-8不兼容，使用cancelBubble=true来处理]

mouseover和mouseenter事件的区别

区别	mouseover	mouseenter
区别1	存在冒泡传播机制	冒泡传播机制被浏览器阻止
区别2	当鼠标从父元素进入到子元素时，首先会触发父元素的mouseout事件，再触发子元素的mouseover事件，由于冒泡传播机制，导致父元素的mouseover事件也被触发	当鼠标从父元素进入到子元素时,并不会触发父元素的mouseout事件，但是触发了子元素的mouseenter事件，由于浏览器阻止了它的冒泡传播，所以父元素的该事件不会被触发

mouseout和mouseleave的区别和mouseover和mouseenter相类似。

mouseover和mouseout为一组，mouseenter和mouseleave为一组。