事件兼容性写法

最新推荐文章于 2022-08-31 08:30:39 发布
转载 最新推荐文章于 2022-08-31 08:30:39 发布 · 154 阅读 · 0

博客围绕事件兼容性写法展开，虽无具体内容，但可知重点在于解决不同环境下事件处理的兼容性问题，这在前端开发中至关重要，能确保代码在多种浏览器和设备上正常运行。

在这里插入图片描述

事件高级用法及兼容写法
07-08
一、事件基础 1.事件函数 obj.on-事件名=fn 定义事件的时候，事件函数不会自动执行，当事件触发的时候，会执行 2.事件对象 1）事件对象：当浏览器执行事件的时候，会将所有与事件相关的内容(鼠标位置，触发的目标等)封装为一个对象，并且在触发事件的函数，在事件函数中进行传递 Event 常见属性： clientX clinetY 鼠标相对客户端的位置 pageX pageY 鼠标相对于页面的位置 type 事件类型 target 事件作用的节点对象 2）事件的兼容性： 在低版本的IE和火狐上，事件传递机制不一样，需要通过window.event来获取事件 window.event||e 二、事件绑定和取消 1. 事件绑定 添加事件的做法，若出现为同一个节点绑定了同名的事件，会出现覆盖效果。 addEventListener(事件名,事件函数,isBubble) isBubble :默认为false 事件是冒泡机制 true 事件为捕获机制 注意：事件名没有on前缀 removeEventListener(事件名,事件函数,isBubble) 注意：一定要保证移除事件时和添加事件时是同一个事件函数 事件绑定兼容性问题:在低版本IE中(IE 6/7/8)不支持addEventListener和removeEventListener, 在低版本IE中可以使用： attachEvent(事件名,事件函数) 绑定事件 detachEvent 取消事件 注意：事件名 包含on前缀 两种事件绑定的区别： 1.addEventListener： 事件名没有on前缀 可以选择冒泡或者捕获机制 this 指事件调用者 同名事件的执行顺序：先添加先执行 2.attachEvent 事件名需要添加on前缀 不能选择冒泡或捕获的机制 this 指window对象 同名事件的执行顺序：后添加先执行 三、事件流 事件流：事件被触发之后会在DOM树的节点之间传递 冒泡：事件由最具体的元素(事件的触发者),层层向外传递（传递给父节点），直到window 对象停止 捕获：事件由最外层元素(window),层层向内传递，直到最具体的元素 事件流机制有时候会对页面效果造成一些影响，所以需要拦截事件的冒泡： 兼容性写法： window.event?window.cancelBubble=true:e.stopPropagation() 四、拦截浏览器的默认行为 拦截浏览器自带的一些事件行为，例如：a超链接的跳转等.... 对象.事件名 return false 对象.addEventListener() e.preventDefault() 对象.attachEvent() e.returnValue=false; retrun false; 五、常见事件 右键事件：oncontextmenu 键盘事件：onkeydown onkeyup onkeypress 键盘事件的属性： key 在IE中不支持 键名称 keyCode 键码 滚轮事件： Onwheel 标准浏览器和IE 对象.addEventListener(“DOMMouseScroll”,事件函数,false) 火狐 滚轮事件对： wheelDelta 标准浏览器和IE 120 -120 下 120 上 detail 获取 3 六、事件的委托 事件委托：事件添加元素父节点(原理：事件的冒泡机制) 将事件添加到父元素上，当事件发生时，父元素会找到对应触发事件的子元素去处理，后期添加的子元素，依然有这个事件
XMLHTTP多浏览器兼容性写法
10-30
XMLHTTP多浏览器兼容性写法 XMLHTTP（XMLHttpRequest）是一种常用的异步请求技术，能够实现在网页中异步地请求数据，但是在不同的浏览器中，XMLHTTP的实现方式却有所不同。本文将讨论XMLHTTP多浏览器兼容性写法，...
JS处理事件的兼容性写法
越努力，越幸运！
02-14 354
参数说明 element  操作的元素 type  事件类型 handler  需要执行的函数 ture&&false  是否捕获 一、事件监听 function addEvent(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, ...
JavaScript中事件的兼容性写法
七元八元
08-21 1534
1.    绑定事件 addEventListener： chrome，firefox，IE9 attachEvent：IE8 及IE8以下 function addHandel(element, type, handel) { if (element.addEventListener) { element.addEventListener(type, hand...
处理事件的兼容写法
weixin_30273931的博客
07-06 114
事件绑定兼容写法： 　　1.普通写法 <!doctype html> <title>javascript事件兼容写法</title> <meta charset="utf-8"/> <script type="text/javascript"> var addEvent = function(element,typ...
初学者必看！！！js中兼容写法总结
m0_72390727的博客
08-31 397
var key = e.keycode || e.which || e.charcode//获取键盘按下的字符的ASC码值。或者return false;6、onscroll滚动条的兼容写法。4、键盘事件对象的兼容写法。3、阻止浏览器默认事件。5、事件委托的兼容写法。1、事件对象兼容写法。...
阻止事件冒泡的兼容性写法
weixin_45677987的博客
09-08 571
1: 阻止事件冒泡的兼容性写法: 阻止冒泡: 1: dom 推荐stopPropagation() 阻止捕获和冒泡阶段中当前时间的进一步传播。 但是他不能防止任何默认行为的发生; 例如: 对链接的点击仍会被处理。 不适用于ie 6, 7, 8 2: cancleBubble: Event.cancelBubble 属性是: Event.stopPropagation 的一个曾用名。 在从事处理程序返回之前将其设置为true, 可以阻止事件传播。 适用于ie 6, 7, 8 &.
IE6中的position:fixed定位兼容性写法分享
09-25
在标题和描述中提到的"IE6中的position:fixed定位兼容性写法"，实际上是一种利用JavaScript和CSS hack来模拟`position:fixed`效果的方法。下面，我们将详细探讨这些技术： 1. **HTML和CSS Hack**： 由于IE6的特性...
js事件源window.event.srcElement兼容性写法(详解)
11-28
总结来说，JavaScript的事件源处理涉及到浏览器兼容性问题，开发者需要理解`window.event.srcElement`（IE特有）和`event.target`（W3C标准）的区别，并使用适当的兼容性解决方案来确保代码在不同浏览器下都能正常...
常用原生JS兼容性写法汇总
10-22
以下就详细汇总了这些常用原生JS的兼容性写法。 ### 一、添加事件监听方法 在DOM2级事件模型中，添加事件监听的方法是`addEventListener`，但在IE8及更早版本的浏览器中，需要使用`attachEvent`方法来添加事件监听...
JS事件对象(event)的一些兼容性写法
追风Programer的博客
11-28 2786
获得event对象兼容性写法 event || (event = window.event); 获得target兼容型写法 event.target||event.srcElement 阻止浏览器默认行为兼容性写法 event.preventDefault ? event.preventDefault() : (event.returnValue = false); 阻止冒泡写法 event...
事件源兼容性写法和事件委托
qq_36411712的博客
03-09 1199
事件源兼容性写法XXX.onclick = function(e){var event = e || window.event;var target = event.target || event.srvElement;console.log(target);}当出现ul&gt;li 绑定多个li的情况下， 应该采用事件源 + 冒泡结合的形式来使用。ul&gt;li{$}*100XXX.on...
事件对象兼容写法
weixin_40301750的博客
12-21 614
 // 添加句柄              addHandler:function(element,type,handler){                if(element.addEventListener){                  element.addEventListener(type,handler,false);                }else if(ele...
防止事件冒泡和阻止默认事件的兼容写法
learner_boy的博客
06-06 2831
阻止事件的传播兼容function(e){ var e=e||window.event; e.stopPropagation();//阻止事件的传播(包括捕获也包括冒泡) // 兼容处理 if (e.stopPropagation) { e.stopPropagation()
哈工大编译原理实验项目一个面向计算机科学与技术专业学生及编译技术初学者的综合性实践平台旨在通过系统化模块化的实验设计深入理解编译器的前端与后端处理流程涵盖词法分析语法分.zip
12-10
哈工大编译原理实验项目一个面向计算机科学与技术专业学生及编译技术初学者的综合性实践平台旨在通过系统化模块化的实验设计深入理解编译器的前端与后端处理流程涵盖词法分析语法分.zip
编译原理实验课程课件与资源综合仓库_包含词法分析语法分析语义分析中间代码生成代码优化目标代码生成等完整编译流程的实验指导讲义示例代码习题解答及课程项目参考实现_旨在为计算机科学与技.zip
12-10
编译原理实验课程课件与资源综合仓库_包含词法分析语法分析语义分析中间代码生成代码优化目标代码生成等完整编译流程的实验指导讲义示例代码习题解答及课程项目参考实现_旨在为计算机科学与技.zip
IMG_20251210_163453.jpg
12-10
IMG_20251210_163453.jpg
网络卡顿，重启网络，双击
12-10
网络卡顿，重启网络，双击
分布式光伏储能系统的优化配置方法(Matlab代码实现）
最新发布
12-10
分布式光伏储能系统的优化配置方法(Matlab代码实现）
JS代码兼容性写法详解
资源摘要信息:"JS代码兼容性写法是前端开发中极为重要的一环，它主要解决的是不同浏览器对JavaScript的支持程度不一的问题。由于浏览器种类繁多，每个浏览器对JavaScript的支持情况也存在差异，因此在编写JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值