js事件学习心得

事件处理程序

var EventUtil = {
    addFunction:function(element,type,functionName){
        if(element.addEventListener){
            element.addEventListener(type,functionName,false);//ie9之前不支持
        }else if(element.attachEvent){
            element.attachEvent("on"+type,functionName);}//支持ie
        else{
                element["on"+type] = functionName;//旧式浏览器一般用不到,每个事件只支持一个事件处理程序
            }
    },
    removeFunction:function(element,type,functionName){
        if(element.removeEventListener){
            element.removeEventListener(type,functionName,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,functionName);}
        else{
            element["on"+type] = null;
        }
    }
};
function getBtn(){
    alert("hello");
}
var btn = document.getElementById("btn1");
EventUtil.addFunction(btn,"click",getBtn);

*this有差别: *

addEventListener事件处理程序在元素的作用域中运行,this引用该当前元素;
attachEvent在全局环境中运行,this等于window。

跨浏览器的事件对象

var EventUtil = {
    addFunction:function(element,type,functionName){
        if(element.addEventListener){
            element.addEventListener(type,functionName,false);//ie9之前不支持
        }else if(element.attachEvent){
            element.attachEvent("on"+type,functionName);}//支持ie
        else{
                element["on"+type] = functionName;//旧式浏览器一般用不到
            }
    },
    removeFunction:function(element,type,functionName){
        if(element.removeEventListener){
            element.removeEventListener(type,functionName,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,functionName);}
        else{
            element["on"+type] = null;
        }
    },
    getEvent:function(event){
        return event ? event : window.event;
    },
    getTarget:function(event){
        return event.target || event.srcElement;
    },
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    },
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }
};
function getBtn(){
    alert("hello");
}
var btn = document.getElementById("btn1");
btn.onclick = function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    console.log(target);
    alert(target);
};

事件冒泡及应用

一、什么是事件冒泡

事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。

二、事件冒泡有什么作用

(1)事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。
(2)让不同的对象同时捕获同一事件,并调用自己的专属处理程序做自己的事情,就像老板一下命令,各自员工做自己岗位上的工作去了。

注意:不是所有的事件都能冒泡。以下事件不冒泡:blur、focus、load、unload。

三、阻止事件冒泡

【不想激活的事件被激活例子】

<div id="div-outside" class="outside">
  <div id="div-inside" class="inside">内层的div</div>
</div>

var divOutside = document.getElementById("div-outside");
var divInside = document.getElementById("div-inside");
divOutside.addEventListener("click",function(){
    alert("外层的div被点击了");
},false);
divInside.addEventListener("click",function(event){
    alert("里面的div被点击了");
},false);

在上面函数中添加一下代码,可以阻止事件冒泡

divInside.addEventListener("click",function(event){
    event = event ||window.event;
    event.stopPropagation();
    alert("里面的div被点击了");
},false);

function stopPropagation(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }
    else{
        event.cancelBubble = true;
    }
};//阻止事件冒泡后,里层div只弹一次对话框了

事件委托

事件处理程序过多的解决方法——事件委托,即利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。例如“click”事件会一直冒泡到document层次,我们就可以为整个页面指定一个click事件,而不必给每个可单击元素添加事件处理程序。

<ul id="mymenu">
  <li id="menu1">11111111111</li>
  <li id="menu2">22222222222</li>
  <li id="menu3">33333333333</li>
</ul>


var list = document.getElementById("mymenu");
EventUtil.addFunction(list,"click",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    switch(target.id){
        case "menu1":
            alert("列表1");
            break;
        case "menu2":
            alert("列表2");
            break;
        case "menu3":
            alert("列表3");
            break;
    }
});

表单操作

让表单第一个输入框获得焦点

window.addEventListener("load",function(){
    document.forms[0].elements[2].focus();
    document.forms[0].elements[1].disabled=true;//禁用当前字段
},false);

【避免重复递交表格–监听submit事件】

var form1 = document.getElementById("form1");
form1.addEventListener("submit",function(event){
    event = event ||window.event;
    var target = event.target || event.srcElement;
var btn = target.elements["submit-btn"];
    btn.disabled = true;
    console.log(btn);
},false);
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值