Jscript 事件

huanglujian886

已于 2022-09-06 19:20:19 修改

阅读量196

点赞数 1

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

于 2022-08-28 14:00:26 首次发布

本文链接：https://blog.csdn.net/huanglujian886/article/details/126540667

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

attachEvent 事件监听方式（了解）

1、事件的三要素

事件源、事件类型、事件处理程序

2、注册事件

传统的方法：

利用on开头的事件onclick
<button.onclick =“alert(‘hi’)”>
btn.onclick =function（）{}

方法监听注册方式

eventTarget.addEventListener(type, listener[,useCapture])

三个参数的含义：
type: 事件的类型 ，如 click 、mouseenter 等 ， 是一个字符串型，必须要带引号
listener: 事件执行时触发的函数
useCapture: 可选参数，布尔值 ， 默认是 false，代表是冒泡阶段触发 ，ture代表捕获阶段触发

俩者的区别：

onclick ：特点① 注册事件的唯一性；同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

addEventListerner() : 特点 ① 同一个元素添加多个同个事件处理程序

② 缺点兼容性 IE9 以下不兼容

关于这个不兼容的问题，可以使用 attachEvent() ，这个可以解决，ie可以使用，其他浏览器不行，mdn文档中不推荐。 IE9前可以使用这个方法。

attachEvent 事件监听方式（了解）

eventTarget.attachEvent(eventNameWithOn, callback)

俩个参数：

eventNameWithOn : 事件型字符串，需要加 on ，比如 onclick 、onmouseover

callback : 事件处理函数

也可以自己封装个 兼容性的事件函数

function addEventListener(element,eventName,fn) {
//判断当前浏览器是否支持addEventName方法
if(element.addEventListener(eventName,fn);
//第三个参数默认是false
}else if (element.attachEvent){
element.attachEvent('on'+eventName,fn);
}else{
//相当于element.onclick = fn ;
element['on'+eventName] = fn ;
}

3、解绑事件

传统注册方式

eventTarget.onclick = null

eventTarget.removeEventListener('click', fn)

这边也可以封装个兼容性的函数

function removeEventListener(element,eventName,fn){
    //判断当前浏览器是否支持removeEventlistener方法
    if( element.removeEventListener){
        element.removeEventListener(event,fn);
    }else if(element.detachEvent){
        element.detachEvent('on'+eventName,fn);
    }else{
        element['on'+eventName] = null;
    }
}

4、DOM 的事件

DOM事件流分为三个阶段： 1.捕获阶段 2. 当前目标阶段 3. 冒泡阶段

事件冒泡：开始是由具体的元素接受，然后逐级向上传播到DOM最顶层节点的过程
事件捕获：由DOM最顶层节点开始，然后逐级向下传播到最具体的元素的接受过程。

注意点：

js代码中只能执行捕获或者冒泡其中一个阶段
onclick和attachEvent，只能得到冒泡阶段
addEventListener（）第三个参数如果是true，在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。

5、事件对象

事件对象是我们事件的一系列相关数据的集合，跟事件相关的，比如鼠标点击就包含鼠标坐标，键盘事件的信息，比如判断用户按下哪个键

element.addEventListerner('click',function(e){})

e 就是事件对象

注意点： e 和 this 的区别：this 是事件绑定的元素， e.target 是事件触发的元素

1、event就是一个事件对象，写到侦听函数小括号里面，可以作为形参来看
2、事件对象只有有了事件才会存在、他是系统自动创建的，不需要我们传参数
3、事件对象不一定要写event，开发中我们一般用e来代替，自定义名字
4、事件对象也有兼容性问题。IE678通过window.event

解决兼容性问题：

1、标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。

2、在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。
解决:
e = e || window.event;

6、阻止事件冒泡

标准写法：利用事件对象里面的 stopPropagation()方法
e.stopPropagation()
非标准写法：IE 6-8 利用事件对象 cancelBubble 属性
e.cancelBubble = true;

封装的兼容性函数

if(e && e.stopPropagation){
 e.stopPropagation();
}else{
 window.event.cancelBubble = true;
}

7、常见的鼠标键盘事件

7.1 表单事件类型

input	输入事件，关注输入的过程（value值变，就会触发事件）
change	更新事件，关注输入结果（当表单元素失去焦点的时候，观察表单值是否变化，变化则触发事件）
focus	获取焦点事件（获得焦点就触发事件）
blur	失去焦点事件（失去焦点就触发事件）
submit	表单提交事件，事件目标是form（点击form中的提交按钮触发事件，有时配合取消元素默认行为）
reset	重置事件，事件目标是form （）
select	选择事件

7.2 鼠标事件类型

click	鼠标点击左侧触发
dblclick	鼠标双击左侧触发
mouseover	鼠标经过触发（有冒泡）
mouseenter	鼠标经过触发
mouseout	鼠标离开触发（有冒泡）
mouseleave	鼠标离开触发
focus	获取鼠标焦点触发
blur	失去鼠标焦点触发
mousemove	鼠标移动触发
mouseup	鼠标弹起触发
mousedowm	鼠标按下触发

补充俩个： 禁止右键菜单 contextmenu

禁止选中文字 selectstart

document.addEventListener('contextmenu', function(e){
    e.preventDefault();
})

document.addEventListener('selectstart', function(e){
    e.preventDefault();
})

7.3 鼠标事件对象

e.clientX / e.clientY	返回鼠标相当于浏览器窗口可视区的x / y 坐标
e.pageX / e.pageY	返回鼠标相当于浏览器窗口可视区的 x / y 坐标 IE9 +支持
e.screenX / e.screenY	返回鼠标相当于电脑屏幕的x坐标
offsetX/offsetY	返回光标相对于定位父级元素左上角的位置
type	返回当前事件类型
key	返回用户按下的键盘键的值  现在不提倡使用keyCode