第三周day005

82 阅读2分钟

day005

属于BOM的重点只有3个:定时器 + 客户端存储技术 + event(事件对象):
1、事件周期:从事件发生,到所有事件处理函数执行完毕的全过程:
3个阶段:
	1、捕获阶段:由外向内,记录着要发生的事件有哪些
	2、目标优先触发:目标元素->当前点击的实际发生事件的元素
	3、冒泡触发:由内向外,依次执行我们之前记录着的要发生的事件
2、*****获取事件对象event:

主流:会自动作为事件处理函数的第一个形参传入e

老IE:event; - 老IE全局有这个变量

兼容:event;//不光老IE可用,主流也可用

***获取鼠标的坐标/位置
获取鼠标相对于屏幕的坐标:e.screenX/Y
获取鼠标相对于浏览器窗口/客户端/文档显示区域的坐标:e.clientX/Y
获取鼠标相对于网页的坐标:e.pageX/Y
***阻止事件冒泡 - 笔试面试中

主流:e.stopPropation();

老IE:e.cancelBubble=true;

兼容:e.cancelBubble=true; //不光老IE可用,主流也可用

*****事件委托/利用事件冒泡 - 开发中常用:

提升网页性能,有了它我们的事件函数也可以简化为箭头函数
优化:如果多个子元素定义了相同 或 相似的事件操作,那么最好只给【父元素定义一次】

目标元素target:实际触发事件的元素

主流:e.target;

老IE:e.srcElement;

兼容:e.srcElement;//第3次见到小三上位,不光老IE可用,主流也可用

***组织浏览器的默认行为:

比如:a标签默认就可以跳转,提交按钮可以提交表单,右键自带一个弹出框,F12自带一个控制台,F5自带刷新,F11自带全屏...

主流:e.preventDefault();

老IE:e.returnValue=false;

兼容:e.returnValue=false;//不光老IE可用,主流也可用

新事件:

1、右键事件 - window.oncontextmenu

2、键盘事件:一般用于游戏开发比较多 + 都要搭配上键盘的键码

window.onkeydown - 按下和按住都会触发,任何键盘按键都可以触发

window.onkeypress - 按下和按住都会触发,但是只有数字、字母、回车、空格可以触发,其他人不行

window.onkeyup - 松开按键才会触发,任何键盘按键都可以触发

获取键盘的键码

e.keyCode; - 可以获取到你按了哪个键,每个键都有自己对应的键码 eval(str) - 会悄悄的脱掉字符串的衣服再运算

this的指向 - 难点
  1. 单个元素绑定事件this->这个元素
  2. 多个元素绑定事件this->当前元素
  3. 箭头函数this->外部对象