事件驱动3特征

绑定事件

ele.addEventListener(‘click’,function(){});//IE9级以上
ele.attachEvent(‘on’click’,function(){});//IE9-10；
兼容写法:

function addEventListener(ele,event,fn){if(ele.addEventListener){ele.addEventListener(event,fn);}else if(ele.addEventListener){ele.attachEvent('on'+event,fn);}else{ele['on'+event]=fn;}
}

移除事件

ele.onclick = null;
ele.removeEventListener(‘click’,fn);//移除函数不能使用匿名函数
ele.detachEvent(‘onclick’,fn);//IE9-10
兼容性处理

function removeEventListener(ele,event,fn){if(ele.removeEventListener){ele.removeEventListener(event,fn);}else if(ele.detachEvent){ele.detachEvent('on'+event,fn);}else{ele['on'+event] = null;}
}

事件阶段

从外到里事件捕获
事件对象执行
从里到外事件捕获
如果addEventListener(事件,事件函数,true);表示事件捕获默认false表示事件冒泡
addEvent 和 onclick都只有事件冒泡

事件委托

子元素触发父元素事件，父元素触发事件根据不同的子元素进行分别处理

father.onclick = function(e){e = e || window.event;//老版本IE兼容性if(e.target==xxx){e.target.style.backgroundColor = "red";}
}

事件属性

e.eventPhase

e.eventPhase == 1 为捕获阶段 2为目标阶段 3为冒泡阶段

e.currentTarget

e.currentTarget 事件处理函数的注册事件相当于this 区别于e.target在老IE是srcElement

e.target

var target = e.target || e.srcElement;

e.type

e.type 获取事件名称如果多个事件指向同一个函数就可以用于区分

获取鼠标

e.clientX/Y

获取当前页面可视区域的位置

e.pageX/Y

获取当前页面位置 e.pageX/Y = e.clientX/Y + document.body…scrollLeft + document.body…scrollTop;
兼容写法:

function getScroll(){var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;return {scrollLeft:scrollLeft;scrollTop:scrollTop ;}
}

获取键盘

e.keyCode 键码
48-57是数字

阻止默认行为

return false;
e.preventDefault();
e.returnValue = false;//IE

停止冒泡

e.stopPropagation();
e.cancelBubble = true;//IE

书写事件驱动程序

常用事件

a.窗口事件,只在body和frameset元素中才有效
onload 页面或图片加载完成时
onunload 用户离开页面时
b.表单元素事件,在表单元素中才有效

onchange     框内容改变时
onsubmit     点击提交按钮时
onreset     重新点击鼠标按键时
onselect     文本被选择时
onblur      元素失去焦点时
onfocus     当元素获取焦点时

c.键盘事件,在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都无效
onkeydown 按下键盘按键时
onkeypress 按下或按住键盘按键时
onkeyup 放开键盘按键时
d.在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都无效

onclick     鼠标点击一个对象时
ondblclick    鼠标双击一个对象时
onmousedown 鼠标被按下时
onmousemove 鼠标被移动时
onmouseout    鼠标离开元素时 触发事件冒泡
onmouseover 鼠标经过元素时 触发事件冒泡
onmouseleave   鼠标离开元素时 触发事件冒泡
onmouseenter 鼠标经过元素时 不触发事件冒泡
onmouseup    释放鼠标按键时
onmousewheel 滚轮事件

e.其他
onresize 当窗口或框架被重新定义尺寸时
onabort 图片下载被打断时
onerror 当加载文档或图片时发生错误时
自定义对象:有初始化对象和定义构造函数的对象两种方法

特殊事件

onload/onunload

当页面加载（文本和图片）完毕的时候，触发onload事件。
img也有onload事件
onunload会冻结使用window

前端知识-JavaScript事件驱动特性相关推荐

Python之路--前端知识--JavaScript
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...
【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
3 HTMLJS等前端知识系列之javascript的基础
preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式条件判断,循环流程等. 函数面向对象 what ...
web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）
前言:温故而知新,可以为长也!万变不离其宗,无论是现在web前端技术衍生出多么优秀,好用的框架,插件,都离不开这门语言的基础知识.掌握各种优秀的框架,插件,只是"善用工具的人",深 ...
Web前端第三季(JavaScript):三:第1章:JavaScript基本知识:107-js中变量的声明+108-js中变量的注意事项+109-js中变量的命名规则+110-赋值和算术运算符
目录一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 2.SIKI学院:我参考此视频实操 3.w3school ...
web前端知识集合——javascript基础篇之常量和变量（二）
3. 变量和常量: 1.1 变量的声明: js三种方式声明变量,声明不赋值时,默认值为underfined. (1)var声明:var name='Ace',同时声明多个变量var a=1,b=2,c ...
前端知识体系-全栈系列（图谱+大纲）
源文件地址: https://download.csdn.net/download/gongch0604/86860161 前端知识体系(图谱) 前端工程化体系 node 主流技术栈大纲 React ...
web前端知识体系大全
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
javascript乘法和加法_Web前端：JavaScript中的NaN是什么？
大家好,我来了,本期为大家带来的前端开发知识是"Web前端:JavaScript中的NaN是什么?",有兴趣做前端的朋友,一起来看看吧! JavaScript中的数字类型包含整数和 ...

前端知识-JavaScript事件驱动特性