2017-3-22(事件的绑定/解除/冒泡)

1.使用过的事件

onclick 点击

onchange 表单元素改变的时候 (三级联动)

oninput 表单文本框输入文本触发  (新浪微博)

onscroll 滚动条变化时的时候  (回到顶部)

onload window.onload = fn;页面的资源(脚本,css,img,video,audio)加载完成之后

mouseover/mouseout 鼠标移入/移出  (大图滚动)

blur/focus 失去焦点/聚焦  (新浪微博)....

鼠标事件/键盘事件/表单事件/触屏事件/window事件

2.事件绑定的三种方式

a.元素属性绑定,结构跟行为没有分离,不推荐使用,注意:该事件函数只能是全局函数

b.通过on + 事件类型这种元素对象方式绑定,事件处理程序只能绑定一次,后面的会覆盖前面的

c.ele.addEventListener(type,fn,boolean) 可以给元素绑定多个事件处理程序,先绑定先执行低版本IE8以下不支持type 事件类型 fn 事件处理函数 this指向ele,绑定该方法的元素boolean 布尔值(冒泡false/捕获true)阶段

d.低版本IE8 ele.attachEvent("on" + type, fn);后绑定先执行fn 事件处理函数 this指向全局对象window总结:兼容以上三种方式的写法

3.事件解绑的方式

a.元素属性绑定,使用 //show = function(){}; element.onclick = null;

b.通过on这种方式绑定的, element.onclick = null;

c.ele.romoveEventListener(type,fn,boolean);里边的参数要跟绑定时的参数完全一致 fn 事件处理程序,保证是同一个函数,该函数定义在外部,引用函数名

d.低版本IE8 attachEvent移除事件detachEvent 移除事件detachEvent t("on" + type, fn);参数跟绑定的事件一致

4.事件流三个阶段:捕获,事件目标,冒泡【从具体，最里层的开始，往父级,body，document,直到window】捕获阶段能通过addEventListener(type,fn,true);添加5.事件对象,包括当前事件的状态,信息

6.阻止冒泡的方式

 a.属性绑定, on这种方式绑定的事件 e.cancelBubble = true;

b.addEventListener绑定就使用 e.stopPropagation();

c.attachEvent 使用e.cancelBubble = true;

7.利用冒泡原理实现的效果

a.在子级阻止冒泡,那么祖先元素相同事件就不会触发

b.事件委托,将本来要添加到共同子元素的事件添加到它们存在页面上共同的父元素,只需给父元素添加一次事件,利用的是冒泡原理优点:

1.1节省内存

1.2后新增(动态增加)的子元素也包含跟原来子元素一样的事件

8.阻止默认事件

a.属性绑定,on这种方式绑定的事件 return false;

b.addEventListener 绑定的就用 e.preventDefault();

c.IE8 attachEvent e.returnValue = false;

9.拖拽

mousedown

mousemove

mouseup

1. 鼠标事件

click 单击 mousedown/mouseup

mousedown 鼠标点下去

mousemove 鼠标移动

mouseup  鼠标松开

mouseover 鼠标移入，冒泡

mouseout  鼠标移出，冒泡

mouseenter 鼠标移入,不冒泡

mouseleave 鼠标移出,不冒泡

dblclick  双击 由两次单击组成

contextmenu 右键菜单

mousewheel 滚轮事件，非标准事件 e.wheelDelta 判断滚动运动方向

IE/Chrome/safari  e.wheelDelta > 0 上 e.wheelDelta < 0 下

DOMMouseScroll 火狐私有滚轮事件，只能使用ele.addEventListener("DOMMouseScroll", fn, false)

e.detail 判断滚动运动方向 e.detail > 0 下 e.detail < 0 上

2. 回调函数 callback function

保证函数调用顺序

3. ele.offsetWidth/ele.offsetLeft

ele.clientWidth/ele.clientLeft

ele.scrollWidth/ele.scrollLeft

4. 键盘事件

keydown 键按下 检测到键盘上所有的键，实体键/辅助键

keyup 键松开

keypress 键按下 检测实体键，所有的字符，数字，空格，enter键

通过e.keyCode标识用户按键