js事件笔记

js事件

1、事件三要素：
事件源：要触发的对象  （一般是名词，事件发起者，比如开关按钮）
事件：怎么触发这个事情  （一般是动词，触发事件，比如点击开关）
事件处理程序:发生了什么事情 （处理结果，比如灯亮了）

事件源.事件 = function() {
    事件处理函数
}

添加，移除js事件

<button id='btn'>点击</button>

let btn= document.getElementById('btn')
function fn(){
    alert('第一次点击')
}

//添加点击事件
btn.onclick=fn
■ btn.addEventlistener('click',fn)

//移出事件
btn.onclick=function fn(){
    alert('第一次点击')
    btn.onclick=null
}

function fn(){
    alert('第一次点击')
    ■ btn.removeEventListener('click',fn)
}
btn.addEventlistener('click',fn)

事件冒泡捕获

事件冒泡：当点击子元素的时候，先查看子元素是否有点击事件，如果没有，向上查看，看看父亲有没有，有执行，然后查看爷爷...以此类推...

事件三个阶段：
■//1.事件捕获 	由外到内
■//2.事件执行	正常执行
■//3.事件冒泡	由内到外

<div class="father-box">
	<div class="son-box"></box>
</div>

let sonBox=document.querySelector('.son-box')
■//阻止事件冒泡,兼容写法
sonBox.onclick=function(event){
    let e=event||window.event //IE(window.event)
    if(e&&e.stopPropagetion){
        e.stopPropagetion()
    }else{
        e.cancelBubble=true //IE
    }
}

事件代理/委托

<ul class="ul">
      <li class="li">项目1</li>
      <li class="li">项目2</li>
      <li class="li">项目3</li>
      <button class="btn">增加</button>
</ul>
let btn = document.querySelector('.btn')
let ul = document.querySelector('.ul')
let lis = document.querySelectorAll('.li')

btn.addEventListener('click', () => {
      let li = document.createElement('li')
      li.innerHTML = '新增项目'
      ul.insertBefore(li, btn)
})

//当动态添加元素时，没有事件产生,需要事件代理
// lis.forEach((el) => {
    //   el.addEventListener('click', function () {
    //     alert(el.innerHTML)
    //   })
// })

// 事件代理/委托：解决父元素的子元素都有这样的事件，不需要给每个子元素添加事件，让父元素代理就行；或者是动态添加的元素
ul.addEventListener('click', function (event) {
      if (event.target.nodeName === 'LI') {
        alert(event.target.innerHTML)
      }
})

常见事件

■//onclick     	鼠标单击
■//ondbclick   	鼠标双击
■//onkeyup		按下并释放键盘的一个键时触发
■//onchange		文本内容或下拉菜单中的选项发生改变
■//onfocus		获得焦点，表示文本框等获得鼠标光标
■//onblur		失去焦点，表示文本框等失去光标
■//onmouseover	鼠标悬停，即鼠标停留在图片等的上方
■//onmouseout	鼠标移出，即离开图片等所在的区域
■//onload		网页文档加载事件
■//onunload		关闭网页时
■//onsubmit		表单提交事件
■//onreset		重置表单时
 //input