从零开始学JavaScript——JS处理事件绑定兼容

最新推荐文章于 2024-05-11 21:19:51 发布
最新推荐文章于 2024-05-11 21:19:51 发布
阅读量368 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46186102/article/details/121720543
版权

封装一个函数，实现事件绑定的兼容与解绑的兼容

元素.addEventListener(事件, 函数, 是否捕获)

元素.attachEvent(事件，函数)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="box"></div>

    <script>
        var box = document.getElementById('box');
        // 需求：给同一个元素的同一个事件绑定不同的处理函数
        function fn1() {
            console.log(1);
        }
        function fn2() {
            console.log(2);
        }

        // 封装一个函数，实现事件绑定的兼容
        // 参数：元素 事件 函数
        function bind(ele, event, callback) {
            if (ele.addEventListener) {
                //标准模式
                ele.addEventListener(event, callback, false)
            } else {
                //ie8以下
                ele.attachEvent('on' + event, callback)
            }
        }
        //解绑的兼容
        // 参数：元素 事件 函数
        function unbind(ele,event,callback){
            if(ele.removeEventListener){
                //标准模式
                ele.removeEventListener(event,callback,false);
            }else{
                //ie8以下
                ele.detachEvent('on'+event,callback);
            }
        }
        bind(box, 'click', fn1);
        bind(box, 'click', fn2);
        unbind(box,'click',fn2);

    </script>

</body>

</html>

乐乐好痛苦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript程序设计——事件处理实验报告.docx
11-11
1．实现JavaScript事件注册；...2．实现JavaScript事件处理函数； 3．实现JavaScript鼠标和键盘事件； 4．实现JavaScript表单相关事件； 5．实现JavaScript字幕滚动事件； 6．实现JavaScript编辑事件；
JS-绑定事件的三种方法(+兼容代码)
meng的博客
04-22 367
绑定事件的三种方法 ele.onxxx = function (event) {} obj.addEventListener(事件类型, 处理函数, false); obj.attachEvent(‘on’ + 事件类型, 处理函数); ele.onxxx = function (event) {} 程序this指向的是dom元素本身; ** 解除：ele.onxxx = false / ‘’...
兼容的JS事件绑定和移除
Dilomen的博客
02-25 344
function addEvent(element, type, handler) { if (window.addEventListener) { element.addEventListener(type, handler, false); } else if (window.attachEvent) { element.att...
js中事件绑定3种方法以及事件委托
热门推荐
程序员秋风的博客
04-23 4万+
事件绑定首先，我先来介绍我们平时绑定事件的三种方法。 1.嵌入dom<button onclick="open()">按钮</button><script> function open(){ alert(1) } </script>2.直接绑定<button id="btn">按钮</button> <script> document.getElementById('btn'
原生JS绑定事件的兼容性写法与绑定事件的几种方法
SuperCoooooder的博客
08-18 5422
绑定事件算是DOM操作里面最基本的事情了，通常绑定事件的方式有以下一种：          1.形如内联样式的时间绑定：                                 2.使用addEventlisener(event,fn,useCapture)                        也许大家经常使用这个方法，但没有发现这个方法其实有三个参数，最后一个参数
JS函数柯里化
m0_47450083的博客
09-18 96
目录 1. 参数复用 2.兼容性的检测 3.延迟执行 4.柯里化技术的箭头函数 1. 参数复用 function uri(protocol, hostname, pathname) { return `${protocol}${hostname}${pathname}`; } const uri1 = uri('https://', 'www.123.com', 'dir'); console.log(uri1); 如果我们有很多类似的内容，会导致非常多重复的参数， 因此我们需要
javascript 处理事件绑定的一些兼容写法
10-29
javascript 事件绑定的一些兼容写法整理非常不错，感谢
从零开始学JavaScript
05-30
从零开始、一切从零开始、JavaScript、学JavaScript
javascript事件绑定学习要点
10-22
主要介绍了javascript事件绑定学习要点,主要包含下面四个方面1.传统事件绑定的问题，2.W3C事件处理函数，3.IE事件处理函数，4.事件对象的其他补充，有需要的小伙伴可以参考下
原生js为元素绑定事件
id_dimu的博客
06-27 2636
一、js为元素绑定事件方法(以点击事件为例) 1. element.onclick = function(){} 2. element.addEventListener("click",function(){},false); 3. element.attachEvent("onclick",function(){}); 说明： 方法一，缺点在于如果对同...
js多事件绑定兼容所有浏览器
liumuye88888的博客
04-13 150
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button
JS-浏览器事件绑定兼容性问题
m0_48683643的博客
10-05 229
前端笔记-浏览器事件绑定兼容性问题1.代码演示：2.代码优化: 1.事件绑定与解绑:  绑定事件时:  能使用addEventListener方法绑定的，就采用此方法.  否则采用attachEvent方法绑定  解绑事件时:  能用removeEventListener方法绑定就用。  否则就用detachEvent方法绑定。 1.代码演示： 代码如下（示例）： //例.html部分 <div style="width:200px;height:200px;backgro
JS中的事件绑定、取消、兼容问题
weixin_42943920的博客
12-23 793
一、事件绑定 1、on+事件类型 var div = document.getElementById('dv') // 1 on+事件类型 (同一点击事件只能绑定一次，绑定多次以最后一次为准) div.onclick = () => { console.log('click1'); } div.onclick = () => { console.log('click2'); } 2、addE
兼容浏览器的js事件绑定函数
hsd2012的专栏
03-29 1840
因为javascript中所有对象都集成与Object，那么只有给Object原型添加一个事件绑定函数，就不需要在处理绑定事件的时候，每次写一长串代码，直接调用即可。在代码中添加红色部分代码，直接便可以在代码中直接调用 nihaoa /** *@param ev事件 @param fn 函数**/Object.prototype.addListener=function(ev,fn){if
js 事件监听原理,及兼容写法,jquer基本封装原理
09-06 3513
事件监听原理,及兼容写法,jquer基本封装原理 我绑定了多个事件 // ---------------------------------------- 事件箭筒原理 ------------------------------ var btn = document.getElementsByTagName("button")[0]; fn("clic
js绑定事件方法：addEventListener与attachEvent的不同浏览器的兼容性写法
sunny327的专栏
08-10 2万+
js的事件绑定方法中，ie只支持attachEvent,而FF和Chrome只支持addEventListener，所以就必须为这两个方法做兼容处理，原理是先判断attachEvent只否为真（存在），如果为真则用attachEvent（）方法，否则的话就用addEventListener（）。 另外，为了避免每次绑定事件时都要做判断，可以封装一个函数myAddEvent(obj,ev,fn){
原生js获取事件发生对象兼容处理方法
weixin_41002312的博客
02-25 436
首先，声明一个函数： var getTarget = function(e){ if (typeof event.target !== 'undefined') { return event.target; } else{ return event.srcElement;//IE,legacy browser } }其次，调用getTarget函数ele.onclick ...
TypeScript中的函数类型注解：精确定义行为与意图
逐星的博客
05-11 386
在TypeScript中，函数不仅是一段执行特定任务的代码块，它们还可以拥有自己的类型。函数类型注解允许开发者定义函数的参数类型和返回值类型，从而提高代码的可读性和可维护性。函数类型注解是TypeScript中定义函数时的重要特性，它有助于确保函数参数和返回值符合预期，从而提高代码的准确性和安全性。
ts函数？
最新发布
FENGZXCjjjjj的博客
05-11 267
只要参数类型是匹配的，那么就认为它是有效的函数类型，而不在乎参数名是否正确。第二部分是返回值类型。对于返回值，我们在函数和返回值类型之前使用( =>)符号，使之清晰明了。如之前提到的，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void而不能留空。函数的类型只是由参数类型和返回值组成的。函数中使用的捕获变量不会体现在类型里。实际上，这些变量是函数的隐藏状态并不是组成API的一部分。
从零开始学习canoe(五)—— 设计panel
05-01
例如，为了添加一个按钮，我们可以从工具箱中拖放按钮控件，然后为其指定事件处理程序以及样式和位置等。 然后，可以通过脚本语言进行Panel的开发。Canoe支持VBScript，C#和JavaScript等多种脚本语言，用户可以选择...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值