js-事件对象

最新推荐文章于 2024-02-01 09:19:56 发布

加油，加油，八嘎

最新推荐文章于 2024-02-01 09:19:56 发布

阅读量1.1k

点赞数 2

本文链接：https://blog.csdn.net/aaaaaabaaaaab/article/details/104862952

版权

事件对象-逆战班

事件类型

事件对象.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