JavaScript 事件处理详解
事件绑定与解绑:
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 事件处理详解的更多相关文章
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- JavaScript正则表达式详解(一)正则表达式入门
JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...
- JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解
二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...
- JavaScript事件详解-zepto的事件实现
zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...
- javascript 函数详解2 -- arguments
今天我们接着上篇文章来继续javascript函数这个主题.今天要讲的是函数对像中一个很重要的属性--arguments. 相关阅读: javascript 函数详解1 -- 概述 javascrip ...
- [原创]JavaScript继承详解
原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...
- iOS开发——实用技术OC篇&事件处理详解
事件处理详解 一:事件处理 事件处理常见属性: 事件类型 @property(nonatomic,readonly) UIEventType type; @property(nonatomic ...
- javaScript基础详解(1)
javaScript基础详解 首先讲javaScript的摆放位置:<script> 与 </script> 可以放在head和body之间,也可以body中或者head中 J ...
随机推荐
- 递归删除资源树 Ztree
前言 最近项目里有这么一个需求:现在有一个用Ztree编写的资源树,当删除资源树的某个节点时,则将此节点下面的所有节点全部删除,这里显然就用到了递归:若此节点被删除后无其它的兄弟节点了,我们还需要将其 ...
- win10怎么关闭把管理员权限
按住WIN+R 计算机配置----Windows设置----安全设置----本地策略----安全选项----用户账户控制:以管理员批准模式运行所有管理员,把启用改为禁止然后重启电脑
- nexus配置第三方库文件
进入nexus管理界面 默认用户名密码:admin/admin123 在左侧Views/Repositories中选择Repositories,然后在右侧的面板中选择3rd party,在下方arti ...
- HDU 5667 Sequence(矩阵快速幂)
Problem Description Holion August will eat every thing he has found. Now there are many foods,but he ...
- Ubuntu安装谷歌输入法或者搜狗
1.进入系统先更软件更新器这个在系统计算机中搜索,点击就好了 2.先添加以下源sudo add-apt-repository ppa:fcitx-team/nightly 3.添加源之后需要更新一下系 ...
- Exchange Port
Get-POPSettings-110 Get-IMAPSettings-143 Exchange Network Port References Exchange Server 2000 http: ...
- Spoken English Practice(And I can't walk. Should i just stay home and pout about it?)
绿色:连读: 红色:略读: 蓝色:浊化: 橙色:弱读 下划线_为浊化 口语蜕变(2017/7/12) ...
- Python笔记-进程Process、线程Thread、上锁
1.对于操作系统来说,一个任务就是一个进程(Process).比如打开一个浏览器就是启动一个浏览器进程,打开一个记事本就启动了一个记事本进程. 2.在一个进程内部,要同时干多件事,就需要同时运行多个“ ...
- (转)聊聊Servlet、Struts1、Struts2以及SpringMvc中的线程安全
前言 很多初学者,甚至是工作1-3年的小伙伴们都可能弄不明白?servlet Struts1 Struts2 springmvc 哪些是单例,哪些是多例,哪些是线程安全? 在谈这个话题之前,我们先了解 ...
- Zipline Data Bundles
Data Bundles A data bundle is a collection of pricing data, adjustment data, and an asset database. ...