编程语言
首页 > 编程语言> > JavaScrip事件

JavaScrip事件

作者：互联网



 


元素天生自带的事件


鼠标事件





键盘事件





表单元素常用的事件





其它常用事件





移动端手指事件



事件绑定


DOM0级事件绑定


[element].onxxx=function(){}


//=>DOM0事件绑定：只允许给当前元素的某个事件行为绑定一个方法，多次绑定，后面绑定的内容会替换前面绑定的，以最后一次绑定的方法为主
    box.onclick = function () {
        console.log(1);
    };
    box.onclick = function () {
        console.log(2);//=>触发点击行为，只输出2
    };




DOM2级事件绑定


添加：[element].addEventListener('xxx',function(){},false)


移除：[element].removeEventListener('xxx',function()


[IE6~8]：[element].attachEvent('onxxx',function(){}) 移除使用的是dettachEvent。


DOM2事件绑定可以给当前元素的某一个事件行为绑定“多个不同的方法”。




DOM0事件绑定和DOM2事件绑定的区别



事件对象


当事件函数触发执行时，浏览器还给函数传递了一个实参信息值 ==>这个值就是事件对象（MouseEvent鼠标事件对象、KeyboardEvent键盘事件对象、Event普通事件对象...）


MouseEvent



KeyboardEvent



IE6~8



box.onclick = function (ev) {
    //=>在IE低版本浏览器中，浏览器执行绑定的方法，并没有把事件对象传递进来，此时ev===undefined，需要基于window.event来获取（由于是全局属性，鼠标每次操作都会把上一次操作的值替换掉）
    if (!ev) {
        //=>低版本中没有的属性，我们手动设置一下：按照自己有的先获取到值，然后赋值给和标准对应的新属性（经过判断处理后，低版本中也有TARGET/PAGE-X/PAGE-Y这些属性了），后期再使用的时候，直接按照高版本的使用即可
        ev = window.event;
        // console.log(ev.srcElement);//=>ev.srcElement是获取事件源（标准中使用的是ev.target）
        ev.target = ev.srcElement;
        // console.log(ev.pageX);//=>低版本浏览器的事件对象中不存在pageX/pageY
        ev.pageX = ev.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
        ev.pageY = ev.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
        ev.which = ev.keyCode;
​
        // preventDefault & stopPropagation 这些在低版本下都没有
        ev.preventDefault = function () {
            ev.returnValue = false;//=>低版本阻止默认行为
        };
        ev.stopPropagation = function () {
            ev.cancelBubble = true;//=>低版本阻止冒泡传播
        };
    }
    //=>直接按照高版本的规则来使用即可
    console.log(ev.target, ev.which);
    ev.preventDefault();
    ev.stopPropagation();
};



 


 


事件的传播机制





不同浏览器对于最外层祖先元素的定义是不一样的


谷歌：window->document->html->body...


IE高：window->html->body...


IE低：html->body...




事件委托


利用事件的冒泡传播机制，如果一个容器的后代元素中，很多元素的点击行为（其它事件行为也是）都要做一些处理，此时我们不需要在像以前一样一个个获取一个个的绑定了，我们只需要给容器的CLICK绑定方法即可，这样不管点击的是哪一个后代元素，都会根据冒泡传播的传递机制，把容器的CLICK行为触发，把对应的方法执行，根据事件源，我们可以知道点击的是谁，从而做不同的事情即可，事件委托这种处理方式比一个个的事件绑定，性能提高50%左右，需要的元素越多，性能提高越大


 


标签：function,触发,鼠标,绑定,JavaScrip,事件,ev	

来源： https://www.cnblogs.com/wangshouren/p/11615822.html