JS-part10.4-事件委托 / 阻止浏览器的默认行为

事件委托

1. 循环绑定事件
  => 给每一个 li 绑定一个点击事件
  => 浪费性能
  => 对新加进来的元素不友好
  
2. 事件委托 (事件代理)
  => 把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。
  => 事件代理的原理是DOM元素的事件冒泡
  
  => 把所有 li 身上需要绑定的事件绑定给一个共同的结构父级
  => 绑定给 ul
  => 事件目标: 准确触发事件的元素
    -> 如果你点击在了 ul 身上, target 就是 ul
    -> 如果你点击在了 li 身上, target 就是 li
  => 通过事件目标来判断你点击的确实是 li
    -> if(){}
    -> 元素节点.nodeName: 大写标签名

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
    
// 1. 获取所有 li
var lis = document.querySelectorAll('li')
var ul = document.querySelector('ul')

// 2-1. 循环绑定事件
// lis.forEach(function(item){
//     item.onclick = function(){
//         console.log(item)
//     }
// })

// 2-2. 事件委托
ul.onclick = function(e){
    e = e || window.event
    var target = e.target || e.srcElement
    
    // target 就是你点击的那个元素
    // console.log(target.nodeName)
    if(target.nodeName === 'LI'){
        console.log('你点击的是li', target)
    }
}

优点

需求: 有一个 button 按钮,点击的时候会添加一个 li 进入到 ul

/*我们先看一下 循环绑定事件 的案例*/
var btn = document.querySelector('button')
        
btn.onclick = function(){
    // 插入节点的方式
    var li = document.createElement('li')
    li.innerText = '新来的'
    ul.appendChild(li)  // 此时该循环绑定事件对新来的 li 没有用,因为此时仅给按钮绑定了点击事件,但还没有触发. lis 获取到的只有现存在的3个li, 循环绑定事件也仅给这3个li绑定了. 当我触发按钮的点击事件时,仅执行了插入新的 li,而新加进来的 li 是没有事件的
    
    // innerHTML
    // 完全覆盖式的写入
    ul.innerHTML += '<li>新来的</li>'    // innerHTML的方法会导致新加li后,原先的li点击也不再触发点击事件,因为它是完全覆盖式的写入,而 lis 获取的是一开始的3个li
}

// 1. 获取所有 li
var lis = document.querySelectorAll('li')
var ul = document.querySelector('ul')

// 2-1. 循环绑定事件
lis.forEach(function(item){
    item.onclick = function(){
        console.log(item)
    }
})       

/*
事件委托 
不管是插入节点还是innerHTML都可以正确绑定
*/

var btn = document.querySelector('button')
        
btn.onclick = function(){
    // 插入节点的方式
    var li = document.createElement('li')
    li.innerText = '新来的'
    ul.appendChild(li)

    // innerHTML
    // 完全覆盖式的写入
    // ul.innerHTML += '<li>新来的</li>'
}

// 1. 获取所有 li
var lis = document.querySelectorAll('li')
var ul = document.querySelector('ul')

// 2-2. 事件委托
ul.onclick = function(e){
    e = e || window.event
    var target = e.target || e.srcElement
    
    // target 就是你点击的那个元素
    // console.log(target.nodeName)
    if(target.nodeName === 'LI'){
        console.log('你点击的是li', target)
    }
}

注意

阻止浏览器的默认行为

+ 什么是浏览器默认行为
  => 不需要我们手动绑定,本身就带有的事件行为
  => a 标签,自带点击行为
  => form 标签,自带表单提交
  => 框选, 自带框选效果
  => 鼠标右键单击,自动弹出一个菜单
  => ...
  
+ 阻止浏览器默认行为
  => 在同类型事件里面进行阻止
  => 你要阻止 a 的自动跳转,那么你就在 a 标签的点击事件里面阻止
  => 你要阻止 form 标签的表单提交,那么就在 form 标签的 submit 事件里面阻止
  => 1. e.preventDefault()
    -> 标准浏览器使用
  => 2. e.returnValue = false
    -> IE 低版本
  => 兼容
    -> 方式1: if(){}else{}
    -> 方式2: try{}catch(err){}
    -> 方式3: 直接return false, 有时不好使

 // 获取元素
 var a = document.getElementsByTagName('a')[0]
 a.onclick = function(e){
     e = e || window.event
     console.log('我被点击了')

     // 阻止默认事件
     // 标准浏览器
     // e.preventDefault()

     // IE 低版本
     // e.returnValue = false

     // 兼容
     // 方式1
     if(e.preventDefault){
         e.preventDefault()
     }else{
         e.returnValue = false
     }

     // 方式2
     try{e.preventDefault}catch{
         e.returnValue = false
     }
 }
 
 // 框选
 window.onselectstart = function(){
     return false
 }

 // 右键单击
 window.oncontextmenu = function(){
     console.log('右键单击了')
     return false
 }