您的位置：首页 > Web前端 > JavaScript

js事件监听 解绑 添加兼容写法

2016-11-20 17:22 309 查看 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>赋诗</button>
<script>
//-----------------------------------事件的概述----------------------
var btn = document.getElementsByTagName("button")[0];

//第一种事件绑定的方法容易被层叠。
//    btn.onclick = function () {
//        console.log("九尺龙泉万卷书，上天生我意何如。");
//    }
//
//    btn.onclick = function () {
//        console.log("不能报国平天下，枉为男儿大丈夫。");
//    }

//addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行
//第二种事件绑定的方法不会出现层叠。（更适合团队开发）
btn.addEventListener("click",fn1);
btn.addEventListener("click",fn2);
function fn1(){
console.log("九尺龙泉万卷书，上天生我意何如。");
}
function fn2(){
console.log("不能报国平天下，枉为男儿大丈夫。");
}

//调用这是事件源，参数1事件名(不带on) ，参数2事件名(执行函数)           参数3事件名(捕获或者冒泡)

//--------------------------事件的监听原理--------------------------
var btn = document.getElementsByTagName("button")[0];

//    btn.addEventListener("click",fn1);
//    btn.addEventListener("click",fn2);
fn("click",fn1,btn);
fn("click",fn2,btn);
fn("click",fn3,btn);

function fn1(){
console.log("九尺龙泉万卷书，上天生我意何如。");
}
function fn2(){
console.log("不能报国平天下，枉为男儿大丈夫。");
}
function fn3(){
console.log("111111。");
}

//原理（了解）（自己封装一个）(click)
function fn(str,fn,ele){
//判断位置要注意：如果进入绑定事件本身，那么该事件已经本绑定了
//所以获取旧的事件必须在新的事件绑定之前
var oldEvent = ele["on"+str];
ele["on"+str] = function () {
//不能直接执行函数，因为我们还不知道以前有没有绑定我同样的事件
//进行判断，如果以前有过绑定事件，那么把以前的执行完毕在执行现在的事件，如果没有就直接执行
//如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
//如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
if(oldEvent){
//因为oldEvent本身他就是函数本身，那么后面加一个();就是执行函数
oldEvent();
fn();
}else{
//没有绑定过事件
fn();
}
}
}

//-------------------------事件添加的兼容写法----------------------------
var btn = document.getElementsByTagName("button")[0];

//火狐谷歌IE9+支持addEventListener
//    btn.addEventListener("click",fn1);
//    btn.addEventListener("click",fn2);

//IE678支持attachEvent
//    btn.attachEvent("onclick",fn1);
//    btn.attachEvent("onclick",fn2);

//兼容写法
EventListen = {
addEvent: function (ele,fn,str) {
//通过判断调用的方式兼容IE678
//判断浏览器是否支持该方法，如果支持那么调用，如果不支持换
4000
其他方法
if(ele.addEventListener){
//直接调用
ele.addEventListener(str,fn);
}else if(ele.attachEvent){
ele.attachEvent("on"+str,fn);
}else{
//在addEventListener和attachEvent都不存在的情况下，用此代码
ele["on"+str] = fn;
}
}
}

EventListen.addEvent(btn,fn1,"click")
EventListen.addEvent(btn,fn2,"click")

function fn1(){
console.log("九尺龙泉万卷书，上天生我意何如。");
}
function fn2(){
console.log("不能报国平天下，枉为男儿大丈夫。");
}

//-------------------------事件的解绑兼容写法----------------------------
var btn = document.getElementsByTagName("button")[0];

EventListen = {
addEvent: function (ele,fn,str) {
//通过判断调用的方式兼容IE678
//判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
if(ele.addEventListener){
//直接调用
ele.addEventListener(str,fn);
}else if(ele.attachEvent){
ele.attachEvent("on"+str,fn);
}else{
//在addEventListener和attachEvent都不存在的情况下，用此代码
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] = null;
}
}
}

//    btn.addEventListener("click",fn);
EventListen.addEvent(btn,fn,"click");

EventListen.removeEvent(btn,fn,"click");

function fn(){
alert(1);
}
//第一种
//    btn.onclick = function () {
//        alert(1);
//    }

//    btn.addEventListener("click",fn);
//    btn.attachEvent("onclick",fn);

//    btn.onclick = null;

//第二种
//    btn.removeEventListener("click",fn);
//    btn.detachEvent("onclick",fn);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航