JS之事件处理（一）--事件概述、非IE浏览器/IE浏览器中的事件绑定、解决浏览器事件绑定兼容性问题

已于 2022-05-18 13:19:10 修改
阅读量437 收藏 1
点赞数 1
分类专栏： javascript 文章标签： javascript
于 2021-04-14 09:39:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43285360/article/details/115689078
版权

在这里插入图片描述

一、概述
  • 描述：事件本质是一种交互操作，事件通常与函数配合使用，当事件发生时函数才会执行
  • 事件是由三部分组成的：事件源 事件类型 事件处理程序
  • 事件源：事件被触发的对象–谁
  • 事件类型：如何触发 什么事件（比如鼠标点击(onclick)、鼠标经过等等）
  • 事件处理程序：通过一个函数赋值的方式完成

作用：

  • 1.各元素之间可以借助事件来进行交互
  • 2.用户和页面之间也可以通过事件来交互
  • 3.后端和页面之间也可以通过事件来交互（减缓服务器压力）

注意：

  • 事件通常与函数配合使用，当事件发生时函数才会执行
二、事件传递
  • 描述：事件不仅能够和触发者交互，还会在特定的情况下沿着dom tree逐级传递，和dom tree中的各个节点进行交互。而js中的这种机制被称为事件传递机制。

说明：

  • 1）触发者：事件第一次在哪个节点发生，那么这个节点就是触发者
  • 2）特定的情况：domTree中其他节点也绑定了这个事件

类型：

  • **事件冒泡：**事件从最具体的元素开始，沿着DOM树逐级向上依次触发，直至最不具体的元素停止
	<div>
        <button>点我</button>
    </div>

	<style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

<script>
        //获得元素
        var div = document.querySelector('div');
        var but = document.querySelector('button');

        but.onclick = function() {
            console.log("按钮触发了");
        }

        div.onclick = function() {
            console.log("div触发了");
        }

        document.body.onclick = function() {
            console.log("body触发了");
        }

        document.documentElement.onclick = function() {
            console.log("html触发了");
        }

        document.onclick = function() {
            console.log("document触发了");
        }
</script>

当点击button按钮时：
在这里插入图片描述当点击div区域(蓝色部分)时
在这里插入图片描述

  • 事件捕获：事件从最不具体的元素开始，沿着DOM树逐级向下依次触发，直至达到最具体的元素停止
  • DOM0级事件：只支持冒泡
  • DOM2级事件：同时涵盖了两个方向，冒泡和捕获
  • DOM2级事件先捕获后冒泡，默认在冒泡阶段执行，如果在定义事件时第三个参数传入true，则会在捕获阶段执行函数
	<div>
        <button>点我</button>
    </div>

	<style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

 <script>
        //获得元素
        var div = document.querySelector('div');
        var but = document.querySelector('button');

        but.addEventListener("click", function(event) {
            console.log("but");
        }, true)

        div.addEventListener("click", function(event) {
            console.log("div");
        }, true)

        document.body.addEventListener("click", function(event) {
            console.log("body");
        }, true)
</script>

当单击按钮时：
在这里插入图片描述
当单击div区域时：
在这里插入图片描述

注意：如没有特殊情况，均采用事件冒泡。

示意图：
事件传递示意图

三、非IE浏览器中的【事件绑定】

1.html事件
  • 描述：绑定操作发生在HTML代码中的事件，称为HTML事件
  • 语法：on+事件=‘函数();函数();函数();……

注意：

  • a.HTML事件采用冒泡机制来处理事件
  • b.函数执行的顺序按照绑定事件时函数的顺序为准
  • c.绑定多个函数时，函数应当采用分号隔开

HTML事件的缺陷：

  • 耦合性太强，修改一处的同时也要修改另一处
  • 当函数没有加载成功时，用户去触发事件，则会报错
	<div class="div1">div1
        <div class="div2" onclick="test3()"> div2</div>
    </div>

 	<style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: blue
        }
        
        .div2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 25px auto
        }
    </style>

<script>
        //获得元素
        var div1 = document.querySelector('.div1');
        var div2 = document.querySelector('.div2');

        function test1() {
            console.log("这是第一个函数");
        }

        function test2() {
            console.log("这是第二个函数");
        }

        function test3() {
            console.log("这是第三个函数");
        }
</script>

当分别点击 div2 和 div1 区域时：
请添加图片描述

移除：

  • 元素.setAttribute(‘on+事件名’，null);
 <script>
        //获得元素
        var div1 = document.querySelector('.div1');
        var div2 = document.querySelector('.div2');

        function test1() {
            console.log("这是第一个函数");
        }

        function test2() {
            console.log("这是第二个函数");
        }

        function test3() {
            console.log("这是第三个函数");
        }

        div1.setAttribute('onclick', null);
</script>

此时当再次单击div1时，div1不会有任何反应！

2.DOM0级事件
  • 描述：在js脚本中，直接通过【on+事件名】方式绑定的事件称为是DOM0级事件
  • 语法：元素.on+事件名 = function(){需要执行的语句;}

注意：

  • （1）dom0方式绑定的事件均为冒泡事件
  • （2）dom0方式一个节点，只能绑定一个事件
  • (3) 如果同时绑定多个触发函数，则以最后一个为准

弊端：一次只能绑定一个触发函数。

 <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: blue
        }
        
        .div2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 25px auto
        }
</style>

  	<div class="div1">div1
        <div class="div2"> div2</div>
    </div>

 <script>
        var div1 = document.querySelector('.div1');
        var div2 = document.querySelector('.div2');

        div1.onclick = function() {
            console.log("div1被点击了1次");
        }

        div2.onclick = function() {
            console.log("div2被点击了1次");
        }

        div2.onclick = function() {
            console.log("div2被点击了2次");
            //div2.onclick = null;
        }
</script>

当点击div1时：
在这里插入图片描述
当点击div2时
在这里插入图片描述

移除： 元素. on+事件名=null;
(移除点击事件，不是移除绑定的函数)

<script>
        var div1 = document.querySelector('.div1');
        var div2 = document.querySelector('.div2');

        div1.onclick = function() {
            console.log("div1被点击了1次");
        }

        div2.onclick = function() {
            console.log("div2被点击了1次");
        }

        div2.onclick = function() {
            console.log("div2被点击了2次");

            //当放在函数里面时，点击事件会被触发一次，当第二次
            //再次点击时将不再有任何反应
            div2.onclick = null;
        }

        //当放在函数外面时，移除的将是整个onclick点击事件，
        //因此当你点击对应的区域时则不会被触发
        // div2.onclick = null;
</script>

当移除点击事件放在函数里时：
第一次点击div2区域：
在这里插入图片描述第二次点击div2区域：
在这里插入图片描述当移除点击事件放在函数外时：
在这里插入图片描述
此时当你点击div2区域时，该区域的绑定事件不会触发

3.DOM2级事件
  • 描述：在js脚本中，通过addEventListener函数绑定的事件称为是DOM2级事件
  • 语法：元素.addEventListener(type,listener,useCapture)

参数：

  • type:事件类型。【没有on！没有on！没有on！】
  • listener:监听函数，绑定的函数
  • useCapture:是否使用捕获机制。如果不写，默认值为false；false:冒泡机制；true：捕获机制
<style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: blue
        }
        
        .div2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 25px auto
        }
</style>

  	<div class="div1">div1
        <div class="div2"> div2</div>
    </div>

<script>
        // 获得元素
        var div1 = document.querySelector('.div1');
        var div2 = document.querySelector('.div2');

        function fun() {
            console.log("这是dom2事件函数div2一次");
        }
        div2.addEventListener('click', fun, true);

        div2.addEventListener('click', function() {
                console.log("这是dom2事件函数div22次");
            }, true)
</script>

在这里插入图片描述

注意:

  • a. DOM2级事件可以绑定多个函数，执行顺序按照函数书写的顺序
  • b. DOM2级事件中如果绑定函数为【匿名函数】则无法删除。能够删除的只能是外部函数。
<script>
        // 获得元素
        var div1 = document.querySelector('.div1');
        var div2 = document.querySelector('.div2');

        function fun() {
            console.log("这是dom2事件函数div2一次");
        }
        div2.addEventListener('click', fun, true);
        //div2.removeEventListener('click', fun, true);

        //匿名函数
        div2.addEventListener('click', function() {
            console.log("这是dom2事件函数div22次");
        }, true)

        div2.removeEventListener('click', function() {
            console.log("这是dom2事件函数div22次");
        }, true);
</script>

在这里插入图片描述

移除：

  • 语法： node.removeEventListener(type,外部函数名,useCapture)
<script>
        // 获得元素
        var div1 = document.querySelector('.div1');
        var div2 = document.querySelector('.div2');

        function fun() {
            console.log("这是dom2事件函数div2一次");
        }
        div2.addEventListener('click', fun, true);

        div2.addEventListener('click', function() {
                console.log("这是dom2事件函数div22次");
            }, true)
        div2.removeEventListener('click',fun,true);
</script>

在这里插入图片描述

四、IE浏览器中的【事件绑定】
  • IE中的事件绑定支持HTML事件以及DOM0级事件，唯独不支持DOM2级事件
  • js脚本中，通过attachEvent函数绑定事件
  • 语法：元素.attachEvent(type,listener)

参数：

  • type:事件类型。【有on！有on！有on！】
  • listener:监听函数，绑定的函数

注意:如果绑定多个函数，按照函数书写的倒叙执行

1.HTML事件
	<div class="div1" onclick="test1()">div1
        <div class="div2" onclick="test2()"> div2</div>
    </div>

 <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: blue
        }
        
        .div2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 25px auto
        }
</style>

 <script>
        function test1() {
            console.log("这是div1");
        }

        function test2() {
            console.log("这是div2");
        }
</script>

当点击div2区域时：
在这里插入图片描述
当点击div1区域时：
在这里插入图片描述

2.DOM0级事件
	<div class="div1">div1
        <div class="div2"> div2</div>
    </div>

 <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: blue
        }
        
        .div2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 25px auto
        }
</style>

 <script>
        document.querySelector('.div1').onclick = function() {
            console.log("这是div1第一次");
        }

        document.querySelector('.div2').onclick = function() {
            console.log("这是div2");
        }
</script>

当点击div1区域时：
在这里插入图片描述
当点击div2区域时：
在这里插入图片描述

3.DOM2级事件
  • 语法;元素.attachEvent(type,listener)

参数：

  • type:事件类型。【有on！有on！有on！】
  • listener:监听函数，绑定的函数

注意:如果绑定多个函数，按照函数书写的倒叙执行

	<div class="div1">div1
        <div class="div2"> div2</div>
    </div>

 <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: blue
        }
        
        .div2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 25px auto
        }
</style>

<script>
        document.querySelector('.div1').attachEvent('onclick', fun);

        function fun() {
            console.log("这是div1一次");
        }
</script>

在这里插入图片描述

 <script>
      
        document.querySelector('.div1').attachEvent('onclick', function() {
            console.log("这是div1 1次");
        });

        document.querySelector('.div1').attachEvent('onclick', function() {
            console.log("这是div1 2次");
        });
</script>

在这里插入图片描述

移除：元素.detachEvent(type,listener)

<script>
        document.querySelector('.div1').attachEvent('onclick', fun);

        function fun() {
            console.log("这是div1一次");
            document.querySelector('.div1').detachEvent('onclick', fun);
        }
    </script>

当第一次点击div1区域时：
在这里插入图片描述
当再次点击div1区域时将无任何反应

五、解决浏览器事件绑定兼容性问题

思路：

  • 绑定事件：如果能使用addEventListener方法绑定的，就采用本方法；否则采用attachEvent方法
  • 解绑事件：如果能采用addEventListener方法绑定的，就采用removeEventListener方法解绑；否则就采用detachEvent方法解绑

语法：

<script>
	 function addEvent(ele){
            if(如果为非IE){
                就执行addEventListener
            }else{
                执行attachEvent
            }
        }
        addEvent();
</script>

具体用法如下：

<div style="width: 200px;height: 200px;background-color: pink"></div>

<script>
        var div = document.querySelector('div');

        //采用封装，封装成一个对象
        var superEvent = {
            add: function(ele, type, func) {
                if (ele.addEventListener) {
                    ele.addEventListener(type, func);
                } else {
                    ele.attachEvent('on' + type, func);
                }
            },
            remove: function(ele, type, func) {
                if (ele.removeEventListener) {
                    ele.removeEventListener();
                } else {
                    ele.detachEvent();
                }
            }
        }

        function show() {
            console.log("这是一个div执行函数");
        }
        superEvent.add(div, 'click', show);
        //superEvent.remove(div, 'click', show);
</script>

非IE下：
在这里插入图片描述
IE下：
请添加图片描述

六、鼠标事件

说明：

  • a.dom0级可以给同一个元素绑顶多个不同类型的事件
  • b.事件互相之间互不影响
  • c.默认是冒泡事件

语法：元素.on+鼠标事件名称 = 调用函数

1.单击事件 onclick

鼠标左键单击事件，当你的鼠标在某个标签上进行点击动作，就会触发该事件
下面是该事件的两种写法：

<div id="div" onclick="fun1()">hahah</div>

<div id="div2" style="width:200px;height: 200px;background-color: pink"></div>

<script>
		// 方式1
		var fun1=()=>{   
			console.log("发生点击");
		}
   
   		// 方式2(推荐)
        // 获得元素
        var div = document.querySelector('div2');

        div.onclick = function() {
            alert('单击有效');
        }
</script>

当鼠标单击div区域后：
在这里插入图片描述
总结：

  • 在开发过程中，推荐使用第二种(元素.onclick)，因为这种方式更利于维护
  • 同时也可以更方便的给新创建出的标签添加事件
  • 第一种方式如果要获取标签对象本身，需要在绑定函数时传入this实参；第二种方式通过对象绑定的事件，在函数中可以直接使用this关键字，表示的就是标签对象自己
  • 第一种方式在函数中的this表示的window对象，第二种方式如果通过箭头函数来绑定的this也代表window
2.双击事件 ondblclick

鼠标左键双击事件，当你的鼠标在某个标签上快速进行连续两次点击动作，就会触发该事件

<div style="width:200px;height: 200px;background-color: pink"></div>

<script>
        // 获得元素
        var div = document.querySelector('div');

        div.ondblclick = function() {
            console.log('双击666');
        }

        document.body.ondblclick = function() {
            console.log("双击body有效");
        }
</script>

当鼠标双击div区域后：
在这里插入图片描述
当鼠标双击空白区域后：
在这里插入图片描述

3.鼠标按下时事件 onmousedown

鼠标按键按下事件，当按下任意一个鼠标按键时，会触发该事件

<div style="width:200px;height: 200px;background-color: pink"></div>

<script>
        // 获得元素
        var div = document.querySelector('div');

        div.onmousedown = function() {
            div.style.backgroundColor = 'blue';
        }
</script>

当在div区域按下鼠标后：
在这里插入图片描述

4.鼠标抬起时事件 onmouseup

鼠标按键弹起事件，当鼠标按键在按下以后再弹起会触发该事件

<div style="width:200px;height: 200px;background-color: pink"></div>

<script>
        // 获得元素
        var div = document.querySelector('div');

        div.onmousedown = function() {
            div.style.backgroundColor = 'blue';
        }

        div.onmouseup = function() {
            div.style.backgroundColor = 'orange';
        }
</script>

在这里插入图片描述

5.鼠标移动时事件 onmousemove

当鼠标在标签上移动时，触发该事件

<div style="width:200px;height: 200px;background-color: pink"></div>

 <script>
        // 获得元素
        var div = document.querySelector('div');

        div.onmousemove = function() {
            //event对象，仅在函数内部使用，表示事件本身
            //clientX  clientY  ,表示鼠标在视口中的坐标
            var x = event.clientX;
            var y = event.clientY;
            console.log('(x,y):(' + x + ',' + y + ')');
        }
</script>

当鼠标在div区域内移动时：
在这里插入图片描述

6.鼠标移入移除事件
移入移除不冒泡事件 mouseenter mouseleave

mouseenter ：鼠标指向事件，当鼠标第一次移动到这个标签上时触发该事件，而且当我们从该标签内部移动到这个标签的子标签之上时，不会触发该事件
mouseleave：鼠标移出事件，当鼠标从某个标签上离开时触发该事件，如果我们从该标签进入自己的子标签区域不会触发该事件，从子标签区域离开也不会触发该事件

 	<div class="div1">
        <div class="div2"></div>
    </div>

<style>
        .div1 {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        
        .div2 {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
</style>

 <script>
        var div1 = document.querySelector('.div1');
        var div2 = document.querySelector('.div2');

        div2.addEventListener('mouseenter', function() {
            console.log('鼠标进入div2区域');
        })

        div1.addEventListener('mouseenter', function() {
            console.log('鼠标进入div1区域');
        })

        div2.addEventListener('mouseleave', function() {
            console.log('鼠标移出div2区域');
        })

        div1.addEventListener('mouseleave', function() {
            console.log('鼠标移出div1区域');
        })
</script>

当鼠标进入和移除div1区域时：
在这里插入图片描述

当鼠标进入和移除div2区域时：
在这里插入图片描述

移入移除冒泡事件 mouseover mouseout

mouseover：鼠标指向事件，当鼠标第一次移动到这个标签上时触发该事件，而且当我们从该标签内部移动到这个标签的子标签之上时，依然会触发这个事件
mouseout：鼠标移出事件，当鼠标从某个标签上离开时触发该事件，而且如果我们从该标签进入自己的子标签区域也会触发该事件，从标签区域离开也会触发该事件

 	<div class="div1">
        <div class="div2"></div>
    </div>

<style>
        .div1 {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        
        .div2 {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
</style>

<script>
        var div1 = document.querySelector('.div1');
        var div2 = document.querySelector('.div2');

        //冒泡事件
        div2.addEventListener('mouseover', function() {
            console.log('鼠标进入div2区域');
        })
        div1.addEventListener('mouseover', function() {
            console.log('鼠标进入div1区域');
        })
        div2.addEventListener('mouseout', function() {
            console.log('鼠标移出div2区域');
        })
        div1.addEventListener('mouseout', function() {
            console.log('鼠标移出div1区域');
        })
</script>

当鼠标移入移除div1区域时：
在这里插入图片描述
当鼠标移入移除div2区域时：
在这里插入图片描述

总结：
  • 1.鼠标的基本事件默认采用冒泡传递
  • 2.可以给一个元素添加多个不同的鼠标事件，不同的鼠标事件之间互不影响
  • 3.mouseenter和mouseleave两个事件不冒泡触发（推荐使用）
小白小白从不日白
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
【事件绑定的方式】兼容浏览器的事件监听器的设计
heshan1992的博客
08-19 401
一、兼容浏览器的事件监听器 主要是兼容IE8以前的浏览器，addEvent方法中介绍了三种绑定事件的方式，其中要注意： （1）在IE的事件绑定方式中，事件处理函数里面的事件对象时挂在window上面的，所以获取event对象时需要利用window.event来获取 （2）addEventListener添加监听器时注意事件的冒泡和事件的捕获，即该方法的第三个参数，事件的冒泡和捕获注意的事项参见
IE浏览器中图片onload事件无效的解决方法
09-04
但IE浏览器在从缓存中快速加载图片时，由于`onload`事件还未绑定，图片就已经加载完毕，因此不会触发该事件，导致`loading`类无法被删除。 为了解决这个问题，开发者需要调整代码的顺序，确保`onload`事件处理器在...
JAVASCRIPT IE与其他浏览器兼容 事件绑定
JJXBSH的博客
04-08 1495
addEventListener试用范围        在给一个元素绑定多个事件时，我们会使用到标题中的这个js方法。此方法存在于元素的属性中使用方法如下：E.addEventListener("click",function(){ },false); fasle参数：表示是否在捕获阶段触发此方法其主要适用的区间多在火狐，谷歌等浏览器中。此时的调用方法为属性调用。 不能够兼容IE浏览器。在其下报错...
JS-绑定事件的三种方法(+兼容代码)
meng的博客
04-22 375
绑定事件的三种方法 ele.onxxx = function (event) {} obj.addEventListener(事件类型, 处理函数, false); obj.attachEvent(‘on’ + 事件类型, 处理函数); ele.onxxx = function (event) {} 程序this指向的是dom元素本身; ** 解除：ele.onxxx = false / ‘’...
ie9以下事件绑定
qq_32019935的博客
03-17 413
要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。 在JavaScript中，有三种常用的绑定事件的方法： 在DOM元素中直接绑定； 在JavaScript代码中绑定； 绑定事件监听函数。 一. 在DOM元素中直接绑定 这里的DOM元素，可以理解为HTML标签。JavaScript支持在标...
IE下常用的事件绑定的方式
不甜呐的博客
06-22 735
1.html事件 描述：在IE下html事件绑定方式等同于非IE、 详情请看： 2.dom0事件 描述：在IE下dom0事件绑定方式等同于非IE 详情请看： 3.dom2事件 描述：在IE下通过attachEvent函数绑定的事件，称为dom2事件 语法：元素节点.attachEvent('type',listenFunc) 说明： (1)参数一表示绑定事件的类型，有on！！ (2)参数二表示事件发生时执行的监听函数 注意： (1)在...
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
01-19
假设在我们页面有这么一段标签：... 现在在页面加入这么一段脚本： 代码如下: [removed] [removed]=function(){　//在各个层级的元素上绑定事件 [removed]=func; [removed]=func; document.getElementById(“timeDiv”)
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
10-29
例如，`t.isIE=(b.indexOf('msie')>-1)`表示检查是否是IE浏览器。 2. **绑定事件**： 事件处理是JavaScript与用户交互的基础。在JavaScript中，有两种主要的事件绑定方法：`attachEvent`（适用于IE）和`...
IE浏览器下JS脚本提交表单后，不能自动提示问题解决方法
10-16
总之，解决IE浏览器下JS脚本提交表单后不能自动提示的问题，需要理解浏览器特性的差异，并结合JavaScript事件处理来实现。通过合理配置浏览器设置和编写适当的JavaScript代码，可以确保用户在使用表单时获得更好的...
JavaScript中 --- 绑定多事件问题 浏览器兼容性解决方法。
wzg0817的博客
04-24 278
  为一个元素绑定多事件有两种方法：addEventListener（）和 attachEvent() addEventListener（） —IE8及以下不支持 通过这个方法也可以为元素绑定响应函数 参数：   1.事件的字符串，不要on   2.回调函数，当事件触发时该函数会被调用   3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false 使用addEventListene...
解决浏览器事件绑定兼容性问题
小白小白从不日别的博客
09-23 246
这里主要是针对DOM2级事件，对于HTML事件和DOM0级事件在非IE和IE下都能得到支持，因此这里只实现对DOM2级事件的兼容性处理和封装 思路： 绑定事件：如果能使用addEventListener方法绑定的，就采用本方法；否则采用attachEvent方法 解绑事件：如果能采用addEventListener方法绑定的，就采用removeEventListener方法解绑；否则就采用detachEvent方法解绑 伪代码： function addEvent(ele){
JavaScript解决浏览器兼容性问题（三）—— 事件的绑定
前端历险记的博客
03-17 552
JavaScript解决浏览器兼容性问题（三）—— 事件的绑定
JS-浏览器事件绑定兼容性问题
m0_48683643的博客
10-05 233
前端笔记-浏览器事件绑定兼容性问题1.代码演示：2.代码优化: 1.事件绑定与解绑:  绑定事件时:  能使用addEventListener方法绑定的，就采用此方法.  否则采用attachEvent方法绑定  解绑事件时:  能用removeEventListener方法绑定就用。  否则就用detachEvent方法绑定。 1.代码演示： 代码如下（示例）： //例.html部分 <div style="width:200px;height:200px;backgro
兼容绑定事件的3种方法
我的博客
08-29 1545
一、直接绑定(不利于UI和代码分离,event详见后面） 二、DOM事件句柄 document.getElementById("divid").onclick = function(){}; 三、侦听函数var tb = document.getelementbyid("tab1"); if(window.event){// 只有ie下，event是window的对象属性，注意两
js 事件绑定的几种方式以及它们的区别
weixin_34237596的博客
01-10 787
3种绑定方式1：DOM元素中直接绑定2：在JS代码中绑定3：绑定事件监听函数不同点：1：用 "addeventlistener" 可以绑定多次同一个事件，且都会执行，而在DOM结构如果绑定两个 "onclick" 事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个事件。2：addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、Fir...
JS绑定事件三种方式
仗剑天涯，从摘要开始
04-06 306
三种方式 1、在DOM中直接绑定 2、在JS代码中直接绑定 3、使用事件监听函数绑定事件一、在DOM中直接绑定 也就是直接在html标签中通过 onXXX=“” 来绑定。举个例子： <input type="button" value="点我呦" onclick="alert("hello world!")"/> <!--或者--> <input type="bu...
IE与非IE浏览器在事件绑定的执行顺序问题
09-20 651
原始的DOM1事件处理机制，是不能绑定多个处理函数。如一个元素在onclick事件先绑定一个函数，用来alert其id，然后再在相同的事件绑定另一个函数，用来alert其style。对不起，第二个函数会覆盖掉第一个，只会alert其style。于是.addEventListener() 与 .attachEvent()被分别开发出来了。为了屏蔽各浏览器的差异，javascript界举办了一
JS IE浏览器事件绑定：HTML事件、dom0事件、dom2事件
boonyaxnn的博客
04-08 787
一、html事件和dom0事件 没有兼容性问题，非IE的dom2事件不能在 IE8及其以下浏览器使用 报错：对象不支持“addEventListener”属性或方法 二、IE浏览器下的dom2事件绑定 1、语法：元素.attachEvent(type,listener) 2、注意： ①事件类型必须有 on ②没有事件捕获 ③按照事件绑定的顺序依次触发...
事件绑定的兼容处理，同时兼容IE678 和 Chrome
水机.Threeki
09-11 489
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type="button"
面试题技术必背1
最新发布
08-08
在IE浏览器兼容性方面： - IE9及以上版本开始支持 `addEventListener`，而更早的版本如IE8及以下需使用 `attachEvent` 和 `detachEvent`。 - `attachEvent` 只支持事件冒泡，不支持捕获。 处理IE和标准浏览器的兼容...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白小白从不日白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值