事件对象-逆战班
-
事件类型
-
事件对象.type可以得到事件类型
-
使用例子
window.onload = function(e){ var ev = e || window.event; console.log(ev.type); // load }
-
-
鼠标的按键信息
-
可以查看按下的是哪个键，事件对象.button属性
-
右键----buttons为2
-
左键----buttons为0
-
滚轮----buttons为1
-
使用例子
<body> <button id="btn">按钮</button> </body> <script type="text/javascript"> // 鼠标右键点击事件 btn.oncontextmenu = function(e){ var ev = e || window.event; console.log(ev.button); } </script>
-
-
键盘的按键码
-
在事件对象中，也有一个属性用来记录键盘码—键盘码，事件对象.keyCode
-
使用场景，通过点击回车可以提交表单.使用键码来判断按下的是哪个键盘。
-
常用键盘码
- 键盘码根据
-
8： 删除键（delete）
- 9： 制表符（tab）
-
16： 上档键（shift）
- 17： ctrl 键
-
27： 取消键（esc）
-
13 ----回车键
-
32----空格键
-
37 38 39 40 上下左右
-
字母和数字就是对应的ASCII码
-
有兼容问题—ie低版本不兼容
兼容写法 var keycode=e.keyCode||e.which; -
组合键(两个件一起按啥情况)，—返回值为布尔值
事件对象中有一个特殊的属性来判断是否按了特殊键， ctrl，shift，alt记录的都是布尔值 //对象.altkey 对象.shiftkey 对象.ctrlkey- 例子
document.onkeyup = function (e) { e = e || window.event keyCode = e.keyCode || e.which if (e.altKey && keyCode === 65) { console.log('你同时按下了 alt 和 a') } }
-
-
-
鼠标的坐标点 ----重要
-
鼠标相对于元素的坐标点
-
对象事件.offsetX 和 对象事件.offsetY
-
特点：元素可用区域的边缘到边框的位置--------不计算边框
-
例子
// 鼠标的坐标点
var box = document.querySelector(".box");
box.onclick=function(e){
var e = e || window.event;
// console.log(e);
// 鼠标相对于元素的坐标点 事件对象.offsetX 事件对象.offsetY
// console.log(e.offsetX,e.offsetY);
// 元素可用区域的边缘到光标的位置 - 不计算边框
} -
-
鼠标相对于可视窗口的坐标点
- 事件对象.clientX 事件对象.clientY
-
特点：只计算当前可视区域，不计算滚动过的距离
- 例子
window.onclick=function(e){ var e = e || window.event; // console.log(e.clientX,e.clientY); // 包含滚动过的距离的坐标点 事件.pageX，事件对象.pageY console.log(e.pageX,e.pageY); // 相当于 e.pageX = e.clientX + document.documentElement.scrollLeft } -
鼠标包含滚动过的距离的坐标点
-
事件.pageX，事件对象.pageY
-
包含滚动过的距离的坐标点
-
例子
window.onclick=function(e){ var e = e || window.event; // 包含滚动过的距离的坐标点 事件.pageX，事件对象.pageY console.log(e.pageX,e.pageY); // 相当于 e.pageX = e.clientX + document.documentElement.scrollLeft } 滚动条滚动距离
-
-
-
默认行为
-
a标签跳转，表单form提交，鼠标右击查看，
-
阻止默认事件
-
链接给 javascript:;
- 例子
<a href="javascript:;">百度</a> //阻止了a默认跳转 -
事件对象.preventDefault()
-
兼容写法
if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } -
例子
document.querySelector("a").onclick=function(e){ // 事件对象中有一个方法可以阻止标签的默认行为 var e = e || window.event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; //ie中使用 } console.log(123); }
-
-
在事件函数在最后，使用return false也能阻止
document.querySelector("a").onclick=function(){ console.log(123); // 第三种阻止默认行为的方法是在事件函数的最后使用return false return false }
-
对象打印
-
如果有些对象打印出来不像对象的样子，那就使用console.dir()来打印
console.log(new Date());
console.dir(new Date())
console.log(document.documentElement);
console.dir(document.documentElement);
鼠标事件
鼠标移入： mouseover - mouseenter
鼠标移出：mouseout - mouseleave
**********会发生冒泡事件***********
***********不会发生冒泡事件******
mouseenter和mouseleave不会冒泡
事件委托
-
概念
- 将自己的事件委托给别人去做 - 事件委托-委托给了父亲
在父元素的事件中，通过事件对象判断，判断是否准确点击到了子元素，再处理子元素点击的事情
- 将自己的事件委托给别人去做 - 事件委托-委托给了父亲
-
语法
- 事件对象.target 精准的事件源
-
好处
-
提高性能，因为子元素事件要绑定多次，事件委托，只需执行一次，
动态添加的子元素也会具有事件
-
-
兼容写法
-
var target = e.target || e.srcElement; if(target.nodeName == "B"){ console.log(e.target.innerText); }
-
-
例子
ul.onclick=function(e){
// console.log(123);
// 在父元素的事件中，通过事件对象判断，判断是否准确点击到了子元素，再处理子元素点击的事情
// 事件对象.target 精准的事件源
var e = e || window.event;
// console.log(e.target);
// if(e.target.nodeName == "B"){
// console.log(e.target.innerText);
// }
// 兼容写法
var target = e.target || e.srcElement;
if(target.nodeName == "B"){
console.log(e.target.innerText);
}
}
设置滚动条的值
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
input事件
input事件实时监听文本框内容发生改变的
document.querySelector("input").oninput=function(){
}
在Ie中使用onpropertychange
