事件绑定:顾名思义就是给页面上的元素绑定事件(处理程序),分为动态绑定和静态绑定。
静态绑定,也是最直接的事件绑定【通过事件属性,直接显示的给元素绑定事件,例如
<div onlick="myfunc()" onmouseover="myfunc2()" >
<script>
function myfunc(){}
function myfunc2(){}
</script>
、、、、、、、
该方式缺点:当页面多元素都要添加事件时,定义繁琐。函数名称定义改变,一次要修改两个地方。
动态绑定:
<div id="mydiv">
<script>
var funcname1 = function(){}
mydiv.onclick = funcname1 //直接对dom元素的onclick属性赋值函数
mydiv.onclick = null //移除绑定事件
《通过事件监听方式》
mydiv.addEventListener('click',funcname1); //注意这里除了直接传递一个函数,还可以传递一个callback除了传递一个函数之外,还可以传递一个属性带有 HandleEvent 方法【名字必须是 HandleEvent】的对象obj,
系统会自动去调用这个HandleEvent 方法!!!
mydiv.removeEventListener('click', callback)
《移除事件监听》
</script>
关于事件监听的适配:因为IE 有自己的事件监听 【attachEvent()
和detachEvent() 分别用于事件监听
】
oBtn.attachEvent('onclick',funcname1); //IE 添加 监听
oBtn.detachEvent('onclick',funcname1); ////IE 移除 监听
所以添加监听之前可以先判断一下 dom元素是否存在属性 attachEvent ,有就走 使用 attachEvent()添加监听逻辑,没有就 addEventListener()
事件委托:顾名思义就是事件的处理不自己躬行,委托给他人帮忙处理。
要了解实现委托,就必须先了解事件捕获和事件冒泡,别人网上有很多总结 【https://www.jianshu.com/p/c88c15c6074c,可以看看这篇,图文并茂,比较好理解】
事件委托应用场景: 如果一类元素数量多且都需要加上js事件时,通过循环一个一个的为每个元素单独添加js事件显然造成内存的浪费。这样的场景就适合用事件委托。
事件委托本质时事件冒泡的应用。
大致流程:为父元素添加事件,点击子元素是由于事件冒泡,添加的会传递的会向上传递到父元素,父元素捕获到事件就进行 源头判断【 ev.target 】
在进行相应处理就好了。
ex:
<ul id="parent"> <li>c1</li> <li>c2</li> <li>c3</li> </ul> <script> (function(){ parent.addEventListener('click',func); //id属性 可以直接拿来用 function func(e){ e = e || window.event; var src = e.target; if(src && src.nodeName.toLowerCase() === 'li'){ //判断事件发起的源头 alert(src.innerHTML); } } })(); </script>
事件委托优点:
减少冗余重复代码的书写,对于同一个父节点下面类似的子元素,可以通过委托给父元素的监听函数来处理每个子节点的事件。
不会因为元素的变动而改变事件的绑定
对dom元素的引用少了,有效避免内存泄露问题。