Dom绑定事件和解绑事件兼容代码(IE8和火狐/谷歌)

最新推荐文章于 2022-07-22 09:58:48 发布
最新推荐文章于 2022-07-22 09:58:48 发布
阅读量305 收藏 1
点赞数 
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .btn1{
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <input id="btn1" type="button" value="绑定事件" class="btn1">
    <input id="btn2" type="button" value="解绑事件">

    <script>
        function my$(id){
            return document.getElementById(id)
        }

        //绑定事件兼容代码
        function addEventListener(element, type, fn){
            if(element.addEventListener){
                console.log('我支持addEventListener')
                element.addEventListener(type, fn, false)
            }else if(element.attachEvent){
                console.log('我支持attachEvent')
                element.attachEvent('on' + type, fn)
            }else{
                console.log('我两个都不支持')
                element['on' + type] = fn
            }
        }

        //解除绑定事件
        function removeEventListener(element, type, fn){
            if(element.removeEventListener){
               console.log('我支持removeEventListener')
                element.removeEventListener(type, fn, false)
            }else if(element.detachEvent){
               console.log('我支持attachEvent')
                element.detachEvent('on' + type, fn)
            }else{
                console.log('我两个都不支持')
                element['on' + type] = fn
            }
        }

        function f1(){
            console.log('第一个')
        }
        function f2(){
            console.log('第二个')
        }
        var btn1Obj = my$('btn1')
        addEventListener(btn1Obj, 'click', f1)
        addEventListener(btn1Obj, 'click', f2)

        var btn2Obj = my$('btn2')
        btn2Obj.onclick = function(){
            removeEventListener(btn1Obj, 'click', f1)
        }

    </script>
</body>
</html>
 

 

                

        

        

    




    

      

        

            

              
                
                  aaron9185
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
事件绑定的多种形态解决多种形态的浏览器兼容性问题(以及attachEvent中this指向的改变)

				
			

			

				

					海空的博客
				

				

					10-23
					
					533
					
				

			

		

		

			
				
第一个种形态:
事件绑定的基本语法 与概念  :使用    对象.事件=函数  的形式绑定响应函数,它只能同时为一个元素的一个事件绑定一个响应函数,不能绑定多个,如果绑定
多个,则后边面的会覆盖掉前面的那个
代码示范区: 
//为btn01绑定一个单击响应函数
/*btn01.onclick = function(){
alert(1);
};*/

//为btn01绑定第二个响

			
		

	



                

              
                



	

		

			

				
					
JavaScript 事件监听实例代码[兼容IE,firefox] 含注释

				
			

			

				

					12-03
				

			

		

		

			
				
这个实例代码是为了实现跨浏览器的事件监听功能，确保在 Internet Explorer (IE) 和 Firefox 等其他浏览器中都能正常工作。在JavaScript中，事件监听主要通过 `addEventListener` 和 `attachEvent` 方法来实现。  在...

			
		

	



                


  
              

                


	

		

			

				
					
IE与DOM的事件监听

				
			

			

				

					weixin_30648587的博客
				

				

					10-08
					
					114
					
				

			

		

		

			
				
IE事件监听标准DOM不支持  注意几点：
window.onload
attachEvent
detachEvent



标准DOM监听,ie不支持



转载于:https://www.cnblogs.com/JamyWong/p/7637067.html...

			
		

	





	

		

			

				
					
如何对DOM进行事件绑定----DOM方法和IE事件处理程序

				
			

			

				

					weixin_38378596的博客
				

				

					11-29
					
					442
					
				

			

		

		

			
				
目录

DOM0级事件处理程序

添加

删除

DOM2级事件处理程序

addEventListener()和removeEventListener()

IE事件处理程序

attachEvent()和detachEvent()

DOM0级事件处理程序

添加

    使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这个时候的事件处理程序是在元素的作用域中运行的，换句话说，...

			
		

	



		

			
		



	

		

			

				
					
事件的绑定

				
			

			

				

					qq_51088023的博客
				

				

					07-22
					
					266
					
				

			

		

		

			
				
使用对象.事件=函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后面绑定的函数会覆盖前面的函数。

			
		

	





	

		

			

				
					
JavaScript事件绑定、事件解除、DOM加载完成，兼容IE8+

				
			

			

				

					lihefei_coder的博客
				

				

					03-26
					
					1283
					
				

			

		

		

			
				
<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta

			
		

	





	

		

			

				
					
vue动态生成dom并且自动绑定事件

				
			

			

				

					01-19
				

			

		

		

			
				
用jquery的时候你会发现，页面渲染后动态生成的dom，在生成之前的代码是没办法取到相应对象的，必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。  html:         <input type=text v-model...

			
		

	





	

		

			

				
					
关于动态生成dom绑定事件失效的原因及解决方法

				
			

			

				

					11-28
				

			

		

		

			
				
之前做项目都是直接用jquery的bind绑定事件，不过当时都不是动态生成dom元素，而是已经页面中原本存在的dom元素进行事件绑定，最近在测试给动态生成的dom绑定事件的时候发现事件失效，于是就测试了一下： 1. 事件...

			
		

	





	

		

			

				
					
JavaScript Dom 绑定事件操作实例详解

				
			

			

				

					10-16
				

			

		

		

			
				
总之，JavaScript DOM事件绑定是网页动态化和交互性的重要手段。理解并熟练运用各种绑定方式和事件模型，能帮助开发者创建更丰富、响应更快速的用户体验。同时，注意优化事件处理，如使用事件委托，可以显著提升页面...

			
		

	





	

		

			

				
					
IE8下某些点击事件失效

				
			

			

				

					zqq3436的博客
				

				

					05-17
					
					3492
					
				

			

		

		

			
				
应用场景：    &lt;a href="javascript:newxtPage();"&gt;&lt;input type="button" value="下一页" /&gt;&lt;/a&gt;现象：此时，动态改变href的值，在IE8下点击事件并没有生效。解决办法：将事件添加到input标签，代码如下。  &lt;a href="javascript:void(0);&quo

			
		

	





	

		

			

				
					
IE8的JavaScript点击事件(onclick)不兼容的解决方法

				
			

			

				

					10-26
				

			

		

		

			
				
主要介绍了IE8的JavaScript点击事件(onclick)不兼容的解决方法,大家参考使用吧

			
		

	





	

		

			

				
					
针对不同浏览器的事件绑定以及鼠标滚轮事件

				
			

			

				

					Encorehwang的博客
				

				

					01-30
					
					2278
					
				

			

		

		

			
				
前段时间在看《JavaScript高级程序设计》第十三章-事件, 还没看完, 只是看到里面的一些内容觉得在这里做一个记录和总结会比较好. 首先先来讲解一下绑定事件一共有几种方式以及他们的特点和浏览器的兼容性

一. DOM0级事件处理程序

所谓的DOM0级事件处理程序, 就是通过JavaScript指定事件处理程序的传统方式, 就是将一个函数赋值给一个事件处理程序属性, 比方说div.o

			
		

	





	

		

			

				
					
元素的事件绑定的兼容写法

				
			

			

				

					jerny2017的博客
				

				

					05-10
					
					572
					
				

			

		

		

			
				
obj.onclick = fn1;obj.attachEvent("onclick", fn1); // 此方法IE11, Chrome, FF，已经不支持了，而且fn1中的this指向window，按常理说应该指向objobj.addEventListener("click", fn1); //此方法只有IE11, Chrome, FF才有此方法所以兼容写法可以这样写： function bi...

			
		

	





	

		

			

				
					
兼容IE8的，页面点击绑定

				
			

			

				

					qq_33172029的博客
				

				

					11-01
					
					373
					
				

			

		

		

			
				
情况：绑定整个页面点击事件时，IE8失效，所以做了以下兼容

代码：

第一种：（else内的方式绑定，只有谷歌等浏览器可以，IE8不可以）


//判断是否为IE8（showModalDialog为IE8特有弹窗方法）
if(window.showModalDialog){
       $(document).bind("click", function (e) {
             ...

			
		

	





	

		

			

				
					
JS  事件处理兼容IE8方法

				
			

			

				

					finedayforu的博客
				

				

					03-25
					
					596
					
				

			

		

		

			
				
为了兼容万恶的IE8
    
      
        event=event||window.event;

      
    
    
  



			
		

	





	

		

			

				
					
ie和谷歌添加事件的处理策略

				
			

			

				

					power8988的博客
				

				

					09-14
					
					266
					
				

			

		

		

			
				
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button id="btn">点我</button>
<script>
    function aaa() {
        alert('a')
    }
    fun

			
		

	





	

		

			

				
					
2018年6月22日（3.绑定事件与解除绑定事件的兼容写法）

				
			

			

				

					qq_37771631的博客
				

				

					06-22
					
					353
					
				

			

		

		

			
				
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;  &lt;meta charset="UTF-8"&gt;  &lt;title&gt;title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;input type="but

			
		

	





	

		

			

				
					
jquery 循环生成dom绑定事件

					
最新发布

				
			

			

				

					07-14
				

			

		

		

			
				
可以使用jQuery的`.each()`方法来循环生成DOM元素并绑定事件。下面是一个示例：  ```javascript // 创建一个包含数据的数组 var data = [  { name: 'John', age: 25 },  { name: 'Jane', age: 30 },  { name: 'Bob',...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值