Event事件

zzjwyck

已于 2024-09-25 20:10:14 修改

阅读量686

点赞数 13

文章标签： javascript 开发语言 ecmascript

于 2024-09-25 18:46:28 首次发布

本文链接：https://blog.csdn.net/zzjwyck/article/details/142528927

版权

event事件对象常见的属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准【ie6-8使用】
e.currentTarget	返回绑定事件的对象
e.type	返回事件的类型，比如：click，mouseover 不带on
e.returnValue	该属性阻止默认事件（默认行为） ie6-8，比如不让链接跳转
e.preventDefault()	该属性阻止默认事件（默认行为）标准，比如不让链接跳转
e.stopPropagation()	阻止冒泡【标准】
e.cancelBubble	阻止冒泡【ie】

阻止默认事件的发生

知识点：点击a标签的时候，想要将默认的跳转去除掉，添加自己的跳转方式对于a标签来说，默认的行为就是进行页面跳转，如果不想让a标签进行跳转，可以在注册事件中使用return false

阻止默认事件的发生

对于一些标签来说，他们拥有自己的事件，比如：a标签可以跳转，submit/button可以提交表单，reset可以重置按钮，那么如果想要给这些按钮添加事件，并且不让他执行对应的默认事件的话，就需要使用自制时间发生；

拥有默认事件标签：a，button，submit，右键，F12，F11

阻止默认事件的方法有两种：使用的是事件对象的方法来阻止event.stopPropagation();

如果是使用 on+事件名或者 attachEvent() 添加的事件使用 return false;
如果是使用 addEventListener 添加的事件使用 event.preventDefault();
阻止冒泡的方法

标准浏览器和 ie浏览器

w3c：event.stopPropagation()

IE：event.cancelBubble = true
兼容写法
```
if(event && event.stopPropagation){  // w3c标准
  event.stopPropagation(); 
}else{  // IE系列 IE 678
  event.cancelBubble = true; 
}
```
谁需要阻止冒泡，就在对应的操作前，添加阻止冒泡事件

面试题-Javascript的事件流模型都有什么?

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM事件流”：三个阶段：事件捕获，成为目标阶段，事件冒泡
使用addEventListener实现事件冒泡

默认冒泡顺序是从内往外进行冒泡
可以通过给addEventListener添加第三个参数值，更改冒泡的顺序

useCapture=true 默认值, false. true 代表以事件捕获形式触发事件, false 代表以事件冒泡形式触发事件
事件委托的优点：

1.减少事件注册，节省内存

2.在table上代理所有td的click事件

3.在ul上代理所有li的click事件

4.简化了dom节点更新时，相应事件的更新。

5.不用在新添加的li上绑定click事件

6.当删除某个li时，不用移解绑元素上的click事件【引出堆栈，内存泄漏，垃圾回收机制】

事件委托的缺点：

1.事件委托基于冒泡，对于不冒泡的事件不支持

2.层级过多，冒泡过程中，可能会被某层阻止掉

3.理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。

4.把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。

事件封装

// 绑定事件 - 判断是否是ie浏览器
// obj-某个对象  EType - 某个事件  fun - fun函数
function addEvent(obj, EType, fun) {
  if (obj.addEventListener) {
    obj.addEventListener(EType, fun);
  } else if (obj.attachEvent) {
    obj.attachEvent("on" + EType, fun);
  } else {
    obj["on" + EType] = fun;
  }
}
// 移除元素事件
function removeEvent(obj, EType, fun) {
  if (obj.removeEventListener) {
    obj.removeEventListener(EType, fun);
  } else if (obj.detachEvent) {
    obj.detachEvent("on" + EType, fun);
  } else {
    obj["on" + EType] = null;
  }
}
// 取消默认行为
function preventDefaultFun(event) {
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
}
// 阻止事件传播
function stopPropagationFun(event) {
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  }
}