DOM事件概念以及过程

解释以下概念:事件传播机制、阻止传播、取消默认事件、事件代理

事件传播机制

事件传播机制分为三个阶段

  1. 事件捕获阶段:事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数,若有则执行。(ie低版本没有捕获)
  2. 事件处理阶段:事件到达目标元素,执行目标元素的事件处理函数.
  3. 冒泡传播:从捕获到事件源的元素开始往父级元素进行事件冒泡,DOM0级事件中,事件绑定函数的触发都发生在冒泡阶段

阻止传播

stopPropagation()取消事件进一步捕获或冒泡

阻止默认事件

preventDefault()取消事件默认行为

  • 什么是事件默认行为?
    • a链接默认跳转
    • type =submit默认提交表单
    • 其他浏览器默认行为...

我们不希望浏览器默认做什么事情,我们就给它绑定事件,怎么绑定呢?preventDefault()

<a href="http://baid.com">baidu</a>
<script>
  document.querySelector('a').onclick= function(e){
    //阻止默认事件
    e.preventDefault()
    //点击时打印链接
    console.log(this.href)
    if(/baidu.com/.test(this.href)){
      location.href = this.href
    }
  }
</script>

<form action="/login">
    <input type="text" name="username">
    <input type="submit">
</form>
<script>
    document.querySelector('form').addEventListener('submit', function(evt){
       //阻止默认事件
        evt.preventDefault()
        if(document.querySelector('input[name=username]').value === 'jirengu'){
            this.submit()
        }
    })
</script>

事件代理

要理解事件代理,首先要明白什么是事件冒泡:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。

<ul id="oul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
(function(){
    var oUl=document.getElementById("oul");
    oUl.addEventListener('click',show,false);
    function show(e) {
        var targetElement=e.target||e.srcElement;
        if(targetElement.nodeName.toLowerCase()==="li"){
        alert(targetElement.innerHTML);
        }
    }
})();
</script>

看上面的这个例子,我把click事件绑定在了父元素ul上,而不是li上,于是,当我点击任何一个li标签(不管是动态生成的还是之前就有的)是,这个事件就像泡泡一样,冒啊冒。由于我这里给ul绑定了onlick,那么这时,ul会捕获冒泡上来的onclick事件

我们来看一下事件代理的步骤:

  1. 父元素绑定事件
  2. 父元素知道事件的实际发生目标是谁
  3. 我们要对目标进行判断,如果是我们需要的元素,则发生回调函数

事件代理的优点:

  • 性能不小心得到了优化
  • 动态添加的元素也能绑定事件了

写一个 Demo,演示事件传播的过程,演示阻止传播的效果

image
//html
<body>
  <style>
    .container,
    .box,
    .target{
      border: 1px solid;
      padding: 10px;
    }  
  </style>
  <button id="btn">click</button>

  <div class="container">
    container
    <div class="box">
      box
      <div class="target">target</div>
    </div>
  </div>
</body>

//js

function $(selector){
  return document.querySelector(selector)
}
var btn = $('#btn')
btn.onclick = function (e){
 console.log(e) 
}
btn.addEventListener('click', function(evt){
  console.log(this)
  console.log(btn)
  console.log(evt.target)
})

$('.container').addEventListener('click', function(e){
  console.log('contianer click.. in 捕获阶段')
}, true)
$('.box').addEventListener('click', function(e){
  //e.stopPropagation() //阻止传播
  console.log('box click.. in 捕获阶段')
}, true)
$('.target').addEventListener('click', function(e){
  console.log('target click.. in 捕获阶段')
}, true)

$('.container').addEventListener('click', function(e){
  console.log('contianer click.. in 冒泡阶段')
}, false)
$('.box').addEventListener('click', function(e){
  //e.stopPropagation()  //阻止传播
  console.log('box click.. in 冒泡阶段')
}, false)
$('.target').addEventListener('click', function(e){
  console.log('target click.. in 冒泡阶段')
}, false)

实现一个登陆/注册页面

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 解释以下概念:事件传播机制、阻止传播、取消默认事件、事件代理 事件传播机制 事件传播机制分为三个阶段 事件捕获阶段...
    YM雨蒙阅读 1,606评论 0 1
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,548评论 1 11
  • 前言 本文主要介绍: DOM事件级别 DOM事件流 DOM事件模型 事件代理 Event对象常见的方法和属性 一、...
    xyyojl阅读 1,254评论 0 3
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,414评论 0 2
  • 前言 本文主要介绍DOM事件级别、DOM事件模型、事件流、事件代理和Event对象常见的应用,希望对你们有些帮助和...
    浪里行舟阅读 628评论 0 3