关于JS绑定事件,基础

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于JS绑定事件,基础相关的知识,希望对你有一定的参考价值。

两种绑定方式

第一种为(DOM0):obj.onclick = fn;   

第二种为(DOM2):
  ie:obj.attachEvent(事件名称,事件函数);
    1.没有捕获(非标准的ie 标准的ie底下有 ie6到10)
    2.事件名称有on
    3.事件函数执行的顺序:标准ie-》正序   非标准ie-》倒序
    4.this指向window
      标准:obj.addEventListener(事件名称,事件函数,是否捕获);
    1.有捕获
    2.事件名称没有on
    3.事件执行的顺序是正序
    4.this触发该事件的对象


    document.attachEvent(‘onclick‘, fn2);
    document.attachEvent(‘onclick‘, function() {
        fn1.call(document);
    });

    是否捕获 : 默认是false    false:冒泡     true:捕获

    document.addEventListener(‘click‘, fn1, false);
    document.addEventListener(‘click‘, fn2, false);

注意
    ie代表了:非标准ie 和 标准ie
    标准代表了:标准ie 和 chrome Firefox等....

同步this

function bind(obj, evname, fn) {
    if (obj.addEventListener) {//除ie低版本外都可以进入
        obj.addEventListener(evname, fn, false);
    } else {
        obj.attachEvent(‘on‘ + evname, function() {
            fn.call(obj);
        });
    }
}

bind(document, ‘click‘, fn1);

两种绑定方式的区别

取消冒泡的手段:event.cancelBubble = true;(不推荐使用)
            event.stopPropagation();

第一种:默认冒泡,
第一种:一个元素上只能绑定一个同类事件,如果继续绑定的话,第二个事件函数会覆盖第一个


第二种: 
      attachEvent
                       默认冒泡
      addEventListener    
                      是否捕获 : 默认是false    
                      第三个参数: false:冒泡
                            true:捕获
第二种:一个元素上可以绑定多个同类事件,它们都会被执行

事件解绑

DOM0:想解除事件就相当简单了,只需要再注册一次事件,把值设成null
        原理就是最后注册的事件要覆盖之前的,最后一次注册事件设置成null,
            也就解除了事件绑定。

DOM2:removeEventListener
        解除事件语法:btn.removeEventListener("事件名称", "事件回调", "捕获/冒泡");
                    detachEvent(ie)

总结

onclick形式:冒泡
attachEvent:冒泡
addEventListener:第三个参数(false:冒泡;true:捕获)

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width"/>
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 200px;
                height: 200px;
                background: deeppink;
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
    <script type="text/javascript">
        var box = document.getElementById(‘box‘);
        
        //DOM0,在模拟器里 不支持
        //ontouchstart手指触摸屏幕那一刻触发
//        box.ontouchstart = function(){
//            alert(‘ontouchstart‘);
//        };
        //ontouchmove手指触摸屏幕并滑动,
//        box.ontouchmove = function(){
//            alert(‘ontouchmove‘);
//        };
        //ontouchend手指触摸离开屏幕
//        box.ontouchend = function(){
//            alert(‘ontouchend‘);
//        }
        
        //DOM2
        box.addEventListener(‘touchstart‘,function(){
            console.log(‘touchstart‘);
        });
        box.addEventListener(‘touchmove‘,function(){
            console.log(‘touchmove‘);
        });
        box.addEventListener(‘touchend‘,function(){
            console.log(‘touchend‘);
        })
        
    </script>
</html>





















































以上是关于关于JS绑定事件,基础的主要内容,如果未能解决你的问题,请参考以下文章

关于怎样用PHP及JS来动态加载html元素及加载的html代码绑定事件失效的解决方法!

JS事件绑定的三种方法

js事件绑定方法

关于js事件执行顺序

JS基础 事件

关于js事件执行顺序小技巧