ES之事件绑定，解除绑定以及事件冒泡、事件捕获

绑定事件的处理方法
任何元素都有事件属性，而绑定事件就是将这个事件与一个函数相连接。

①句柄事件
dom.onXXX = function () {代码块} 以on开头的事件属于句柄事件
兼容性非常好，但是一个事件只能绑定一个处理函数。当绑定多个时后面的会覆盖前面的。
这种方法相当于在HTML的行间添加事件。
在行间的写法<div onclick = "fun();或者'函数里面的执行语句'"></div>
②
dom.addEventListener(事件类型，触发函数，false) IE9以下不兼容
该方法的两种写法：
div.addeventlistener('click',function(){},false)
div.addeventlistener('click',函数引用,false)
一个元素的事件可以绑定多个触发函数，当绑定多个处理事件时，后面的不会覆盖前面的。
如： 下面的两个处理函数不是同一个
div.addeventlistener('click',function(){},false)
div.addeventlistener('click',function(){},false)
但是同一种事件类型用同一个处理事件，只执行一次：
div.addEventListener('click',test,false)
div.addEventListener('click',test,false)

原理：addeventlistenner里面的绑定函数如果是同一个函数，那么后面的覆盖前面的。

③IE独有事件
dom.attachEvent('on'+事件类型，处理函数);
和addeventlistener功能类似，区别是绑定多少个事件就执行多少次。
__________________________________________________________________________
①和②中的处理函数的this指向调用的那个元素，而③中的处理函数的this指向window
解决③中的this指向问题
dom.attachEvent('on' + 事件类型, function (){ 处理函数test.call(dom);})
function test(){console.log(this)//这个this指向dom}
————————————————————————————————————————————————————————————
解除事件绑定方法：
针对①：
dom['on' + type] = null/false; 将这句放在处理函数里面的末尾
针对②:
dom.removeEventListenner(原绑定事件类型，原处理函数引用名，false);//若原处理函数是匿名函数，则无法解除绑定。
针对③：
dom.detachEvent('on' + 事件类型，原处理函数引用名)；//若原处理函数是匿名函数，则无法解除绑定。

————————————————————————————————————————————————————————————
鼠标事件：
click点击、mousedown按下、mousemove移动、mouseup松开、
contextmenu右键菜单、mouseover经过、mouseout离开、mouseenter经过、mouseleave离开(后两种是html5的)
click == mousedown + mouseup;
在事件对象中有一个代表鼠标左键或右键或滑轮的属性，当属性值为0，代表左键，为1代表滑轮，为2代表右键。
DOM3规定：click只能监听鼠标左键，要想判断鼠标是按得左键或右键只能用mousedown或mouseup监听

键盘事件：
keydown、keypress、keyup
执行顺序： keydown > keypress > keyup
keydown可以监测到除了fn辅助键之外的其他键，但是keydown无法识别字符的大小写
keypress只能检测到字符类的按键(只要该字符在ascaii码中，就能被监测到)，能区分字符大小写。
String.fromCharCode(变量.charcCode) 返回ascaii代码，如果变量时keypress的事件对象，那么按那个键就返回相应的字符。

文本操作事件：
input事件：当在文本框中每进行一次输入或每进行一次删除时，都会触发该事件。
change事件：判断文本框聚焦和失去聚焦时，状态是否发生改变，若改变则执行处理函数。
focus事件 聚焦
bulr事件 失去焦点

—————————————————————————————————————————————————————————————

事件冒泡：
在结构上(非视觉上)嵌套的元素，会存在事件冒泡功能，即同一个事件事件源的子元素会冒泡向父代元素(自底向上)
事件捕获：
在结构上(非视觉上)嵌套的元素，会存在事件捕获功能，即同一个事件从父代元素会捕获至事件源的子元素(自顶向下)

注意点:IE没有捕获功能，并且除了Chrome，其他浏览器的旧版本也没有，新版有捕获功能是因为涉及到了Chrome的webkit内核。
触发顺序：先捕获再冒泡
捕获的写法：dom.addEventListenner(事件类型，处理函数，ture)
冒泡的写法：dom.addEventListenner(事件类型，处理函数，fasle)

不具备冒泡的事件：focus(聚焦)、blur()、change、submit、reset、select。
总结：不是所有事件都会冒泡。

在解决元素拖拽问题时也涉及到另一个“捕获”，为元素设置一个鼠标事件，当鼠标离开该元素，事件就失效了，两种解决办法，
第一种鼠标移动事件放在document元素上，无论鼠标怎么移动该事件都不会失效。
第二种就是“捕获”事件了，但是只有IE能用，为目标元素dom添加setCaputure()方法，无论鼠标在哪儿，
它都会捕获过来，所以为了不干扰其他元素的执行，还需要加上releaseCapture()方法。
————————————————————————————————————————————————————————————
取消事件的冒泡：
方法①：事件对象.stopPropagation(); W3C官方标准，IE9及以下不支持
事件对象：
在每个事件处理函数里面写一个形参，这个形参对我们来说没用，但是系统会自动传递一个事件对象给形参，
这个事件对象里面有很多属性，每一个属性都记载了事件发生时的关键性数据，同时该对象里面还有
一个stopPropagation方法，该方法是用来取消冒泡事件。
方法②：事件对象.cancelBubble = true; IE独有的一个属性。(现在的Chrome也支持)

取消浏览中的默认事件：
方法①：在处理函数的后面加上 return false;//兼容性非常好，但只有句柄绑定能使用。
注意点：该方法只能用于句柄事件，否则无效。比如： dom.onclick = function(){}
方法②：event.preventDefault();//W3C官方标准，IE9及以下不支持
注意点：该方法来也来自同一个事件对象，并且只针对非IE浏览器，
对IE来说，事件发生时的数据保存在window对象的event属性中，所以在处理函数中需要添加一句
var event = e || window.event//e代表保存事件发生时存储数据的那个对象。(只有在全局时，window可以省略不写)
方法③：event.returnValue = false;//兼容IE

a标签的跳转功能就是一个默认事件，可以通过方法①去掉，
也可以这样：<a href = "script:void(false)"></a>//void相当于return，里面的值只要让boolean值为假就行。
————————————————————————————————————————————————————————————
事件源对象 ：是事件对象中的其中一个属性。比如点击事件，它记录了鼠标点击的位置，返回的是某个元素，
该元素后面接的是能唯一标识这个元素的选择器。
获取事件源对象的方法：
event.target firefox只有这个方法
event.srcElement IE只有这个方法
这两个方法Chrome浏览器都支持。
在获取事件源对象时，考虑兼容性，应写为 var event = event.target || event.srcElement;
————————————————————————————————————————————————————————————
事件委托：
利用事件冒泡、事件源对象进行处理
优点：
1.性能方面，不需要循环所有的元素，一个个绑定事件。
2.灵活，当有新的子元素时，不需要再为新子元素绑定事件。
例如：一个ul元素里面有无数个li元素，li元素的内容为该元素所在的顺序数字，当点击某个li元素，实现打印该li元素的数字。
实现：在ul上面写一个onclick事件，由于点击li元素会冒泡到ul元素，所以触发了ul的点击事件的处理函数，
而在处理函数中写上获取事件源对象的方法。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有