您的位置:时时app平台注册网站 > web前端 > event.stopPropagation与event.preventDefault的区别

event.stopPropagation与event.preventDefault的区别

2019-11-14 19:20

  阻止与事件涉及的私下认可动作。

犹如下代码,供给当点击每叁个成分li时间调控制台突显该因素的文书内容。不思考拾贰分

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
    var ct = document.querySelector('.ct');
    ct.addEventListener('click', function(e){
        console.log(e.target.innerText);
    });
</script>

4.1、键盘事件

顾客按下键盘上的字符键时,触发事件顺序为keydown->keypress->keyup;顾客按一个字符键不放时,可重新触发keydown和keypress事件。它们的风浪目的都辅助keyCode属性。

发出keypress事件代表按下的键会影响到显示器汉语本的展现。能够插入和删除字符的键都会触发keypress事件。keypress的event匡助字符编码charCode属性,可尚未觉察怎么应用地点。

赢得字符编码后,就能够用String.fromCharCode()将其调换来实际的字符。

键盘事件也支持改进键,键盘事件目的里面也许有shiftKey、ctrlKey、altKey、和metaKey。IE不补助metaKey。

  • 快捷键

     document.onkeydown = function(e) {
          e = e || window.event;
          varkeycode = e.which ? e.which: e.keyCode;
          if (keycode == 13 || keycode == 108) { //如果按下ENTER键
              //在这里设置你想绑定的事件
          }
      }
    

      

  • 飞快键与校正键

      // 键盘事件和修改键组合应用
      EventUtil.addHandler(document, 'keydown',
      function(e) {
          if (e.ctrlKey&&e.keyCode == 121) {
              console.log('Ctrl   F10');
          }
      }); 
      // 取消事件的默认行为
      EventUtil.addHandler(document, 'keydown',
      function(e) {
          if (e.keyCode == 122) {
              EventUtil.preventDefault(e);
          }
      });
    

      

  • 遮盖事件

    document.onkeydown = function (event) {
          event = event || window.event;
          var key = event.which || event.keyCode;
          ////屏蔽 Alt  方向键 → alert("不准你使用ALT 方向键前进或后退网页!")
          if ((event.altKey) && ((key == 37) || (key == 39))) { 
              event.returnValue = false;
          }
          if ((key == 8) || (key == 116)) { //屏蔽 F5 刷新键
              event.keyCode = 0;
              event.returnValue = false;
          }
      }
    

      

JS决断顾客按下的按钮,依照按下的按钮然后实行区别的操作:

document.body.onkeydown = window.onkeydown = function(e) {
    var keyCode;
    if (!e) e = window.event;
    if (document.all) {
        keyCode = e.keyCode;
    } else {
        keyCode = e.which;
    }
    if (keyCode == 37) {
        window.location.href = "http://www.phpernote.com";
    }
    if (keyCode == 39 || keyCode == 13) {
        window.location.href = "http://www.phpernote.com";
    }
}

  

附keyCode参照表 主键盘上可输入值的按键

图片 1

多功能键盘上的键的键码值 功能键键码值

图片 2

支配键键码值

图片 3

2、event.preventDefault

attachEvent与addEventListener的区别?

  • 参数个数不等同,那些最直观,add伊芙ntListener有八个参数,attach伊芙nt只有七个,attachEvent增添的事件管理程序只好发出在冒泡阶段,addEventListener第八个参数能够决定增添的事件管理程序是在破获阶段大概冒泡阶段管理(我们经常为了浏览器包容性都安装为冒泡阶段卡塔尔国
  • 第一个参数意义不相同,addEventListener第叁个参数是事件类型(比如click,load卡塔 尔(英语:State of Qatar),而attach伊芙nt第三个参数指明的是事件处理函数名称(onclick,onload卡塔尔
  • 事件管理程序的功效域不平等,addEventListener的功用域是因素本人,this是指的触发成分,attach伊芙nt事件管理程序会在全局变量内运营,this是window,所以刚刚例子才会重临undefined,而不是因素id
  • 为多少个平地风波增多七个事件管理程序时,实行顺序区别,addEventListener增多会遵照增加顺序实践,而attach伊夫nt增加多少个事件管理程序时顺序无规律(加多的秘诀少的时候大概是按增加顺序的反顺序奉行的,可是增添的多了就无规律了),所以增添两个的时候,不依据实践顺序的幸而,假诺正视于函数试行各类,最棒温馨管理,不要期待浏览器

近年来翻新:2016年0六月02日09:54:44

  结束事件的扩散,阻止它被分配到此外Dom节点。然而不能拦截同少年老成Dom节点上的其它交事务件句柄被调用。

何以阻止事件冒泡? 怎样堵住默许事件?

  • DOM

    • 堵住冒泡e.stopPropagation();
    • 阻拦暗许事件event.preventDefault()
  • IE

    • 阻止冒泡e.cancelBubble = true;
    • 堵住默许事件event.returnValue = false;

3、鼠标与滚轮事件

1、event.stopPropagation

讲解IE事件冒泡和DOM2事件传播机制?

  • ie事件冒泡:是指事件从事件指标节点逐层步的往上层节点传播,ie只扶持那豆蔻年华种传播机制
  • DOM2事件传播机制:事件从顶层节点一级顶级往下层传播,接着达到目的节点,那有的称作事件捕获阶段。到达事件后称为处于指标阶段。然后事件又从指标节点逐层往上层节点传播,那有个别誉为事件冒泡,那个全部的风浪流便是dom2岁月的传播机制了。

2、IE中事件指标

在动用Dom0级、Dom2级方法加多事件管理程序时,event对象作为window对象的壹天质量存在,假如利用attach伊芙nt情状下,event对象还足以充任参数被盛传事件管理程序函数里。这里的event的srcElement属性指向的风云的实际目的,即后生可畏律Dom中事件指标的target。

下边是相称管理浏览器的事件指标

getEvent: function (event) {
    return event ? event : window.event;
},
getTarget: function (event) {
    return event.target || event.srcElement;
},
preventDefault: function (event) {
    if (event.preventDefault)
        event.preventDefault();
    else
        event.returnValue = false;
},
stopPropagation: function (event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
},

  

jQuery中事件中,统一了event.preventDefault、event.stopPropagation为打消事件暗中认可行为和冒泡,统一了this为当下目的,规定return false废除事件私下认可行为和冒泡。

补全代码,须求:

  • 当点击开关初步增加时在<li>这里是</li>要素前增添多个新因素,内容为顾客输入的非空字符串;当点击结尾增加时在终极一个li 成分后增加客户输入的非空字符串.
  • 当点击每三个成分li时调整台体现该因素的公文内容。
<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//你的代码
    var liNodes = document.querySelectorAll('li');
    var addStartNode = document.querySelector('#btn-add-start');
    var addEndNode = document.querySelector('#btn-add-end');
    var addIpt = document.querySelector('.ipt-add-content');
    var container = document.querySelector('.ct');
    container.addEventListener('click',function(e){
        if(e.target.tagName.toLowerCase() === 'li'){
        console.log(e.target.innerText);
        };
    });
    addStartNode.addEventListener('click',function(){
        if(addIpt.value) {
        var node = document.createElement('li');
        node.innerText = addIpt.value;
        container.insertBefore(node,container.firstChild);
        };
    });
    addEndNode.addEventListener('click',function(){
        if(addIpt.value) {
        var node = document.createElement('li');
        node.innerText = addIpt.value;
        container.appendChild(node);
        };
    });
</script>

1、DOM中的事件模拟

  • 仿照鼠标事件

      varbtn = document.getElementById("myBtn");
      var event = document.createEvent("MouseEvents");
      // type bubbles cancelable view(这个参数几乎总是要设置为document.defaultView) detail screenXscreenYclientXclientYctrlKey
      // altKeyshiftKeymetaKey button relatedTarget
      event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
      btn.dispatchEvent(event);
    

      

  • 宪章键盘事件

      var textbox = document.getElementById("myTextbox"),
          event;
    
      //以DOM3级方式创建
      if (document.implementation.hasFeature("KeyboardEvents", "3.0")) {
          event = document.createEvent("KeyBoarEvent");
          // type bubbles canclable view key location(0表示默认主键盘,1表示左,2表示右,3表示数字键盘,4表示移动设备,5表示手柄)
          // modifiers(空格相隔的修改键列表) repeat
      event.initKeyboardEvent("keydown", true, true, document.defaultView, "a", 0, "Shift", 0);
      }
      textbox.dispatchEvent(event);
    

      

    2、IE中的事件模拟

要翻开详细,可观望《JavaScript高端程序设计》

补全代码,须要:当鼠标放置在li成分上,会在img-preview里展示当前li成分的data-img对应的图形。

<ul class="ct">
    <li data-img="1.png">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
var ct = document.querySelector('.ct'),
    li = ct.querySelectorAll('li'),
    imgPreview = document.querySelector('.img-preview');

for(var i=0; i<li.length; i  ){
    li[i].addEventListener('mouseenter', function(){
       var dataImg = this.getAttribute('data-img');
       imgPreview.innerHTML = '![]('   dataImg   ')'
    });
};
</script>

4、IE事件管理程序

attachEventdetachEvent,此办法选取四个参数,事件管理程序名称和事件管理程序函数,事件都被增添到冒泡阶段;attachEvent方法内,this = window,相比较Dom方法以拉长事变相反顺序实行。

跨浏览器的事件管理程序

addHandler: function (element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent("on"   type, handler);
    } else {
        element["on"   type] = handler;
    }
},
removeHandler: function (element, type, handler) {
    if (element.removeEventListener) {
        element.removeEventListener(type, handler);
    } else if (element.detachEvent) {
        element.detachEvent("on"   type, handler);
    } else {
        element["on"   type] = null;
    }
},

二、事件对象

DOM0 事件和DOM2级在事件监听使用形式上有啥界别?

Dom0级事件管理程序是将贰个函数赋值给二个事件管理程序属性,而通过将事件管理程序设置为null删除绑定在要素上的事件管理程序。这种艺术不能给叁个风云加多八个事件管理程序,前边的程序会覆盖前边的程序。

// 添加事件处理程序
var btn=document.querySelector("#btn");
btn.onclick=function () {
    alert(this.id);
}
// 删除事件处理程序
btn.onclick=null;

而Dom2级定义了addEventListener()removeEventListener()用于拍卖钦赐和删除事件处理程序。全体Dom节点都满含这多少个艺术,而且它们都担当3个参数,要管理的事件名、作为事件管理程序的函数和贰个布尔值。最终那些布尔值参数借使是true,表示在抓获阶段调用事件管理程序;若是是false,表示在冒泡阶段调用事件管理程序。

var btn=document.querySelector("#btn");
var handler=function(){
    alert(this.id);
}
// 指定事件处理程序
btn.addEventListener("click",handler,false);
// 删除事件处理程序
btn.removeEventListener("click",handler,false);

而是经过removeEventListener()函数来移除事件管理程序时,移除时的参数必需与增进管理程序时利用的参数相仿,那也表示通过addEventListener()加多的无名函数将不能够移除。如:

var btn=document.querySelector("#btn");
// 指定事件处理程序
btn.addEventListener("click",function(){
    alert(this.id);
},false);
// 删除事件处理程序,不会生效
btn.removeEventListener("click",function(){
    alert(this.id);
},false);

两侧分别:

  • 动用Dom2级方法加多事件管理程序的机要收益是足以增进五个事件管理程序,而Dom0级为叁个事件增加多少个事件处理程序时,前面的程序会覆盖前边的。

1、Dom中事件目的

不管钦命的何种事件管理程序(Dom0级只怕Dom2级卡塔尔国都会流传event对象,在事件管理程序内部,对象this始终等于绑定事件要素的currentTarget值,target指向事件实际指标。

事件管理程序中去除开关也能阻碍事件冒泡。指标成分在文书档案中是事件冒泡的前提。

preventDefault方式阻碍事件的私下认可行为。

stopPropagation主意用于立时停下事件在Dom档次中的传播。

除非事件管理程序实行时期,event对象才会设有;大器晚成旦事件处理程序试行完结,event对象就能够被消逝。

1、UI事件

3、DOM2级事件管理程序

addEventListenerremoveEventListener收受四个参数,最终三个参数是二个布尔值,false表示在冒泡阶段调用事件管理程序,true是在破获阶段调用。通过add伊芙ntListener增加的无名函数将无法移除。

2、移除事件管理程序 

当页面七月素被移除或调换时,若成分绑定的风云仍没被移除,在IE中不会做出适当管理,这时要先手工业移除事件,不然会存在内部存款和储蓄器走漏。

5、onerror

Js容错代码

window.onerror =  function(e){
    return true;
}

  

五、内存与性能

首发链接: 

3、DOMContentLoaded

帮衬的浏览器:IE9 、FireFox、Chrome、Safari 3.1 和 Opera 9 (Firefox 3 ,Opera 9 ,Safari 3 ,Chrome 2 卡塔尔

多变完全的DOM树之后触发,能够将事件绑定至document或window,最后会冒泡到window,但它的骨子里指标是document,那几个事件会在load从前接触,

依傍包容性的addDOMLoad伊芙nt

1、contextmenu

支撑的浏览器IE 、FireFox、 Safari、 Chrome 和 Opera 11

屏蔽右键菜单contentmenu,细微差异见

document.getElementById("test").oncontextmenu = function (event) {
    //-- do something here
    // alert("ContextMenu Popup");
    //-- prevent the default behavior
    if (document.all)
        window.event.returnValue = false; // for IE
    else
        event.preventDefault();
};

  

1.1、load

当页面完全加载后(全体图像、JavaScript文件、CSS文件等外界财富卡塔 尔(阿拉伯语:قطر‎就能够触发window下边的load事件。 对于网页load,有二种钦命事件的点子

  • 第一种

      window.addEventListener("load", function (event) {
      });
    

      

  • 第二种

    /**
       * 图像预加载
       */
      varimgObj = new Image();
      EventUtil.addHandler(imgObj, 'load', function (event) {
          console.log('Image loaded');
      });
      imgObj.src = 'http://imgsrc.baidu.com/forum/pic/item/3b26ab18972bd40711fb6a887b899e510fb3098c.jpg';
    

      

    script元素,设置了src属性并添加到文档后,才会开始加载。
    

1.4、scroll

在window对象上绑定;与resize相像,scroll成分会在文档滚动时期重复被触发,所以尽可能保证代码轻巧。

2、主旨事件

  • blur 在要素失去大旨时接触,不冒泡

  • focus 在要素获得主题时接触,不冒泡

3.6、鼠标滚轮事件

mousewheel事件管理程序钦点给页面中的任何因素或document对象,最终会冒泡到document(IE8)或window(IE9、Opera、Chrome、及Safari中卡塔尔国,即能够管理鼠标滚轮的互相操作。当向前滚动鼠标时,wheelDelta是120的倍数,向后时,是-120的翻番。 Opera9.5以前版本中,wheelDelta的正负数是倒行逆施的。

Firefox援救叁个名叫DOMMouseScroll的切近事件,滚轮的音信保存在detail里,向前滚动时,属性值是-3的翻番,能够将该事件增加到大肆成分,该事件会冒泡到window对象。

getWheelDelta : function (event) {
    if (event.wheelDelta) {
        return (browser.name == "opera" &&browser.version< 9.5) ?
        -event.wheelDelta : event.wheelDelta;
    } else {
        return -event.detail * 40;
    }
},  

// 浏览器绑定滚轮事件
EventUtil.addHandler(document, 'mousewheel', wheelFns);
EventUtil.addHandler(document, 'DOMMouseScroll', wheelFns);

  

4、键盘的DOM0级事件、文本事件

1、HTML事件处理程序

假诺当前绑定事件的成分是表单的二个输入成分;则this隐性指代可叙述如下

function(){
    with(document){
        with(this.form){
            with(this){
                // 元素属性值
            }
        }
    }
}

2、DOM0级事件处理程序

事件管理程序是在要素的成效域中运维的,也就this引用当前成分。

后生可畏、事件管理程序

3.4、鼠标按钮

唯有在主鼠标按键被单击(或回车键被按下卡塔 尔(英语:State of Qatar)时才会触发click事件,检查评定按键的消息也就没须求了。对于mousedownmouseup事件来讲,其event对象存在个button质量,表示按下或自由时的按钮。注意:Opera独有在按主鼠标键时才会触发mousedown或mouseup。

// 鼠标事件的按钮属性
getButton : function (event) {
    if (document.implementation.hasFeature("MouseEvents", "2.0")) {
        return event.button;
    } else {
        switch (event.button) {
        case 0:
        case 1:
        case 3:
        case 5:
        case 7:
            return 0; //主鼠标按钮
        case 2:
        case 6:
            return 2; //  次鼠标按钮
        case 4:
            return 1; //滚轮
        }
    }
}

  

3.5、右键事件

mouseup事件中,event.button === 2,(若用mousedown,有生龙活虎浏览器的button值始终是0。

1.2、unload

本条事件是在文书档案被完全卸载后触发,而使用那么些事件最多的情事是消除援用,以制止内部存款和储蓄器败露;注意,当时操作Dom节点或因素的样式,会形成错误;使用方式与load雷同,在window上绑定事件

3.1、事件奉行顺序

mousedown->focus->mouseup->click->mousedown->mouseup->click->dbclick

在mousedown中梗阻事件的暗中同意行为后,IE中,如故博得核心并触发 Focus 事件,Firefox Safari Chrome Opera 中,没有收获大旨,focus没试行。剖析:Focus 行为是这几个浏览器的默许行为之风流罗曼蒂克,能够被撤回试行。源 任何撤除mousedown或mouseup事件,就能够阻止click触发;相应,阻止五遍click行为也会阻碍dbclick行为。

4.2、textInput

只有在可编写制定区域才会接触,其余待测验后加多复制粘贴时,在IE678触发onpropertychange,其余浏览器促发oninput事件(HTML5)

function input(input, callback){
    if("onpropertychange"in input){//IE6/IE7/IE8
        input.onpropertychange =function(){
            if(window.event.propertyName =="value"){
                callback.call(this, window.event)
            }
        }
    }else{
// Fix Firefox Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=195696
        input.addEventListener("input", callback,false);
    }
}

  

5、变动事件

removeChild、replaceChild触发DOMNodeRemovedDOMSubtreeModified事件

appendChild、replaceChild、insertBefore触发DOMNodeInsertedDOMNodeInsertedIntoDocumentDOMSubtreeModified

特点匡正触发DOMAttrModified事件

Events Opera 9 Firefox 3 Safari3 及Chrome IE9
DOMSubtreeModified - 支持 支持 支持
DOMNodeInserted 支持 支持 支持 支持
DOMNodeRemoved 支持 支持 支持 支持

四、HTML5事件

1、事件委托 

页面中事件处理程序的数据一贯影响到页面全体的运行品质,能够通过事件委托来优化。假如可行的话,能够虚构为document对象增添一个事件管理程序。最符合采用事件委托的有click、mousedown、mouseup、keydown、keyup和keypress。

1.3、resize

当浏览器窗口被调动到一个新的冲天或宽度时接触;使用方式与load同样,在window上绑定事件

4、readystatechange

IE FireFox 4 和Opera协助此事件,扶持那一件事件的对象都有二个readyState属性。恐怕带有下列5个值中的二个,但不分明都会阅历过uninitialized、loading、loaded、interactive(人机联作卡塔尔、complet对于document来说,interactive会在与DOMContentLoaded大概相通临时间刻触发,与load事件联合行使时,无法预想前后相继顺序;此外人机联作阶段也可能晚于完结阶段。

readystatechange事件能够功用于script(在IE和Opera中卡塔尔国link(仅IE中卡塔 尔(英语:State of Qatar);日常该事件绑定在document上。

2、beforeunload

绑定期,在页面卸载前能够由此它弹出窗口,来撤销卸载并三番三回应用原有页面。为了显示弹出窗,必得将event.returnValue的值设置为要出示给顾客的字符串(对IE及FireFox来说卡塔 尔(阿拉伯语:قطر‎,同不经常间作为函数的值重临(对Safari和Chrome来讲卡塔尔。Opera 11 及其早前的版本不协助。

// beforeunload事件
EventUtil.addHandler(window, "beforeunload", function (event) {
    event = EventUtil.getEvent(event);
    var message = "I'm really going to miss you if you go."
        event.returnValue = message;
    return message;
})

  

六、模拟事件

三、事件类型

3.2、修改键

shiftKeyctrlKeyaltKeymetaKey(在Window键盘中是window键,在mac中是Cmd卡塔 尔(英语:State of Qatar),值都以布尔值。 IE8及以前,不扶持metaKey属性。

3.3、相关要素

mouseovermouseout有有关属性(event.relatedTarget);

IE8及其早前版本不扶持relatedTarget,替代的是:mouseover事件的fromElement,mouseout事件的toElement

getRelatedTarget : function (event) {
    if (event.relatedTarget) {
        return event.relatedTarget;
    } else if (event.toElement) {
        return event.toElement;
    } else if (event.fromElement) {
        return event.fromElement;
    } else {
        return null;
    }
}

  

本文由时时app平台注册网站发布于web前端,转载请注明出处:event.stopPropagation与event.preventDefault的区别

关键词: