DOM事件高级

最新推荐文章于 2024-08-15 08:55:57 发布

逝者如斯夫。

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量70

点赞数

分类专栏： JS 文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_60323200/article/details/120039970

版权

JS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

注册事件概述

给元素添加时间，称为注册事件或绑定事件
注册事件有两种方式：传统方法和方法监听注册方式

传统注册方式

利用on开头的事件onclic
<button onclic= "alert('hi!)" > </button>
btn.onclic = function(){}
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

w3c标准推荐方式
addEventListener() 它是一个方法
IE9之前的IE不支持方法，可使用attachEvent()代替
特点：同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行

eventTarget.addEventListener(type, listener [, useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件是，就会执行事件处理函数。该方法接受三个参数：

type ：事件类型字符串，比如click、mouseover，注意这里不带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture:可选参数，是一个布尔值，默认是false
  btns[1].addEventListener('click',function) {

        alert('22');

      }

删除事件的方式

1.传统注册方式

eventTarget.onclick = null;

2.方法监听注册方式

eventTarget.removeEventListener(type, listener[, useCapture]);
eventTarget.detachEvent(eventNameWithOn, callback);

事件对象的常见属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie6-8使用
e.type	返回事件的类型比如 click mouseover 不带on
e.canceIBubble	该属性阻止冒泡非标准 ie6-8使用
e.returnValue	该属性阻止默认事件（默认行为）非标准 ie6-8使用比如不让链接跳转
e.precentDefault()	该方法阻止默认事件（默认行为）标准比如不让链接跳转
e.stopPropagation()	阻止冒泡标准

事件委托的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

常用的鼠标事件

1.禁止鼠标右键菜单 contextmenu

2.禁止鼠标选中 selectstart

<body>
    我是一段不愿意分享的文字
    <script>
      // 1.contextmenu 禁用右键菜单
      document.addEventListener("contextmenu", function (e) {
        e.preventDefault();
      });
      //2.禁止鼠标选中
      document.addEventListener("selectstart", function (e) {
        e.preventDefault();
      });
    </script>
  </body>

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要使用鼠标事件对象MouseEvent和键盘事件对象 KeyboardEvent

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标 IE9 + 支持
e.pageY	返回鼠标相对于文档页面的Y坐标 IE9 + 支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

<body>
    <script>
      document.addEventListener("click", function (e) {
        console.log(e.clientX);
        console.log(e.clientY);
        console.log("--------------");
        console.log(e.pageX);
        console.log(e.pageY);
      });
    </script>
  </body>

常用键盘事件

键盘事件	触发事件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发但它不识别功能键比如ctrl shift 箭头等

注意：