简单理解js中的事件对象

最新推荐文章于 2024-09-16 17:42:02 发布
最新推荐文章于 2024-09-16 17:42:02 发布
阅读量463 收藏 2
点赞数
文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ggbee_/article/details/107185643
版权

基本概念：

1. 事件基础：在js中，事件是可以被JS侦测到的行为。

2. 事件函数：当事件被触发时，调用的函数。

//  事件函数：当事件被触发时，调用的函数。
var box = document.getElementsByName('box')[0];
box.onclick = function () {
    console.log('hello');
}
//onclick= 后面的函数部分就是事件函数。

3. 事件对象：

  • 当事件发生时，浏览器会将事件相关的信息保存到内置的全局对象window.event中，可以直接使用。

注意：有些版本的火狐不支持event属性，返回undefined，所以获取不到事件对象；我这个可能因为我的是最新版本的  你们可以自己测试一下。

document.onclick = function () {
    //  Chrome浏览器： MouseEvent {isTrusted: true, screenX: 324, screenY: 169, clientX: 324, …}
    //  IE浏览器：[object MSEventObj]{actionURL: "",  ...}
    //  火狐浏览器：click { target: html, buttons: 0, clientX: 120, clientY: 103, layerX: 120, layerY: 103 }
    console.log(event);
}
  • 标准浏览器的事件对象，当事件被触发时候，通过事件函数的第一个参数出入。
// 2. 方式二：
// 标准浏览器的事件对象，当事件被触发时候，通过事件函数的第一个参数出入
document.onclick = function (ev) {
    //  Chrome浏览器：MouseEvent {isTrusted: true, screenX: 210, screenY: 179, clientX: 210, …}
    //  IE9及其以上浏览器：[object MSEventObj]{actionURL: "",  ...}
    //  IE8及其以下  不支持  返回undefined
    //  火狐浏览器：click { target: html, buttons: 0, clientX: 220, clientY: 36, layerX: 220, layerY: 36 }
    console.log(ev);
}
  • 兼容的写法
document.onclick = function (ev) {
    ev = ev || event;
    //  Chrome浏览器：MouseEvent {isTrusted: true, screenX: 210, screenY: 179, clientX: 210, …}
    //  IE浏览器：[object MSEventObj]{actionURL: "",  ...} 
    //  火狐浏览器：click { target: html, buttons: 0, clientX: 220, clientY: 36, layerX: 220, layerY: 36 }
    console.log(ev);
}

3.1 事件对象中的属性

  1. 获取当前触发事件类型；ev.type;

  2. 获取当前触发的对象；ev.target;     在IE8及其以下写ev.srcElement来获取对象。

    •  兼容性获取： var target = ev.target || ev.srcElement;

  3. 获取当前点击的位置，相对于可视区窗口;  ev.clientX, ev.clientY

  4. 获取当前点击的位置，相对于页面;    ev.pageX, ev.pageY

  5. 是否按下了功能键，ev.shiftKey，ev.ctrlKey，ev.altKey

document.onclick = function (ev) {
    ev = ev || event;

    // 1. 获取当前触发事件类型
    console.log(ev.type);   //click
    // 2. 获取当前触发的对象
    // console.log(ev.target === document.documentElement); //html
    // console.log(ev.target); 
    console.log(ev.srcElement === document.documentElement);
    // 需要在IE8及其以下写ev.srcElement来获取对象


    // 3. 获取当前点击的位置，相对于可视区窗口;
    console.log(ev.clientX, ev.clientY);

    // 4. 获取当前点击的位置，相对于页面;
    console.log(ev.pageX, ev.pageY);
    // IE8及其之下不支持 

    // 5. 是否按下了功能键
    console.log(ev.shiftKey);   //是否按下了shift键
    console.log(ev.ctrlKey);    //是否按下了ctrl键
    console.log(ev.altKey);     //是否按下了alt键

}

事件的绑定

1. 常规的事件绑定的方法

function fn1() {
    console.log(1);
}

function fn2() {
    console.log(2);
}

box.onclick = function () {
    fn1();
}
box.onclick = function () {
    fn2();
}

缺点：这种方式事件绑定只能绑定一个事件，点击结果为2。 后面的会覆盖前面的绑定事件

2. 方式二：元素.addEventListener('不加on的事件类型'，事件处理函数，是否捕获)；

box.addEventListener('click', fn1, false);
box.addEventListener('click', fn2, false);
// 点击结果：1  2

可以实现多个事件的绑定，支持标准浏览器；IE8及其以下不支持；

3. IE8- 的事件绑定  元素.attachEvent('加on的事件类型'，事件处理函数)；

box.attachEvent('onclick', fn1);
box.attachEvent('onclick', fn2);
// 点击结果 2  1

两者的区别: 元素.addEventListener('不加on的事件类型'，事件处理函数，是否捕获)

元素.attachEvent('加on的事件类型'，事件处理函数)

  • 1. addEventListener 方法比attachEvent多一个是否的捕获的参数;
  • 2. addEventListener 的事件类型不需要加on，而且addEventListener 是顺序执行绑定的函数，而attachEvent是倒叙执行;
  • 3. addEventListener支持标准的浏览器，attachEvent支持IE8及其以下的浏览器;
  • 4. attachEvent事件的事件源始终指向window; addEventListener 指向当前触发事件的对象;

 

4. 绑定事件的兼容性写法：

function bind(ele, event, callback) {
    if (ele.addEventListener) {
        ele.addEventListener(event, callback, false);
    } else {
        ele.attachEvent('on' + event, callback);
    }
}

// 调用
bind(box, 'click', fn1);
bind(box, 'click', fn2);
//  标准输出  1  2
//  IE8-    输出  2   1

事件的解绑

IE浏览器解绑： 元素.detachEvent(type,function);

标准浏览器解绑：元素.removeEventListener('不加on的事件类型'，事件处理函数，是否捕获);

// 解绑事件的兼容性写法
function unbind(ele, event, callback) {
    if (ele.removeEventListener) {
        ele.removeEventListener(event, callback, false);
    } else {
        ele.detachEvent('on' + event, callback);
    }
}
// 绑定事件的兼容性写法
function bind(ele, event, callback) {
    if (ele.addEventListener) {
        ele.addEventListener(event, callback, false);
    } else {
        ele.attachEvent('on' + event, callback);
    }
}
// 调用
bind(box, 'click', fn1);
bind(box, 'click', fn2);
unbind(box, 'click', fn2);
// 输出结果 1

事件流

DOM事件流分为3个阶段：事件的捕获阶段，目标阶段，冒泡阶段；

捕获阶段：事件的传播是从不具体的文档传递到具体的执行事件的目标对象；

在绑定事件addEventListener时候最后一个参数为true表示捕获事件；

<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>

<script>
    var box1 = document.querySelector('.box1');
    var box2 = document.querySelector('.box2');
    var box3 = document.querySelector('.box3');

    function fn1() {
        console.log(1);
    }

    // 点击获取事件   捕获
    box1.addEventListener('click', fn1, true);
    box2.addEventListener('click', fn1, true);
    box3.addEventListener('click', fn1, true);
</script>

在执行过程中，单击box3元素，会执行点击事件，首先box1执行，然后将事件向下传递到box2,box3执行点击事件，所以会打印三次1。

目标阶段：通过捕获确定具体触发事件的元素；执行具体的事件函数；

冒泡阶段：事件的传递是从具体的事件目标向父元素传递直到传递给最外层的window；

在JS中，默认是冒泡事件的执行机制；

<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>

<script>
    var box1 = document.querySelector('.box1');
    var box2 = document.querySelector('.box2');
    var box3 = document.querySelector('.box3');

    function fn1() {
        console.log(1);
    }

    // 点击获取事件  不捕获 即使冒泡事件
    box1.addEventListener('click', fn1, false);
    box2.addEventListener('click', fn1, false);
    box3.addEventListener('click', fn1, false);

</script>

在执行过程中，单击box3元素，会执行点击事件，首先自己执行，然后将事件传递到box2,box1都会执行点击事件，所以会打印三次1。

 

阻止事件冒泡：是指子元素执行事件之后，阻止子元素再给父元素传播事件

  • 标准浏览器  ev.stopPropagation();
  • IE8- 浏览器 ev.cancelBubble=true；

兼容写法：

// 兼容写法
function stopPropagation(ev) {
    ev = ev || event;
    if (ev.stopPropagation) {
        ev.stopPropagation();
    } else {
        ev.cancelBubble = true;
    }
}

事件默认行为

给一些元素设置一些特殊的操作;  如：a标签默认会跳转页面，右击鼠标会出现菜单。当我们不在需要这些行为的时候 我们我可以阻止事件的默认行为;

阻止事件的默认行为的方式：

  1. 事件添加的事件，return false;
  2. 元素.addEventListener的方式阻止   ev.preventDefault();
  3. 元素.attachEvent 的方式阻止   ev.returnValue = false;
<a href="https://www.baidu.com">百度</a>
<script>
    // 事件的默认行为：给一些元素设置一些特殊的操作;  a标签默认会跳转页面，右击鼠标会出现菜单
    // 当我们不在需要这些行为的时候 我们我可以阻止事件的默认行为;
    // 阻止事件的默认行为的方式
    // 1. 事件添加的事件，return false;
    // 2. 元素.addEventListener的方式阻止   ev.preventDefault();
    // 3. 元素.attachEvent 的方式阻止   ev.returnValue = false;

    // var a = document.querySelector('a');
    var a = document.getElementsByTagName('a')[0];
    // a.addEventListener('click', function (ev) {
    //     ev.preventDefault();
    // });

    a.attachEvent('onclick', function (ev) {
        ev = ev || event;
        ev.returnValue = false;

    });


</script>

键盘事件

按键按下ev.keypress ev.keydown  按键抬起ev.keyup  按键对应的ASCII码值ev.keyCode， 只有在能影响用户输入的元素和window上面，才会存在键盘事件

//  可以输入任何字符
window.addEventListener('keydown', function (ev) {
    console.log(ev.keyCode);
});

// 只能输入字符类的键，不能输入功能键  如ctrl, shift...
window.addEventListener('keypress', function (ev) {
    console.log(ev.keyCode);
});

// 按键弹起时候执行
window.addEventListener('keyup', function (ev) {
    console.log(ev.keyCode);
});

滚轮事件

鼠标滚轮可以上下滚动，也会被JS监听到，称之为滚轮事件。每个浏览器的标准不同。

  1. 标准和IE8+浏览器  元素.onmousewheel=函数;
  2. 火狐浏览器  元素.addEventListener('DOMMouseScroll',执行函数, false);
// 标准和IE8+浏览器
window.onmousewheel = function () {
    console.log('滚动了');
}


// 火狐浏览器 
window.addEventListener('DOMMouseScroll', function () {
    console.log('滚动了');
}, false)

获取滚轮的滚动信息：

  1. 标准和IE8+浏览器 ev.wheelDelta;
  2. 火狐浏览器  ev.detail;
// 标准和IE8+浏览器
window.onmousewheel = function (ev) {
    ev = ev || event;
    // 向下滚动-120
    // 向上滚动120
    console.log(ev.wheelDelta);
}


// 火狐浏览器 
window.addEventListener('DOMMouseScroll', function (ev) {
    ev = ev || event;
    // 向上滚动 -3
    // 向下滚动 3
    console.log(ev.detail);
}, false)

兼容性获取滚动值：

// 兼容性写法  获取滚轮事件的信息
function wheelDelta(ev) {
   ev = ev || event;
   if (ev.wheelDelta) {
      // 标准浏览器和IE8+浏览器
      return ev.wheelDelta;
   } else {
       // 火狐浏览器 
       return ev.detail * -40;
    }
}

事件委托

又称事件代理， 事件委托就是利用事件冒泡，只指定一个事件处理函数，就可以管理某一类型的所有事件。

实现：将事件添加到父元素身上，当事件发生的时候，父元素会去找对应触发事件的子元素即ev.target/ev.srcElement去处理。

好处：1、节省性能，不需要给每个子元素绑定事件；2、新添加的元素也动态的绑定了之前的事件

案例：利用事件委托，点击li，给对应的li添加背景

<ul id="list">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
    <li>55555</li>
</ul>
<script>
    var ul = document.getElementById('list');
    var li = ul.getElementsByTagName('li');
    // 事件委托
    ul.onclick = function (ev) {
        var ev = ev || event;
        var target = ev.target || ev.srcElement;
        
        if (target.nodeName === 'LI') {
            target.style.backgroundColor = 'skyblue';
        }
    }
    // 新加元素
    var newLi = document.createElement('li');
    newLi.innerHTML = '新事件';
    ul.appendChild(newLi);
</script>

 

 

GGGGGG.enough
关注
JS动态给对象添加事件的简单方法
12-04
在JavaScript中，动态地给对象添加事件是常见的需求，特别是在构建交互式的Web应用程序时。这里我们将深入探讨如何使用JavaScript来实现这一功能，并讨论浏览器兼容性问题。 首先，我们需要理解两个主要的方法来...
ihtml2document能不能根据id获取dom_DOM事件流和冒泡、捕获
weixin_39560002的博客
12-01 88
事件流描述的是从页面中接受事件的顺序。事件最早是在IE3和Netscape Navigator2中出现的，在IE4和Navigator4发布时，这两种浏览器都提供了相似但不相同的API。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流事件冒泡 即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点---《JavaScript高级程序设计》<divid=...
IE中object标签
梦之音的专栏
04-08 5007
以下规则适用于IE，此情况下IE配置为默认配置。 http://blog.csdn.net/snipps/article/details/5524882 object标签 如果你的计算机没有安装Jre classid值为clsid:8AD9C840-044E-11D1-B3E9-00805F499D93，直接安装，只需获得用户许可 classid值为clsid:CAFEEFAC-
JavaScript 事件处理
最新发布
qq_72013756的博客
09-16 1481
从零开始学前端
flash鼠标事件
iFlyingCoder的博客
09-02 5065
stage.addEventListener(MouseEvent.CLICK,MouseEventHandle1); function  MouseEventHandle1 (e:MouseEvent):void { trace("这是一个鼠标单击的处理"); } stage.doubleClickEnabled=true;//MouseEvent.DOUBLECLICK事件生效
事件对象
kalinara的博客
07-12 398
事件对象event
JS的事件对象详解
qq_44741577的博客
02-01 1630
当事件被触发时（如onclick事件），浏览器会自动创建一个名为event的JavaScript对象，这个对象存在于window对象中。window.event(window可以省略)表示当前正在处理的事件的详细信息（如事件类型（等）、目标元素、鼠标位置、按键状态等）。JavaScript中的事件对象是一个非常有用的工具，可以在事件处理程序中访问和操作许多方面的事件信息。event.type - 获取事件类型（例如，“click”、"mousedown"等）。
js中事件的处理与浏览器对象示例介绍
12-08
本文将详细介绍JavaScript中的事件处理以及浏览器对象的相关示例。 首先，我们来看一个简单的事件处理示例： ```html (this)" style="cursor:pointer;">点击了试一下 (this)" onmouseout="outD(this)">鼠标移动来...
javascript面向对象之对象的深入理解
10-24
本文通过实例代码深入剖析了JavaScript对象的概念，并讨论了对象如何在编程中被创建和使用。 在描述中，我们了解到JavaScript面向对象程序设计的核心思想是将程序中的几乎所有内容都看作对象，这包括函数、数组、...
深入理解js中的加载事件
10-20
当JavaScript代码中发生未捕获的错误时，`error`事件会触发在`window`对象上。`error`事件处理函数通常接收错误消息、错误发生的URL和行号作为参数。 ```javascript // DOM0级错误处理 window.onerror = function...
带你快速理解javascript中的事件模型
01-19
javascript中有两种事件模型：DOM0，DOM2。而对于这两种的时间模型，我一直不是非常的清楚，现在通过网上查阅资料终于明白了一些。 　一. DOM0级事件模型 　DOM0级事件模型是早期的事件模型，所有的浏览器都是支持...
【js基础】事件对象
在热爱技术的路上一直前行。
05-26 4198
1.什么是事件对象 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。 简单理解：事件发生后，跟事件有关的一系列信息数据的集合都放到整个对象里面，这个对象就是事件对象event，它有很多属性和方法。 结果： 可以将代码中的event换成e，当我们注册事件时，event对象会被系统自动创建，并以此传递给事件处理函数。我们不需要传递实参。 2. 事件对象的兼容性方案 3. 事件对象的常见属性和方法 事件对象属性和方法 说明 e.target 返
JS 之 事件Event对象详解（属性、方法、自定义事件）
热门推荐
weixin_45092437的博客
06-10 1万+
​ 事件event对象是指在浏览器中触发事件时，浏览器会自动创建一个event对象，其中存储了本次事件相关的信息，包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后，会自动将该对象作为参数传递给绑定的事件处理函数，我们可以在事件处理函数中通过访问event对象的属性和方法，来获取事件的相关信息，并做出后续的逻辑处理。
⑦JavaScript 事件
一个努力学习的程序猿
04-09 360
JavaScript事件事件对象 Event ※例 ※ （clientX cilentY）练习 ※ （使div可以跟随鼠标移动）事件的冒泡 ※ （Bubble）例事件的委派 ※事件的绑定 ※事件的传播 ※总结 ※※ 本人是个新手，写下博客用于自我复习、自我总结。 如有错误之处，请各位大佬指出。 学习资料来源于：尚硅谷 事件 • 关于事件实际上我们已经初步接触过了，指的就是用户与浏览器交互的一...
修改Electron的libcc(libchromiumcontent)源码，重新编译electron， 设置event.isTrusted为true...
weixin_34372728的博客
07-08 1563
VPN非常注意： 　　编译的过程需要使用VPN, 否者chromium的源代码无法下载， 后面会出现总总问题 　　Electron的编译环境， 推荐使用物理机： 　　win10 64位 英文版， 为了避免后期出现编译文件， 推荐使用64为的win10 　　node-v6.11.0-x64， node版本最好在6.x， 高版本的可能编译不成功 　　python-2.7.10.amd64， ...
JavaScript事件对象
qq_46112274的博客
12-25 1032
JavaScript事件对象1、事件对象1.1、什么是事件对象1.2、事件对相关的使用语法1.3、事件对象的兼容性解决方案1.4、事件对象常见的属性和方法 1、事件对象 1.1、什么是事件对象 1.2、事件对相关的使用语法 1.3、事件对象的兼容性解决方案 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
JS function document.onclick(){}报错Syntax error on token "function", delete this token - CSDN博客...
weixin_34132768的博客
11-30 307
原文:JS function document.onclick(){}报错Syntax error on token "function", delete this token - CSDN博客 JS function document.onclick(){}报错Syntax error on token "function", delete this token   function ...
【JavaScript笔记】函数知识总结
吾昂王
06-19 378
类 --> 对象(实例对象) -->(属性+方法) 属性：描述对象的(属性不存在输出undefined,不会报错) - 一般都是私有的 方法：对象具有的功能 - 分成主动的方法和被动的方法(事件) - 一般都是公有的 系统提供的类(构造函数) + 系统提供的对象(属性和方法) 方法和函数function的关系非常密切；方法由function来实现的。 ECMAScript 中的函数使用 function 关键字来声明，后跟一组参数以及函数体。 functio...
深入理解JavaScript中的Array对象
"这篇文档介绍了JavaScript中的Array对象，它是用于在一个变量中存储多个值的数据结构。文章详细讲解了创建Array对象的四种方法，并提到了Array对象的三个常见属性：constructor、length和prototype。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值