一、event对象
用来获取事物的详细信息:鼠标位置、键盘按键
e.clientX 鼠标距离元素左边距离
e.clientY 鼠标距离元素顶部距离
获得鼠标点击元素的位置
例如:
函数中 e = 事件源对象
IE浏览器低版本和高版本以及谷歌高版本支持 但是不代表所有浏览器支持
兼容写法:
var o=e||event;
document.onclick=function(e){
o=e||event;
alert(o.clientX+','+o.clientY);
}
二、keycode 获得键盘按钮
例如:
13表示回车键
拓展:
javascript中name既不是保留字,也不是关键字,因此用作变量时并不会报错;但是name是javascript内置的属性,所以用作变量时会引起其他bug
三、事件流
从页面中接收事件的顺序
事件冒泡
当一个元素接收到事件的时候会把他接收到的事件传给自己的父级,一直到window
无论使用哪种绑定方式都会触发事件冒泡
点击事件顺序是:先捕获再冒泡
冒泡型事件传播
例如:
点击最里面的空格(three)会显示1、2、3
捕获型事件传播
把false改为true 点击threediv显示顺序是 3-2-1
阻止事件冒泡
非IE下:event.stopPropagation(); 这个方法在IE8/7/5中不支持
IE下:event.cancelBubble=true;
例如:
点击three号div 只会跳一次3 阻止了two和one的冒泡 但是如果手动点击two和one还是会显示2和1
阻止默认行为
第一种
javascript:void(0)和 javascript 可以阻止默认行为
<a href="javascript:void(0)">内容内容</a>
第二种
return false
在原生JS中return false不可以阻止事件的冒泡和捕获
第三种方式:
document.oncontextmenu = function (e) {
var OEvent = e || event;
OEvent.preventDefault()
}
取消事件的绑定
removeEventListener
例如:绑定了两个事件 取消绑定设置取消第一个绑定事件 就只会显示第二个绑定事件
取消鼠标右键的默认行为
鼠标右击默认行为:oncontextmenu
例如:打开页面右键无反应 不会出现右键的默认菜单
拓展:
1、javascript中name既不是保留字,也不是关键字,因此用作变量时并不会报错;但是name是javascript内置的属性,所以用作变量时会引起其他bug
2、获取文档的可视区高度是有值的 当获取body的高度是0
3、if判断如果只有一句话 可以一行实现 每行结尾要加 ;