前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js编程笔记之事件异常

js编程笔记之事件异常

作者头像
用户10094878
发布2022-11-21 15:25:27
6640
发布2022-11-21 15:25:27
举报

事件处理程序的运行环境

代码语言:javascript
复制
1.ele.onxxx = function (event) {}
程序this指向是dom元素本身
2.obj.addEventListener(type, fn, false);
程序this指向是dom元素本身
3.obj.attachEvent(‘on’ + type, fn);
程序this指向window
封装兼容性的 addEvent(elem, type, handle);方法
复制代码

解除事件处理程序

代码语言:javascript
复制
ele.onclick = false/‘’/null;
ele.removeEventListener(type, fn, false);
ele.detachEvent(‘on’ + type, fn);
注:若绑定匿名函数,则无法解除
复制代码

事件处理模型 — 事件冒泡、捕获

事件冒泡:

代码语言:javascript
复制
结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,
自子元素冒泡向父元素。(自底向上)
复制代码

事件捕获:

代码语言:javascript
复制
结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,
自父元素捕获至子元素(事件源元素)。(自顶向下)
IE没有捕获事件
触发顺序,先捕获,后冒泡
focus,blur,change,submit,reset,select 等事件不冒泡
复制代码

取消冒泡和阻止默认事件

取消冒泡:

代码语言:javascript
复制
W3C标准 event.stopPropagation();但不支持ie9以下版本
IE独有 event.cancelBubble = true;
封装取消冒泡的函数 stopBubble(event)
阻止默认事件:
默认事件 — 表单提交,a标签跳转,右键菜单等
1.return false;  以对象属性的方式注册的事件才生效
2.event.preventDefault(); W3C标注,IE9以下不兼容
3.event.returnValue = false; 兼容IE
封装阻止默认事件的函数 cancelHandler(event);
复制代码

事件对象

代码语言:javascript
复制
event || window.event 用于IE
事件源对象:
event.target   火狐只有这个
event.srcElement  Ie只有这个
这俩chrome都有
兼容性写法
复制代码

事件委托

代码语言:javascript
复制
利用事件冒泡,和事件源对象进行处理
优点:
1. 性能 不需要循环所有的元素一个个绑定事件
2. 灵活 当有新的子元素时不需要重新绑定事件
复制代码

事件分类

鼠标事件

代码语言:javascript
复制
click、mousedown、mousemove、mouseup、contextmenu、
mouseover、mouseout、mouseenter、mouseleave
用button来区分鼠标的按键,0/1/2
DOM3标准规定:click事件只能监听左键,只能通过mousedown 和 mouseup来判断鼠标键
如何解决mousedown和click的冲突
复制代码

键盘事件

代码语言:javascript
复制
keydown keyup keypress
keydown > keypress > keyup
keydown和keypress的区别
keydown 可以响应任意键盘按键,keypress只可以相应字符类键盘按键
keypress返回ASCII码,可以转换成相应字符
文本操作事件
input,focus,blur,change
窗体操作类(window上的事件)
scroll load
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-11-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 事件处理程序的运行环境
  • 解除事件处理程序
  • 事件处理模型 — 事件冒泡、捕获
    • 事件冒泡:
      • 事件捕获:
      • 取消冒泡和阻止默认事件
        • 取消冒泡:
        • 事件对象
        • 事件委托
        • 事件分类
          • 鼠标事件
            • 键盘事件
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档