事件高级一

作者: Monee121 | 来源:发表于2018-04-19 15:59 被阅读0次

事件高级一
事件高级
事件高级
WebAPIs-事件
5.DOM:事件高级（注册事件、事件监听、解绑事件、 DOM事
IE8兼容问题及其解决方法
jQuery事件基础
04JavaScript-事件操作
事件高级（二）
事件机制（高级）

事件高级（一）

image.png

给元素添加事件的问题
事件绑定的意义
当一个元素添加两个以上事件的时候
事件绑定：IE - attachEvent、W3C - addEventListener

<script>
function aaa()
{
    alert('a');
}

function bbb()
{
    alert('b');
}
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    
    /*oBtn.onclick=aaa;
    oBtn.onclick=bbb;*/
    
    //对象.attachEvent(事件名, 函数)
    //对象.addEventListener(事件名, 函数, 是否捕获)
    
    //IE
    /*oBtn.attachEvent('onclick', aaa);
    oBtn.attachEvent('onclick', bbb);*/
    
    //FF
    /*oBtn.addEventListener('click', aaa, false);
    oBtn.addEventListener('click', bbb, false);*/
    
    if(oBtn.attachEvent)
    {
        oBtn.attachEvent('onclick', aaa);
        oBtn.attachEvent('onclick', bbb);
    }
    else
    {
        oBtn.addEventListener('click', aaa, false);
        oBtn.addEventListener('click', bbb, false);
    }
};
</script>

兼容性处理
封装事件绑定函数

function aaa()
{
    alert('a');
}

function bbb()
{
    alert('b');
}

//1.谁
//2.事件
//3.函数

function myAddEvent(obj, sEvent, fn)
{
    if(obj.attachEvent)
    {
        obj.attachEvent('on'+sEvent, fn);
    }
    else
    {
        obj.addEventListener(sEvent, fn, false);
    }
}

window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    
    myAddEvent(oBtn, 'click', aaa);
    myAddEvent(oBtn, 'click', bbb);
};
</script>

IE下事件绑定this指向的问题

<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    
    /*oBtn.onclick=function ()
    {
        alert(this);
    };*/
    
    //IE    事件绑定        this->window
    /*oBtn.attachEvent('onclick', function (){
        alert(this==window);
    });*/
    
    //FF
    oBtn.addEventListener('click', function (){
        alert(this);
    }, false);
};
</script>

解除事件绑定、匿名函数的特性

<script>//解除不掉，函数要成独立的，匿名的解除不掉
window.onload=function ()
{
    
    var oBtn=document.getElementById('btn1');
    
    oBtn.attachEvent('onclick', function (){
        alert('a');
    });
    oBtn.detachEvent('onclick', function (){
        alert('a');
    });
};
</script>
<title>简写，不是一个东西</title>
<script>
var a=function ()
{
    alert('a');
};

var b=function ()
{
    alert('a');
};

alert(a==b);
</script>

拖拽原理回顾

<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            
            oDiv.style.left=oEvent.clientX-disX+'px';
            oDiv.style.top=oEvent.clientY-disY+'px';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
};
</script>
</head>

<body>
<div id="div1">
</div>
</body>

封装可重用的拖拽实例

<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:100px; height:100px; background:yellow; position:absolute;}
#div3 {width:100px; height:100px; background:green; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    drag('div1');
    drag('div2');
    drag('div3');
};

function drag(id)
{
    var oDiv=document.getElementById(id);
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            
            oDiv.style.left=oEvent.clientX-disX+'px';
            oDiv.style.top=oEvent.clientY-disY+'px';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
}
</script>
</head>

<body>
<div id="div1">
</div>

<div id="div2">
</div>

<div id="div3">
</div>
</body>