JS中的事件绑定、取消、兼容问题

一、事件绑定

1、on+事件类型

      var div = document.getElementById('dv')// 1 on+事件类型 (同一点击事件只能绑定一次，绑定多次以最后一次为准)div.onclick = () => {console.log('click1');}div.onclick = () => {console.log('click2');}

2、addEventListener(事件类型，事件处理函数)

// 2 addEventListener(事件类型，事件处理函数) 同一事件可绑定多个事件处理函数，从上往下执行// 低版本ie中不可用div.addEventListener('click',()=>{console.log('addEventListener1次');})div.addEventListener('click',()=>{console.log('addEventListener2次');})

3、attachEvent(on+事件类型，事件处理函数)

// 3 attachEvent(on+事件类型，事件处理函数)// 在ie11中，不支持// 在ie9/10中，支持，从上往下处理函数// 在ie8中，不支持也不反对，点击无反应// 在ie5/7中，支持，从下往上处理函数div.attachEvent('onclick',function(){console.log('attachEvent1次');})div.attachEvent('onclick',function(){console.log('attachEvent2次');})

4、封装兼容性的元素事件绑定

      // 封装兼容性的元素事件绑定function bindEvent(ele,type,fn) {try{ele.addEventListener(type,fn)}catch(error){ele.attachEvent('on'+type,fn)}}function f1(){console.log('f1');}function f2(){console.log('f2');}function f3(){console.log('f3');}function f4(){console.log('f4');}div.addEventListener('click',f1)div.addEventListener('click',f2)div.addEventListener('click',f3)div.addEventListener('click',f4)div.attachEvent('onclick',f3)div.attachEvent('onclick',f4)

5、取消绑定的事件函数

   // 取消绑定的事件函数// removeEventListener(事件，处理函数)div.removeEventListener('click',f1) // 低版本ie不支持// detachEvent(事件，函数)div.detachEvent('onclick',f3)  // 低版本ie支持

6、取消绑定的事件函数（封装）

      // 封装兼容性的元素解除事件绑定function reEvent(ele,type,fn) {try{ele.removeEventListener(type,fn)}catch(error){ele.detachEvent('on'+type,fn)}}reEvent(div,'click',f1)

7、关于绑定的匿名事件函数

JS中的事件绑定、取消、兼容问题相关推荐

vue.js中的事件绑定-01笔记
之前发生了一个错误,事件绑定一直不成功,就是下面的错误代码 <div id="app">当前计数:{{count}}<button v-if="0&qu ...
前端学习（3207）：js中的事件绑定
JS之事件处理（一）--事件概述、非IE浏览器/IE浏览器中的事件绑定、解决浏览器事件绑定兼容性问题
一.概述描述:事件本质是一种交互操作,事件通常与函数配合使用,当事件发生时函数才会执行事件是由三部分组成的:事件源事件类型事件处理程序事件源:事件被触发的对象–谁事件类型:如何触发什么事 ...
JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
JS中的事件基础知识
本文首发于个人博客:www.wyb.plus JS作为一门事件驱动型的语言,了解与事件有关的知识是十分必要的. JS中与事件有关的概念非常多,本文尽量整理完善. 作者:王雨波 qq:760478684 ...
初识 Vue（11）---(Vue 中的事件绑定)
Vue 中的事件绑定案例:点击 Hello World ,从黑变红,再次点击,从红变黑... 通过 class 来实现页面效果的变更方法一:(通过对象)对象绑定 <!DOCTYPE h ...
JavaScript系列—简述JS中的事件委托和事件代理
JS中的事件委托和事件代理什么是事件委托? 事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件.我用取快递来解释这个现象: ...
js中hover事件时候的BUG以及解决方法
js中hover事件时候的BUG以及解决方法参考文章: (1)js中hover事件时候的BUG以及解决方法 (2)https://www.cnblogs.com/mmykdbc/p/7464050. ...
JS中常遇到的浏览器兼容问题和解决方法
JS中常遇到的浏览器兼容问题和解决方法参考文章: (1)JS中常遇到的浏览器兼容问题和解决方法 (2)https://www.cnblogs.com/wws-bk/p/9770834.html 备忘 ...

JS中的事件绑定、取消、兼容问题

一、事件绑定

JS中的事件绑定、取消、兼容问题相关推荐

最新文章

热门文章