javascript中DOM的事件分析（附代码）

事件是什么？事件又有什么用？本篇文章将给到大家分享关于javascript中dom的事件分析，给大家介绍了关于事件的概念以及事件的用法。

事件

1、事件是什么

让JS知道程序用户行为，比如用户点击HTML页面中的某个按钮和用户输入用户名与密码等操作

         var button = document.getElementById('btn');//        获取按钮元素        button.onclick = function () {//        事件绑定            console.log('你已点了我');        }    

登录后复制

2.注册事件
JS函数与指定事件相关联，被绑定函数成为事件的句柄
事件被激发时，会绑定函数会被调用

HTML元素的事件属性

立即学习“Java免费学习笔记（深入）”；

表示实注册事件功能
该方式并没有与HTML结构与行为有效的分离

按钮    function mylove() {        console.log('你已点了我');    }

登录后复制

DOM对象的事件属性

将Document对象定位在THML页面元素
并返回DOM对象体属性，通过它实现各种注册事件功能

按钮    var btn = document.getElementById('btn');    btn.onclick = mylove;    function mylove() {        console.log('你已点了我');    }

登录后复制

事件监听器

以addEvantLisener()方法，调用该方法表示元素增加事件监听器

body>按钮    var btn = document.getElementById('btn');    btn.attachEvent('onclick',function () {        console.log('XXX');    })    function bind(element,eventName, functionName) {        if (element.addEventListener) {            element.addEventListener()        }    }

登录后复制

事件监听器中的this

使用addEventListener()方法为页面注册事件时候，this是指注册事件元素
使用attachEent()方法为页面注册事件时候，this是指Window对象，，不是注册事件

    var qyc =document.getElementById('qyc');    /*qyc.addEventListener('click',function () {        console.log(this);//this指当前绑定事件的元素    });*/    /*qyc.attachEvent('onclick',function () {        console.log(this);//this指当前环境的全局对象（Window对象）    });*/    bind(qyc,'click',function () {        console.log(this);//在不同的浏览器中，this会有不同的表示    });    function bind(element, eventName, functionName) {        if (element.addEventListener) {        } else {            element.attachEvent('on' + eventName, function () {                functionName.call(element)            });        }    }//此为IE8之前的版本兼容的解决方案

登录后复制

3、移除注册事件

removeEventListener()方法，调用此方法表示元素移除事件听器

按钮    var qyc = document.getElementById('qyc');    function mylove() {        console.log('XXX');    }    qyc.addEventListener('click',mylove);    qyc.addEventListener('click',function () {        console.log('YYY');    });    qyc.removeEventListener('click',mylove);    function unbind(element,eventName,functionName) {        if (element.removeEventListener) {            element.removeEventListener(eventName, functionName);        }else {            element.detachEvent('on' + eventName, functionName);        }    }

登录后复制

4、Event事件对象

表示移除注册事件在IE8之前版本的
浏览器不支持removeEventListener()方法

按钮    var qyc = document.getElementById('qyc');    qyc.addEventListener('click',function (event) {        console.log(event);    });    qyc.attachEvent('onclick',function () {        console.log(window.event);    });    function bind(element,eventName, functipnName) {        if (element.addEventListener){            element.addEventListener(eventName,functipnName)        } else {          element.attachEvent('on' + eventName, function(){             functipnName.call(element);          });        }    }

登录后复制

5、获取目标

Event事件对象提供target属性，获取触发当前事件的HTML元素
Event事件对象提供currentTarget属性，获取注册当前事件的HTML元素

        ul {           background-color: red;        }        #wl {           background-color: blue;        }        a {           background-color: yellow;        }    
    
单机游戏
    
网络游戏
    
手机游戏
    var yx = document.getElementById('yx');    yx.addEventListener('click',function (event) {        console.log(event.target);//        target属性-获取绑定当前事件目标元素        console.log(event.currentTarget);//        currentTarget属性-获取绑定当前事件目标元素        console.log(this);    });    yx.attachEvent('onclick',function (event) {//    IE8以下浏览器提供srcElement属性为target目标元素        var e = event || window.event;        console.log(e.srcElement);    });

登录后复制

6、阻止默认行为

不使用默认，而是

链接    var aElement = document.getElementsByName('a');    /*aElement.addEventListener('click',function(event){        event.preventDefault();// 阻止默认行为    });*/        aElement.onclick = function (event) {        event.preventDefault();        return false;    }    aElement.attachEvent('onclick',function (event) {        var e = event || window.event;        e.returnValue = false;    })

登录后复制

7、获取鼠标

pageX和pageY表示相对于页面中
clientX和clientY表示可视区域
screenX和screenY表示在当前屏幕的

    var html = document.documentElement;    html.addEventListener('click',function(event){        console.log(event.pageX, event.pageY);        // 鼠标坐标值相对于当前HTML页面        console.log(event.clientX, event.clientY);        // 鼠标坐标值相对于当前可视区域        console.log(event.screenX, event.screenY);        // 鼠标坐标值相对于当前屏幕的        // 鼠标坐标值只能获取，不能设置    });

登录后复制

8、事件流

        #q1 {            width: 200px;            height: 200px;            background-color: red;            padding: 50px;        }        #q2 {            width: 100px;            height: 100px;            background-color: yellow;            padding: 50px;        }        #q3 {            width: 100px;            height: 100px;            background-color: blue;        }    
    
        
    
    var q1 = document.getElementById('q1');    q1.addEventListener('click',function(){        console.log('这是d1... ...');    }, false);    var q2 = document.getElementById('q2');    q2.addEventListener('click',function(){        console.log('这是d2... ...');    }, false);    var q3 = document.getElementById('q3');    q3.addEventListener('click',function(event){        console.log('这是q3... ...');        event.stopPropagation();    }, false);

登录后复制

9、事件委托

大量的HTML元素注册相同事件，并事件句柄逻辑安全相同，会造成页面速度下降，不果事件流允许这些HTML元素同父级元素注册事件

    按钮    按钮    按钮
    var qyc1 = document.getElementById('qyc1');    qyc1.addEventListener('click',function(){        console.log('这是个按钮');    });    var qyc2 = document.getElementById('qyc2');    qyc2.addEventListener('click',function(){        console.log('这是个按钮');    });    var qyc3 = document.getElementById('qyc3');    qyc3.addEventListener('click',function(){        console.log('这是个按钮');    });    var qh = document.getElementById('qh');//    不把事件绑定给指定元素，绑定给共同父级和祖先元素    qh.addEventListener('click',function (event) {        var target = event.target;//触发事件目标元素        if(targe.nodeName === 'BUTTON') {           console.log('这是个按钮');        }    })

登录后复制

相关推荐：

JS的DOM事件模型分析

理解javascript中DOM事件_javascript技巧

以上就是javascript中DOM的事件分析（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！