兼容动态绑定事件

最新推荐文章于 2024-08-03 17:05:14 发布
最新推荐文章于 2024-08-03 17:05:14 发布
阅读量64 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xuehaiyiye/p/3475879.html
版权 
 

 

此文章是帮助班上的一个同学学习，本人菜鸟，请各路大神指点或者绕道

动态绑定事件在IE内核 和 火狐等相同的内核下分为两种情况  ，
1. attachEvent，
2.addEventListener
下面我们用代码的形式来演示

 

在火狐下运行：　　

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="NANF.js"></script>
    <script type="text/javascript">
        function init(){                   //初始函数
            var testObj=document.getElementById("test");     //得到Id为test 的元素
            testObj.addEventListener("click",function(){
                alert("我在火狐下运行");
            });

        }
    </script>

</head>
<body οnlοad="init()">
    <input id="test" type="button" value="测试">

</body>
</html>

 注： addEventListener("click",function(){})    click 前面不用加 “on”  

 

在IE下运行：

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="NANF.js"></script>
    <script type="text/javascript">
        function init(){                   //初始函数
            var testObj=document.getElementById("test");     //得到Id为test 的元素
            testObj.attachEvent("onclick",function(){
                alert("我在IE下运行");
            });

        }
    </script>

</head>
<body οnlοad="init()">
    <input id="test" type="button" value="测试">

</body>
</html>

 

 为了兼容火狐和IE :

 

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="NANF.js"></script>
    <script type="text/javascript">
        function init(){                   //初始函数
            var testObj=document.getElementById("test");     //得到Id为test 的元素
            if(navigator.appName == "Netscape")  {          //判断是否为火狐
                testObj.addEventListener("click",function(){
                      alert("都能运行");
                });
            }
            else {
                testObj.attachEvent("onclick",function(){
                    alert("都能运行");
                });
            }

        }
    </script>

</head>
<body onload="init()">
    <input id="test" type="button" value="测试">

</body>
</html>

 

 

转载于:https://www.cnblogs.com/xuehaiyiye/p/3475879.html

a83982451
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui动态绑定事件
AIGC大前端小王子
12-27 2万+
Tips:很多前端新手会遇到动态创建DOM（html片段）的场景，原来的点击事件无法生效。以及成熟的layui框架动态创建DOM（html片段）不知道如何解决，接下来为大家解释其实现的原理，是主要是通过es6的写法。
JS绑定事件三种方式
热门推荐
qq_37860994的博客
11-05 1万+
三种方式 1、在DOM中直接绑定 2、在JS代码中直接绑定 3、使用事件监听函数绑定事件 一、在DOM中直接绑定 也就是直接在html标签中通过 onXXX=“” 来绑定。举个例子： &amp;amp;amp;amp;amp;lt;input type=&amp;amp;amp;amp;quot;button&amp;amp;amp;amp;quot; value=&amp;amp;amp;amp;quot;点我呦&amp;amp;amp;amp;quot
js动态绑定事件方法
okyoung188的博客
10-29 7054
1.给对象绑定事件 var t = document.getElementById("tab1"); t.onclick = function tst(){ alert(''); } 2.绑定事件监听函数addEventListener() 或 attachEvent()  addEventListener()函数语法： elementObject.addEven
如何实现动态添加的元素绑定事件
sinat_41843998的博客
10-21 1417
今天被问道如何给动态加载的数据绑定事件，于是在网上搜索解答方案如下： 第一种是在动态添加的html代码里添加onclick事件，并且传个唯一的参数来判断点击了哪个， <button onclick="Add()">添加</button> <button onclick="Get()">获取</button> <div id="joblist"> <div id="job1" class="job"> <input
2种js动态绑定事件方法
qq_35458527的博客
03-08 7978
1、使用原生JS动态为动态创建的对象绑定事件1-1、创建一个function，用来兼容IE8以下浏览器添加事件 function addEvent(el, type, fun) { if (el.addEventListener) { el.addEventListener(type, fun, false); } else if (el.at...
怎么解决事件绑定的兼容性问题
baozhuona的博客
11-26 1973
怎么解决事件绑定的兼容性问题
78 事件的绑定方式
Blog of Lytracy
11-26 1092
文章目录1、行内绑定式2、动态绑定式3、行内绑定式与动态绑定式的异同4、事件监听式——dom2级方式事件设置事件监听的实现方式——早期版本的IE浏览器事件监听的实现方式——标准浏览器 事件绑定指的是为某个元素对象的事件绑定事件处理程序。 1、行内绑定式 事件的行内绑定式是通过HTML标签的属性设置实现的。 <标签名 事件="事件处理程序"> 标签名可以是任意的HTML标签，如<div>标签、<button>标签等； 事件是由on和事件名称组成的一个HTML属性，如单击
前端绑定事件总结
zkx529的博客
04-30 1445
前端绑定事件总结
JS中的事件绑定、取消、兼容问题
weixin_42943920的博客
12-23 808
一、事件绑定 1、on+事件类型 var div = document.getElementById('dv') // 1 on+事件类型 (同一点击事件只能绑定一次，绑定多次以最后一次为准) div.onclick = () => { console.log('click1'); } div.onclick = () => { console.log('click2'); } 2、addE
WPF 如何实现事件绑定 （MVVM）
叮当说的博客
02-23 8062
什么是事件绑定？ 首先说到绑定，一般是在WPF 中常见的，因为WPF中有一个比较好用的框架叫做 MVVM 所以View层的按钮等元件的的动作都是需要和后台ViewModel 中的函数进行绑定的。 如 我们最常见的按钮的command 绑定 Command="{Binding Btncommand}" CommandParameter="write" 这里面的command 是命令，不是事件 如果点击图片，或者按钮抬起来的时候需要触发一些命令的时候就需要使用命令绑定。 为什么要用到事件绑定
js实现动态创建的元素绑定事件
10-21
在JavaScript编程中，动态创建元素并为它们绑定事件是常见的需求。这主要涉及到DOM操作和事件处理程序的绑定。在JavaScript中，有多种方法可以实现动态元素的事件绑定，但传统的方法对于新创建的元素可能不起作用。...
解决关于事件绑定的兼容
03-09
解决关于事件绑定的兼容，有利于代码的开发和维护，减少代码量
兼容浏览器的js事件绑定函数(详解)
10-19
下面小编就为大家带来一篇兼容浏览器的js事件绑定函数(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
理解JS绑定事件
10-22
为了实现跨浏览器的事件绑定，我们可以编写一个兼容函数，如示例中的`addEvent`。这个函数会检查浏览器是否支持`addEventListener`，如果支持就使用该方法，否则回退到`attachEvent`。需要注意的是，当调用这个函数...
JS 事件绑定函数代码
10-29
其中，`element` 是要绑定事件的元素，`event` 是事件名称（例如 'click'），`function` 是当事件触发时执行的函数。 而 `addEventListener` 的语法稍有不同： ```javascript element.addEventListener('event', ...
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 668
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 308
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 246
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 919
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
取消事件绑定的兼容函数
05-25
取消事件绑定的兼容函数可以通过以下几种方式实现： 1. 使用原生的removeEventListener()方法，该方法可以在现代浏览器中正常工作，但在旧版IE中可能会出现问题。 ``` function removeHandler(elem, eventType, handler) { if (elem.removeEventListener) { elem.removeEventListener(eventType, handler, false); } else if (elem.detachEvent) { elem.detachEvent('on' + eventType, handler); } else { elem['on' + eventType] = null; } } ``` 2. 使用IE特有的detachEvent()方法。 ``` function removeHandler(elem, eventType, handler) { if (elem.detachEvent) { elem.detachEvent('on' + eventType, handler); } else if (elem.removeEventListener) { elem.removeEventListener(eventType, handler, false); } else { elem['on' + eventType] = null; } } ``` 3. 使用元素的属性值为null来取消事件绑定。 ``` function removeHandler(elem, eventType, handler) { if (elem['on' + eventType] !== undefined) { elem['on' + eventType] = null; } else if (elem.removeEventListener) { elem.removeEventListener(eventType, handler, false); } else if (elem.detachEvent) { elem.detachEvent('on' + eventType, handler); } } ``` 这些兼容函数可以确保在不同的浏览器中都可以正确地取消事件绑定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值