0
点赞
收藏
分享

微信扫一扫

Javascript-Event事件(一)

IT影子 2021-09-30 阅读 58

事件传播的过程

捕获

冒泡

DOM事件流

实例演示?演示代码

实例中分别给三个目标元在『捕获』和『冒泡』阶段都绑定了事件监听器,动图中一共点击了三次:

分析第一次点击步骤分析:

  • 开始点击目标元素 target,由于在『捕获阶段』绑定了事件监听器,所以由上而下传播打印之前给定的信息,顺序:『container boxtarget』
  • 到达真正的点击的『目标阶段』target
  • 由于在『冒泡阶段』也绑定了事件监听器 所以自『目标阶段』由下而上传播打印之前给定的信息,顺序:『target boxcontainer』
// HTML
/*
<div class="container">
    container
    <div class="box">
        box
        <div class="target">target</div>
    </div>
</div>
*/

// JS
function $(selector) {
  return document.querySelector(selector)
}

function DomEvent(target, info, bool) {
  target.addEventListener('click', () => console.log(info),bool)
}
DomEvent($('.container'), 'container click 捕获', true)

DomEvent($('.box'), 'box click 捕获', true)

DomEvent($('.target'), 'target click 捕获', true)

DomEvent($('.container'), 'container click 冒泡', false)

DomEvent($('.box'), 'box click 冒泡', false)

DomEvent($('.target'), 'target click 冒泡', false)

事件监听(踩坑)

①能否绑定多事件
  • 『EventTarget.addEventListener()』可以绑定多事件
<button id="test" >click me</button>
<script>
    Btn = document.querySelector('#test')
 // 第一次,绑定监听器
    Btn.addEventListener('click', function f() {
        console.log('first')
    })
    
// 第二次,绑定监听器
    Btn.addEventListener('click', function f() {
        console.log('second')
    }) 
    
</script>

点击按钮,打开控制台查看.第一次绑定的 打印出 'first',被后一次绑定的 打印出 'second',均被执行

  • 『DOM事件属性』不能绑定多事件
// 把上面demo的addEventListener绑定换成如下
Btn.onclick = function () {
    console.log('first')
}
Btn.onclick = function () {
    console.log('second')
} 

点击按钮,打开控制台查看,第一次绑定的 打印出 'first',被后一次绑定的 打印出 'second'覆盖

②移除事件的方法

  • 『DOM事件属性』,设置对应的 onevent = null
element.onclick = function () {console.log(this.tagName)}

// 设置element.onclik的属性的值为 null,可以成功移除事件
element.onclick = null
  • 『EventTarget.addEventListener()』通过『EventTarget.removeEventListener()』,两者参数一致且函数不能是匿名函数
function handler() {
  alert( '!不是匿名函数' );
}

element.addEventListener("click", handler);
element.removeEventListener("click", handler);
// addEventListener removeEventListener参数完全一致才能有效移除事件

// 下面的写法无法成功移除事件
// 函数不能是匿名函数
element.addEventListener("click", function () {alert('!不能是匿名函数')});
element.removeEventListener("click", function () (alert('!不能是匿名函数')));

this e.target e.currentTarget的区别

验证demo

建议在JSBin验证上图的demo


事件代理

事件的代理的好处:

  • 节省监听器

  • 对于后期新增元素使用事件代理更好

实例?剖析

<div id="test">
    <ul>
    <li class="ct"><span>1</span></li>
    <li class="ct"><span>2</span></li>
    <li class="ct"><span>3</span></li>
  </ul>
</div>
<button id="add">add child</button>

分析

第一个要求,不使用事件代理也可以做到,只要给每个`<li>`元素,添加一个监听器。(但是如果子元素,足够多,就需要绑定很多监听器)

第二个要求,如果用事件代理,即使没给新增的元素添加监听器,但是给他们的父元素绑定监听器,内部事件会冒泡形式通知到父元素节点

Event delegation事件代理验证demo

// 获取元素
function $(select) {return document.querySelector(select)}

// 打印出 textContent 值为(i++)
function fn(e) {console.log(e.target.textContent)
    // console.log(e.target)
    // console.log(this)
        }

    // 点击按钮,新增元素
    var i =4
    $('#add').onclick = function(){
      let li = document.createElement('li') 
      li.innerHTML = '<span>'+ (i++) + '</span>'
      li.classList.add('ct')
      $('ul').append(li)
    }

  // 事件代理函数,即使目标节点内有嵌套的元素,也可以执行监听
    function delegation(element, eventType, targetEle, fn) {
        $(element).addEventListener(eventType, function (e) {
            let el = e.target
            while (!el.matches(targetEle)) {
                if (element === el) {
                    el = null
                    break
                }
                el = el.parentNode
            }
            el && fn.call(el, e, el)
        })
        return element
    } 

  // 监听函数的调用
    delegation('div', 'click', 'li', fn)

preventDefault()与stopPropagation()

- 作用
preventDefault() 取消事件对当前元素的默认影响,不会阻止事件的传播
stopPropagation() 阻止事件在 DOM 中继续传播,防止再触发定义在别的节点上的监听函数,(包括在当前节点上其他的事件监听函数。)
事件对象Event的cancelable属性为true,可以调用event.preventDefault()。如果为false,调用该方法没有任何效果。

如果调用了『event.preventDefault()』则,『event.defaultPrevented』返回一个布尔值 true 否则返回 false
<ul id="test">
    <li><a href="https://www.baidu.com">百度</a></li>
    <li><a href="https://sports.qq.com">腾讯体育</a></li>
</ul>
<script>
test.onclick = function(event) {
// if (event.target.nodeName != 'A') return;
     return false; // 链接不会跳转

//  event.preventDefault()
// 『return false』与event.preventDefault()都可以阻止浏览器默认事件
};
</script>

自定义事件『new Event(type, options)』与『new CustomEvent(type, options)』

new Event(type, options)

event = new Event(type, options)

new CustomEvent(type, options)

自定义一个事件

<h1 id="defiEvent">Hello World</h1>
<script>
  var defiEvent = document.querySelector('#defiEvent')
  defiEvent.addEventListener('say', function(e) {
    alert(e.detail.info)
  })

   // dispatchEvent方法触发事件
  // alert("just do it")
  defiEvent.dispatchEvent(new CustomEvent('say', {
    detail: { info: "just do it" },
    bubbles: true,
    cancelable: false
  }))
</script>

JS事件练习demo

自定义事件的应用new CustomEvent()

效果


事件demo-点击 显示/隐藏 菜单

效果


事件demo-添加关闭按钮

效果


事件demo-tooltip提示工具

效果


事件demo-图像传送带

效果


事件demo委托-树形菜单Tree(并给文本节点添加 「span」)

效果


配图存于语雀


版权声明:本文为博主原创文章,未经博主许可不得转载

举报

相关推荐

0 条评论