js DOM事件监听与解除的兼容性写法

最新推荐文章于 2024-05-29 20:41:10 发布
最新推荐文章于 2024-05-29 20:41:10 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： js 文章标签： js 事件监听 事件解除 listener event
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k358971707/article/details/54578146
版权 
    function addEvent(obj, type, fn) {
        if (window.addEventListener) {//ie9+ chrome fireFox
            obj.addEventListener(type, fn, false);
        } else if (window.attachEvent) {//旧版本ie(edge不支持)
            obj.attachEvent('on' + type, fn);
        } else {
            obj['on' + type] = fn;
        }
    }

    function removeEvent(obj, type, fn) {
        if (window.removeEventListener) {//ie9+ chrome fireFox
            obj.removeEventListener(type, fn, false);
        } else if (window.detachEvent) {//旧版本ie(edge不支持)
            obj.detachEvent('on' + type, fn);
        } else {
            obj['on' + type] = null;
        }
    }

推荐文章

addEventListener和attachEvent函数中的this的指向问题及解决方法

JavaScript中removeEventListener()使用注意事项

全赞功成湿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js事件监听（考虑兼容性）
herogus的博客
05-08 535
js工具类代码： $(function() { //添加，移除监听事件，考虑兼容性 $.fn.extend({ /** * 参考原生JavaScript添加监听事件， * element.addEventListener(event, function, useCapture) * @param {Object} type 必须。事件名 * @param {O
js 事件监听原理,及兼容写法,jquer基本封装原理
09-06 3519
事件监听原理,及兼容写法,jquer基本封装原理 我绑定了多个事件 // ---------------------------------------- 事件箭筒原理 ------------------------------ var btn = document.getElementsByTagName("button")[0]; fn("clic
js知识点之DOM事件的注册和移除
最新发布
fyw1789的博客
05-29 698
DOMDOM。
事件监听兼容方式
logic51551的博客
04-02 227
兼容方式 普通浏览器 标签对象.addEventListener('事件类型' , 事件处理函数) 事件类型必须是字符串形式,直接写事件类型名称,不能有on 低版本IE浏览器 标签对象.attachEvent('on事件类型' , 事件处理函数) var oDiv = document.getElementById('div'); 一般...
事件监听器的兼容性写法
qq_42309685的博客
07-24 302
事件监听器的兼容性写法 addEventListener不兼容IE8以下的浏览器，所以有了attachEvent的兼容性写法，二者兼容性写法如下： <button>赋诗</button> <script> var btn = document.getElementsByTagName("button")[0]; //事件监听的兼容写法 EventListen...
JS事件监听兼容性解决方案
qq_45516629的博客
03-21 285
兼容性处理的原则： 首先照顾大多数浏览器，再处理特殊浏览器 addEventListener()事件监听（IE9以后支持） attacheEvent()事件监听（IE678支持） 封装一个函数，函数中判断浏览器的类型： function addEventListener(element, eventName, fn) { // 判断当前浏览器是否支持 addEventLis...
详解js几个绕不开的事件兼容写法
10-19
本文将深入探讨几个JavaScript事件兼容性的关键写法，帮助开发者更好地处理这些问题。 首先，我们来看键盘事件及其`keyCode`属性的兼容性。在JavaScript中，监听键盘事件通常使用`onkeypress`、`onkeydown`或`...
js代码-兼容性写法
07-16
本压缩包文件“js代码-兼容性写法”提供了一些关于如何编写兼容不同浏览器的JavaScript代码的方法和示例。 1. **跨浏览器事件处理** 在不同的浏览器中，添加和移除事件监听器的方法各异。例如，IE早期版本使用`...
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题.docx
01-13
在JavaScript中，DOM事件处理程序的封装是跨浏览器兼容性的一个关键步骤，因为不同的浏览器对事件处理有不同的实现。本文主要讨论了在将DOM事件处理程序封装到名为`event.js`的文件时可能出现的低级错误，并提供了...
多款JS软键盘 及 常用JS兼容写法
12-15
总的来说，JS软键盘的实现涉及了JavaScript基础、DOM操作、事件处理、CSS样式和浏览器兼容性等多个方面。通过深入理解这些技术并结合具体应用场景，我们可以创建出满足各种需求的JS软键盘，提供流畅且安全的在线输入...
IE、FF的JS兼容写法
03-28
在JavaScript编程中，IE（Internet Explorer）和FF...通过使用如上的兼容性写法，可以确保代码在不同的浏览器环境下都能正常工作。在实际项目中，还可以利用库如jQuery或Modernizr来进一步简化跨浏览器的兼容性问题。
webapi-03
qq_62413209的博客
02-15 389
webapi-03 1.删除节点 <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // // 1.获取元素 // var ul = document.querySelector('ul'); // ul.rem...
js监听事件兼容写法
cuiwenlin的博客
03-27 617
var el= document.getElementById('el'); if(el.addEventListener) { el.addEventListener('click', function() { //逻辑语句 }) } else if (el.attachEvent){ //兼容ie8 el.attachEvent('onclick', functio...
jquery 取消对dom的监听
weixin_35749545的博客
01-19 393
可以使用 jQuery 的 off() 方法取消对 DOM 元素的监听。 例如： $(selector).off(eventType); 其中，selector 是要取消监听的 DOM 元素的选择器，eventType 是要取消监听的事件类型。 也可以使用 unbind() 方法取消对 DOM 元素的监听，但这个方法已经在jquery 1.7以后不推荐使用了。 $(selector).unbi...
addeventlistener事件第三个参数_事件监听函数，以及事件的捕获和冒泡机制
weixin_39610722的博客
11-27 897
1.函数事件事件一般是用于浏览器和用户操作之间的交互，当用户执行某些特殊的操作时，浏览器给予反应，触发绑定的事件事件流，事件发生时会在元素节点和根节点之间按照约定的顺序传播，事件经过的所有节点都会受到事件的影响，这个传播过程被称为DOM事件流true是捕获，false是冒泡，默认为冒泡事件2.addEventListener()－－添加事件监听函数给元素添加一个事件，假如有多个事件，不会...
事件监听的相关兼容性
在路上...Try Fly
04-10 1009
//事件监听的兼容性写法 var addEvent=function(elements,type,callback){ if(elements.addEventListener){ elements.addEventListener(elements,type,false) }else if(elements.attachEvent){ element
DOM事件监听 ---- 注册事件（常用） ---- 删除事件（常用）
LQlove1的博客
06-19 585
addEventListener（）和 removeEventListener（）
vue监听dom事件
02-21
在Vue中，可以使用`v-on`指令来监听＊＊＊元素上添加`v-on`或`@`指令，可以绑定一个事件监听器，当指定的事件触发时，相应的方法将被调用。 以下是Vue监听DOM事件的几种常见方式： 1. 直接在模板中绑定事件监听器： ```html <button v-on:click="handleClick">点击我</button> ``` ```javascript methods: { handleClick() { // 处理点击事件的逻辑 } } ``` 2. 使用方法引用的方式绑定事件监听器： ```html <button @click="handleClick">点击我</button> ``` ```javascript methods: { handleClick() { // 处理点击事件的逻辑 } } ``` 3. 传递参数给事件处理方法： ```html <button @click="handleClick('参数')">点击我</button> ``` ```javascript methods: { handleClick(param) { // 处理点击事件的逻辑，可以使用传递的参数 } } ``` 4. 使用内联语句处理事件： ```html <button @click="count++">点击我</button> <p>点击次数：{{ count }}</p> ``` ```javascript data() { return { count: 0 } } ``` 以上是几种常见的Vue监听DOM事件的方式，你可以根据具体的需求选择适合的方式来处理事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值