zoukankan      html  css  js  c++  java
  • 移动端和pc端事件绑定方式以及取消浏览器默认样式和取消冒泡

    ### 两种绑定方式
    (DOM0)1.obj.onclick = fn;

    (DOM2)2.
    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:捕获)

    .*★*. .*★ *.*    ★ ★      * ★ .’ ‘*.    .*★*. .*★ *.*    ★ ★      * ★ .’ ‘*.    . ` . . .*★*. .*★ *.*    ★ ★      * ★ .’ ‘*.    . ` . . ` . .
  • 相关阅读:
    zjnu1725 COCI (类似二维树状数组模拟)
    zjnu1730 PIRAMIDA(字符串,模拟)
    hdu5365Shortest Path (floyd)
    表达式的转换 (模拟题)
    zjnu1709 UZASTOPNI (bitset,树形dp)
    zjnu1707 TOPOVI (map+模拟)
    zjnu1716 NEKAMELEONI (线段树)
    zjnuSAVEZ (字符串hash)
    codeforces 55D. Beautiful numbers (数位dp)
    TP5将入口文件放在Public中,能得到那些安全保障?
  • 原文地址:https://www.cnblogs.com/wushanbao/p/6900848.html
Copyright © 2011-2022 走看看