写在前面的话:就我目前的水平来看,这两种方法不能一起使用,用on添加的事件removeEventListener()没办法删除,反之一样

注册事件的两种方式:

  • on+事件名称

  • addEventListener()事件监听器

  1. 假设事件源是获取到的button节点的btn,为btn注册一个点击事件:  btn.addEventListener("click",fn);  //第一个参数是事件名称,没有on,第二个是执行的函数体
  2. 这种方法可以为一个节点注册多个事件       如上边的btn:    
    btn.addEventListener("click",fn1);
    btn.addEventListener("click",fn2);
  3. 在IE9前,用attachEvent()这个方法
  4. 因为在DOM2之后出来,所以需要考虑到兼容性的问题
    <body>
    <input type="button" value="一个神奇的按键">
    <script>
    var inp = document.getElementsByTagName('input')[0]; //事件的兼容性写法
    EventListener = {
    addEvent : function (ele,fn,str) {
    if (ele.addEventListener) {
    ele.addEventListener(str,fn);
    }else if (ele.attachEvent) { //兼容IE678
    ele.attachEvent("on" + str,fn);
    }else { //DOM0时代,但当前的这种写法只是示例,不够完善
    ele["on" + str] = fn;
    }
    },
    removeEvent : function (ele,fn,str) {
    if (ele.removeEventListener) {
    ele.removeEventListener(str,fn);
    }else if (ele.detachEvent) {
    ele.detachEvent("on" + str, fn);
    }else {
    ele["on" + str] = fn;
    }
    }
    }
    function fn() {
    alert(1);
    } var inp = document.getElementsByTagName('input')[0];
    EventListener.addEvent(inp,fn,"click");//添加事件
    EventListener.removeEvent(inp,fn,"click");//移除事件
    </script>

JS-事件心得的更多相关文章

  1. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  2. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  3. 什么是JS事件冒泡?

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  4. js事件技巧方法整合

    window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...

  5. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

  6. js 事件大全

    Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...

  7. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  8. JS事件

    JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的 ...

  9. 原生js事件和jquery事件的执行顺序问题

    场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...

  10. 特殊js事件

    1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQ ...

随机推荐

  1. 新书预告 ArcGIS跨平台开发系列第一本

    新书预告 ArcGIS跨平台开发系列第一本 候选题目: ArcGIS Runtime开发实验实习教程 ArcGIS Runtime开发案例教程 简介: GIS最新现代开发理念打造的跨所有移动和桌面平台 ...

  2. 吴裕雄 01-mysql管理

    SHOW DATABASES; update user set authentication_string = password("123456") where user='roo ...

  3. IDEA导入jar包

    http://blog.csdn.net/a153375250/article/details/50851049

  4. SAP 表类型

    最近看了一下ABAP的表类型相关知识,做一个自己的分析总结. ABAP的表类型似乎我感觉只应该有2种,而不是大家说的3种. 从数据存储的原理上来看的.下面我做一个分析. 一般情况下,我们都说ABAP中 ...

  5. JAVA语言 第五周

    我准备在下一周对Java语法进行总结,现在写代码模板还要参考,语法掌握的不熟悉. 这一周除了对代码进行完善外,观看了一些java入门学习视频.

  6. 终止执行js的方法

    (一)在function里面 (1)return;(2)return false; (二)非function方法里面 alert("before error.");throw Sy ...

  7. js循环对象,(多层数组)

    javaScript遍历对象.数组总结   在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天抽空把经常用到的方法小结一下,方便今后参考使用!     javaSc ...

  8. cakephp 利用Pushapi扩展 进行app 消息推送

    public function push_designer_app($params) { $this->layout = false; $this->autoRender = false; ...

  9. Django 自定义 过滤器和模板标签

    代码布局(自定义的代码,放在哪里) 二种方式:1. 某个app特有的 -app 目录下,templatetags 文件夹     ** 必需是这个名称的包(目录中有__init__.py文件) -再到 ...

  10. 十:python 对象类型详解六:文件

    一:文件 1.简介:内置open 函数会创建一个python 文件对象,可以作为计算机上的一个文件链接.在调用open 之后,可以通过调用返回文件对象的方法来读写相关外部文件.文件对象只是常见文件处理 ...