事件绑定与解绑:

el.onEventName = function (){}

document.getElementById("dom").onclick = function(){  } //绑定事件
document.getElementById("dom").onclick = null;          //移除绑定  

dom0级事件,也就是最早期js处理事件的方式。事件绑定写法比较简单,但是有个致命的缺点,只能给一个元素的某一个行为绑定一次方法,第二次绑定的会把前面的覆盖掉。

document.getElementById("dom").onclick = function(){
console.log("click"); //无法输出
}
document.getElementById("dom").onmouseover = function(){
    console.log("mouseover");  //可以输出
}

如上,触发 onclick 这个事件将不会任何反馈;

事件监听与移除监听:

el.addEventListener("EventName",function(){},false);   注:第一个参数:事件名;第二个参数:事件回调,第三个参数:表示是在事件捕获(true)或事件冒泡阶段(false) 触发,默认false

dom2级事件,js规范更新后,提出的另一种事件处理方案,通过addEventListener方法去监听某个元素上的事件是否被触发,解决了多次绑定被覆盖的问题

document.getElementById("dom").addEventListener("click",function(){
console.log("click1"); //输出
});
document.getElementById("dom").addEventListener("click",function(){
console.log("click2"); //输出
});

removeEventListener 移除监听 ,注意,如果addEventListener 第二个参数是匿名函数, removeEventListener无法移除,如下

错误示范:

document.getElementById("dom").addEventListener("click",function(){});
document.getElementById("dom").removeEventListener("click",function(){})

正确示范:

function eventcallback(){

}
document.getElementById("dom").addEventListener("click",eventcallback);
document.getElementById("dom").removeEventListener("click",eventcallback);

缺点:IE9以下addEventListener /removeEventListener不兼容

既来之,则安之!

IE6~8 用 attachEvent/detachEvent   

el.attrachEvent("onEventName",function(){  });     如:
el.attachEvent('onclick',function(){{});
detachEvent 移除事件 同removeEventListener 一样,无法移除 带匿名函数的事件
正确示范:
function eventcallback(){

}
document.getElementById("dom").attachEvent("onclick",eventcallback);
document.getElementById("dom").detachEvent("onclick",eventcallback);
如何去兼容所有浏览器:
function addEvent(el, eventName, fn, useCapture)
{
if (el.addEventListener)
{
// Dom2
el.addEventListener(eventName, fn, useCapture);
return true;
}
else if (el.attachEvent)
{
// IE6~8
var r = el.attachEvent('on' + eventName, fn);
return r;
}
else
{
// Dom0
el['on' + eventName] = fn;
}
}

(php开发,web前端,ui设计,vr开发专业培训机构,v客学院版权所有,转载请注明出路,谢谢!!!)

JavaScript 事件处理详解的更多相关文章

  1. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  2. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  3. JavaScript正则表达式详解(一)正则表达式入门

    JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...

  4. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  5. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  6. javascript 函数详解2 -- arguments

    今天我们接着上篇文章来继续javascript函数这个主题.今天要讲的是函数对像中一个很重要的属性--arguments. 相关阅读: javascript 函数详解1 -- 概述 javascrip ...

  7. [原创]JavaScript继承详解

    原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...

  8. iOS开发——实用技术OC篇&事件处理详解

    事件处理详解 一:事件处理 事件处理常见属性: 事件类型 @property(nonatomic,readonly) UIEventType     type; @property(nonatomic ...

  9. javaScript基础详解(1)

    javaScript基础详解 首先讲javaScript的摆放位置:<script> 与 </script> 可以放在head和body之间,也可以body中或者head中 J ...

随机推荐

  1. 递归删除资源树 Ztree

    前言 最近项目里有这么一个需求:现在有一个用Ztree编写的资源树,当删除资源树的某个节点时,则将此节点下面的所有节点全部删除,这里显然就用到了递归:若此节点被删除后无其它的兄弟节点了,我们还需要将其 ...

  2. win10怎么关闭把管理员权限

    按住WIN+R 计算机配置----Windows设置----安全设置----本地策略----安全选项----用户账户控制:以管理员批准模式运行所有管理员,把启用改为禁止然后重启电脑

  3. nexus配置第三方库文件

    进入nexus管理界面 默认用户名密码:admin/admin123 在左侧Views/Repositories中选择Repositories,然后在右侧的面板中选择3rd party,在下方arti ...

  4. HDU 5667 Sequence(矩阵快速幂)

    Problem Description Holion August will eat every thing he has found. Now there are many foods,but he ...

  5. Ubuntu安装谷歌输入法或者搜狗

    1.进入系统先更软件更新器这个在系统计算机中搜索,点击就好了 2.先添加以下源sudo add-apt-repository ppa:fcitx-team/nightly 3.添加源之后需要更新一下系 ...

  6. Exchange Port

    Get-POPSettings-110 Get-IMAPSettings-143 Exchange Network Port References Exchange Server 2000 http: ...

  7. Spoken English Practice(And I can't walk. Should i just stay home and pout about it?)

    绿色:连读:                  红色:略读:               蓝色:浊化:               橙色:弱读     下划线_为浊化 口语蜕变(2017/7/12) ...

  8. Python笔记-进程Process、线程Thread、上锁

    1.对于操作系统来说,一个任务就是一个进程(Process).比如打开一个浏览器就是启动一个浏览器进程,打开一个记事本就启动了一个记事本进程. 2.在一个进程内部,要同时干多件事,就需要同时运行多个“ ...

  9. (转)聊聊Servlet、Struts1、Struts2以及SpringMvc中的线程安全

    前言 很多初学者,甚至是工作1-3年的小伙伴们都可能弄不明白?servlet Struts1 Struts2 springmvc 哪些是单例,哪些是多例,哪些是线程安全? 在谈这个话题之前,我们先了解 ...

  10. Zipline Data Bundles

    Data Bundles A data bundle is a collection of pricing data, adjustment data, and an asset database. ...