javascript绑定事件：
经常用jQuery去写，时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了，必须翻出来再次总结，今天再次把js原生态事件的处理做个总结。
从最初开始，谁刚接触javascript的时候，老师都会这样教导我们怎么触发事件，在页面某个DOM节点上面添加所要触发的事件，比如：onclick,onmousedown,onmouseup，onfocus,onchange等等...看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function init(val){
alert(val + '事件触发');
}
</script>
</head>
<body>
<h1 id="klm" onmousedown="init('onmousedown')">事件</h1>
</body>
</html>
直接在DOM节点内添加事件，这种方式初学者适用，对于我们企业前端开发最好不要用这样的方式，虽然这样看上去很直观，但把函数暴露在页面是很危险的事情。
那我们接下来将这个方式移到js中去操作，拿onclick来说，用纯js方式 首先要获取DOM对象，然后去触发onclick事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var _this = document.getElementById('klm');
_this.onclick = function(){
alert( '点击事件绑定');
}
};
</script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>
这样的方式也很简单，我们也可以用这种方式绑定多种事件处理
_this.onmouseup = function(){
alert( '鼠标事件绑定');
}
_this.onclick = function(){
alert( '点击事件绑定');
}
如果用alert()方式的话，在任何浏览器只能触发第一个函数提示，其后面的则不执行，如果用 console.log()控制台打印则在浏览器（除IE浏览器）下都会执行出结果。
attachEvent函数：
为此，我再做其他方式为了兼容浏览器，在js中提供了绑定方式，针对IE这样的浏览器提供的代码是这样写的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var _this = document.getElementById('klm');
_this.attachEvent('onmousedown',function(){
console.log('鼠标按下事件')
});
_this.attachEvent('onmouseup',function(){
console.log('鼠标抬起事件')
});
};
</script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>
注:(在IE浏览器所写的事件名称要用"on"打头的，如onclick,onmouseup,等)
运行结果：
addEventListener函数：
W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。
注：这个函数也是被黑客利用的工具，利用它来实现内联xss拦截
这个函数除了IE内核系列浏览器之外，基本都执行，而且传入的事件名称不是以“on”开头，先直观的看下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var _this = document.getElementById('klm');
_this.addEventListener('mousedown',function(){
console.log('鼠标按下事件')
});
_this.addEventListener('mouseup',function(){
console.log('鼠标抬起事件')
});
};
</script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>
火狐，搜狗，谷歌执行结果：
但是光这样写没法满足兼容性，需要将2个函数整合起来，这里就需要做一个判断，然后判断结果成立，则执行逻辑里面的方法，在写这个逻辑有很多种，我列举2个思路:1,可以通过判断浏览器方式进入对应的函数方式。2，通过直接判断浏览器是否含有attachEvent或addEventListener函数方式。我就用第2个思路进行：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var _this = document.getElementById('klm');
if(_this.addEventListener){
_this.addEventListener('mousedown',function(){
console.log('鼠标按下事件')
});
_this.addEventListener('mouseup',function(){
console.log('鼠标抬起事件')
});
}else{
_this.attachEvent('onmousedown',function(){
console.log('鼠标按下事件')
});
_this.attachEvent('onmouseup',function(){
console.log('鼠标抬起事件')
});
}
};
</script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>
火狐和IE浏览器运行结果：
都能顺利的执行代码了。。。（上面的代码还可以精简，在这里我只是样例）
在这里提一个概念：事件捕获和事件冒泡
事件捕获：
事件从最上一级HTML标签开始，一级一级向下查找，直到捕获到事件目标为止。
事件冒泡：
事件从事件目标开始，往上冒泡直到页面的最上一级标签。
在IE浏览器中只支持事件冒泡，不支持事件捕获。而addEventListener函数是第三个参数的设置是判断你在浏览器(去除IE浏览器)下是用事件捕获或者事件冒泡方式执行,"true"是捕获，false是冒泡。
阻止冒泡：
IE方式是： window.event.cancelBubble = true;
火狐浏览器方式：e.stopPropagation()
上面说了绑定事件，js还提供了其他方式,接下来说下删除事件绑定
detachEvent:
IE浏览器提供了这个函数去删除已绑定事件的操作。
detachEvent(funType,funname):2个参数值funType指的触发的事件类型，如onclick,onmouseup... funname则是所要去掉的函数，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var _this = document.getElementById('klm');
//添加一个onmouseup事件
_this.attachEvent('onmouseup',init);
function init(){
console.log('鼠标抬起事件')
//删除onmouseup事件
_this.detachEvent('onmouseup',init);
}
};
</script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>
注：我先用attachEvent绑定onmouseup事件，当触发完这个事件的时候并将onmouseup事件删除。这样<h1>对象就不会再触发事件效果了。
attachEvent非W3C标准，而是IE自己的，那些遵循W3C标准的浏览器该用什么呢？
removeEventListener:
拿火狐为例，使用此函数才能删除已绑定的事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var _this = document.getElementById('klm');
//添加一个onmouseup事件
_this.addEventListener('mouseup',init,false);
function init(){
console.log('鼠标抬起事件');
//删除onmouseup事件
_this.removeEventListener('mouseup',init,false);
}
};
</script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>
如果 _this.removeEventListener('mouseup',init,true);这里最后一个参数和添加事件设置的不一致，则删除事件无效。
通过js原生态的语法的了解，对以后底层封装会有很大的帮助。
js事件绑定细节说明的更多相关文章
-
原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
-
js事件绑定的几种方式与on()、bind()的区别
版权声明:本文为博主原创文章,未经博主允许不得转载 一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数, ...
-
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...
-
js事件绑定及深入
学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...
-
js 事件绑定
事件绑定的方式 1. DOM 元素行内绑定 <div onclick="alert(1)"></div> 2. js on+eventType do ...
-
js事件绑定函数
js中事件绑定方法大致有三种: 1.在DOM元素中绑定 <input onclick="alert('在DOM中绑定')" type="button" v ...
-
js事件绑定的几种方式
在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTM ...
-
js事件绑定/监听
事件绑定/监听的方法 1.直接绑定 顾名思义,直接在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.on ...
-
原生js事件绑定
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresiz ...
随机推荐
-
【BZOJ 1016】【JSOI 2008】最小生成树计数
http://www.lydsy.com/JudgeOnline/problem.php?id=1016 统计每一个边权在最小生成树中使用的次数,这个次数在任何一个最小生成树中都是固定的(归纳证明). ...
-
js cookie存储方法
/*! * jQuery Cookie Plugin v1.4.0 * https://github.com/carhartl/jquery-cookie * * Copyright 2013 Kla ...
-
WEB安全--Google Hacking
通常我们用Google查询一些我们测试站点的一些信息,Google提供了一系列的搜索语句,下面我为大家详细的介绍一下! 常用语法: site:指定域名 intext:正文中存在关键字的网页 intit ...
-
php实现网页标签补全方法(转)
导读:PHP在生成静态文件的时候,有时候会因为一些混编问题让HTML标签不完整或混乱而导致页面混乱.作者分享下面这段小代码可以非常方便解决问题. 如果你的网页内容的html标签显示不全,有些表格标签不 ...
-
Linux下c基于openssl生成MD5的函数
Linux下openssl提供了一系列哈希及加密的函数,如果调用openssl提供的MD5函数生成任意字符串的MD5呢?下面提供了一段代码实现Linux下c字符串生成md5的函数. 具体代码: 1 2 ...
-
Java正則表達式语法
Java正則表達式语法 字符 说明 \ 将下一字符标记为特殊字符.文本.反向引用或八进制转义符.比如,"n"匹配字符"n"."\n"匹配换行 ...
-
函数iconv_substr和mb_substr
二个函数iconv_substr和mb_substr,均可以在当前字符下进行字符串截取,以达到中文字符截取的不乱码. 应该如何选择呢? 1.iconv库在某些操作系统上可能运行不正确,需要安装GNU扩 ...
-
小白月赛13 B小A的回文串 （马拉车算法求最长回文子串）
链接:https://ac.nowcoder.com/acm/contest/549/B来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 262144K,其他语言52428 ...
-
Redies安装，修配置，设置密码,
Redies下载路径:https://github.com/MicrosoftArchive/redis/releases 我下的是Redis-x64-3.2.100.msi 下载后安装,一步一步操作 ...
-
2019-2-14SQLserver中function函数和存储过程、触发器、CURSOR
Sqlserver 自定义函数 Function使用介绍 前言: 在SQL server中不仅可以可以使用系统自带的函数(时间函数.聚合函数.字符串函数等等),还可以根据需要自定义函数 ...