关于JS绑定事件，基础
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于JS绑定事件，基础相关的知识，希望对你有一定的参考价值。
两种绑定方式
第一种为(DOM0)：obj.onclick = fn;
第二种为(DOM2)：
ie:obj.attachEvent(事件名称，事件函数);
1.没有捕获(非标准的ie 标准的ie底下有 ie6到10)
2.事件名称有on
3.事件函数执行的顺序：标准ie-》正序 非标准ie-》倒序
4.this指向window
标准:obj.addEventListener(事件名称，事件函数，是否捕获);
1.有捕获
2.事件名称没有on
3.事件执行的顺序是正序
4.this触发该事件的对象
document.attachEvent(‘onclick‘, fn2);
document.attachEvent(‘onclick‘, function() {
fn1.call(document);
});
是否捕获 : 默认是false false:冒泡 true：捕获
document.addEventListener(‘click‘, fn1, false);
document.addEventListener(‘click‘, fn2, false);
注意
ie代表了:非标准ie 和 标准ie
标准代表了:标准ie 和 chrome Firefox等....
同步this
function bind(obj, evname, fn) {
if (obj.addEventListener) {//除ie低版本外都可以进入
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent(‘on‘ + evname, function() {
fn.call(obj);
});
}
}
bind(document, ‘click‘, fn1);
两种绑定方式的区别
取消冒泡的手段:event.cancelBubble = true;(不推荐使用)
event.stopPropagation();
第一种:默认冒泡,
第一种:一个元素上只能绑定一个同类事件,如果继续绑定的话,第二个事件函数会覆盖第一个
第二种:
attachEvent
默认冒泡
addEventListener
是否捕获 : 默认是false
第三个参数: false:冒泡
true：捕获
第二种:一个元素上可以绑定多个同类事件,它们都会被执行
事件解绑
DOM0:想解除事件就相当简单了，只需要再注册一次事件，把值设成null
原理就是最后注册的事件要覆盖之前的，最后一次注册事件设置成null，
也就解除了事件绑定。
DOM2:removeEventListener
解除事件语法：btn.removeEventListener("事件名称", "事件回调", "捕获/冒泡");
detachEvent(ie)
总结
onclick形式:冒泡
attachEvent:冒泡
addEventListener:第三个参数(false:冒泡;true:捕获)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width"/>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background: deeppink;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
<script type="text/javascript">
var box = document.getElementById(‘box‘);
//DOM0,在模拟器里 不支持
//ontouchstart手指触摸屏幕那一刻触发
// box.ontouchstart = function(){
// alert(‘ontouchstart‘);
// };
//ontouchmove手指触摸屏幕并滑动，
// box.ontouchmove = function(){
// alert(‘ontouchmove‘);
// };
//ontouchend手指触摸离开屏幕
// box.ontouchend = function(){
// alert(‘ontouchend‘);
// }
//DOM2
box.addEventListener(‘touchstart‘,function(){
console.log(‘touchstart‘);
});
box.addEventListener(‘touchmove‘,function(){
console.log(‘touchmove‘);
});
box.addEventListener(‘touchend‘,function(){
console.log(‘touchend‘);
})
</script>
</html>
以上是关于关于JS绑定事件，基础的主要内容，如果未能解决你的问题，请参考以下文章