webapi（五）- 事件对象

document.addEventListener('click' , function(e) {
				// e就是事件对象  
				// 关于事件对象，如果需要使用，就写上形参e,不需要使用，可以忽略不写
				console.log(e)
        })

document.addEventListener('click' , function(e) {
            console.log(e.pageX , e.pageY)
        })

document.addEventListener('keydown' , function(e) {
    console.log('键盘按下'  , e.key)
    // keydown按下不松手会频繁触发事件，所以一般使用keyup事件
})    
document.addEventListener('keyup' , function(e) {
    console.log('键盘弹起' , e.key)
})

// 演示事件冒泡
document.addEventListener('click' , function(){
    console.log('我是document')
})
document.body.addEventListener('click' , function() {
    console.log('我是body')
})
fa.addEventListener('click' , function() {
    console.log('我是father')
})
son.addEventListener('click' , function() {
    console.log('我是son')
})

document.addEventListener('click' , function(){
    console.log('我是document')
		},true)
document.body.addEventListener('click' , function() {
    console.log('我是body')
		},true)
fa.addEventListener('click' , function() {
    console.log('我是father')
		},true)
son.addEventListener('click' , function() {
    console.log('我是son')
		},true)

	let fa = document.querySelector('.father')
	let son = document.querySelector('.son')
	
	son.addEventListener('click', function (e) {
	    console.log('is son')
	    //阻止事件流，，直接在father上被掐断了，也不会冒到body  document。。。
	    e.stopPropagation()
	})
	
	fa.addEventListener('click', function (e) {
	    console.log('is father')
	})

<a href="http://www.baidu.com">跳转到百度</a>
    <script>
        // 阻止浏览器的默认行为
        // 事件对象e有 方法可以来阻止浏览器的默认行为
        let a = document.querySelector('a')
        a.addEventListener('click', function (e) {
            e.preventDefault()
            alert('哈哈,被点击了,但是没跳转~')
        })
    </script>

let box = document.querySelector(".box");
let ps = document.querySelectorAll(".box p");
let create = document.querySelector(".create");

// 常规做法：找到所有的p，给所有的p注册click
// 缺点：1. 有较大性能消耗   2. 无法给动态新创建的元素注册事件（触发事件）
for (let i = 0; i < ps.length; i++) {
  ps[i].onclick = function () {
    alert("哈哈")
  }
}
// 点击按钮，新建p添加到div中
create.addEventListener('click', function () {
  let newP = document.createElement('p')
  newP.innerHTML = '新建的p'
  box.appendChild(newP)
})

// 事件委托做法：
    // 做法：把事件委托注册给父元素（祖先元素）
    // 优点：可以提高性能，给动态新创建的元素注册事件
    // 原理：事件冒泡
    box.addEventListener('click' , function(e) {
      //事件对象.target 可以获得真正触发事件的元素,使用tagName可以得到元素名（注意是大写） 
			console.log(e.target , e.target.tagName)
      if(e.target.tagName === 'P') alert('p被点击啦~')
    })

// 需求：按钮的点击事件只能触发一次
	// 解绑事件
	// 解绑语法: 元素.onclick = null
	    btn.onclick = function() {
	        console.log('我被点击啦')
	        // 解绑按钮注册的点击事件
	        btn.onclick = null
	    }

// addEventListener 注册的事件如何解绑 ==> 需要使用removeEventListener来进行解绑
        // **匿名函数无法解绑**
        // 所以 以下注册事件无法解绑
        /* btn.addEventListener('click' , function() {
            
        })
        btn.removeEventListener('click' , function() {

        }) */

        // **正确解绑方法 把匿名函数写成具名函数**
        function fn() {
            console.log('我点击了')
            // 解绑  效果是只能点击一次
            btn.removeEventListener('click' , fn)
        }
        btn.addEventListener('click' , fn)

window.addEventListener('scroll' , function() {
            
      })

window.addEventListener('load' , function() {

        })

document.addEventListener('DOMContentLoaded' , function() {
            
        })

window.addEventListener('scroll' , function() {
   let num = document.documentElement.scrollTop
   console.log(num)
})

// resize事件 : 当浏览器大小发生改变的时候会触发该事件 ==> 可以用于获取页面可视区大小
        window.addEventListener('resize' , function () {
            let w = document.documentElement.clientWidth
            console.log(w)
        })