9月11日事件

1事件

1.事件:

对某个元素的某种操作

2.事件对象：

当某个事件触发时产生的对象，就是事件对象。

注：event使用前提，必须有事件， 不同的对象产生的事件不同。

3.事件的三要素：

事件元素 ， 事件类型 ，[事件对象]；

4.事件对象的兼容：

document.onclick = function(evt(这个名字可以随便写)){
var  e  = evt ||event;
}

事件对象拥有该事件的相关属性和方法。

5.元素在页面移动

元素要在页面发生位置移动时，元素必须设置绝对定位

核心问题：元素的移动实质是元素绝对定位时的left和top进行值的改变；

2.鼠标事件对象的属性

1.坐标属性：page，client，offset

pageX / pageY 相对于整个文档顶部和左侧的坐标 常用

clientX / clientY 相对于局部窗口的左侧和顶部的坐标

offsetX /offsetY 相对于内部元素的距离左侧和顶部的坐标 常用于拖拽

2.onmousemove鼠标移动，元素跟随

3.键盘事件

1.onkeyUp:

用户释放某一个按键时发生

2.onkeyDown:

用户按下按键时发生

3.onkeyPress:

【注意】:keyPress 的ctrl+回车返回值为10

用户按下按键，并且产生一个字符时发生（意思就是说按ctrl这样的按键没有效果的）

4.keyCode:

获取键盘按键值 字母 对应其ASCII值识别

【注意】ctrlKey:返回当事件被触发时，"Ctrl" 是否被按下,返回值为true or false

【注意】:键盘检测兼容写方法

var key = e.keyCode || e.which || e.charCode;

4.事件流

1.定义

当某个事件执行时，从子元素向父元素触发 或 从父元素向子元素触发 称为事件流

2.事件流的两种模式：

1.事件冒泡：

从子元素向父元素触发 —>当某个事件触发时，同样的事件会向父元素触发。

但并不是所有事件都会产生冒泡问题 onfocus (聚焦)onblur（取消焦点） onload（加载）不会产生冒泡问题

2.事件捕获

从父元素向子元素触发

5.阻止事件冒泡

e.stopPropagation(); 通过事件对象调用 阻止事件冒泡

e.cancelBubble = true;

e.stopPropagation ? e.stopPropagation():e.cancelBubble = true;

6.阻止浏览器默认事件

1.e.preventDefault?e.preventDefault():e.returnValue = false;

2.return false;