事件高级：事件的绑定及取消、DOM事件流、事件委托

最新推荐文章于 2022-10-07 21:22:40 发布
最新推荐文章于 2022-10-07 21:22:40 发布
阅读量338 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39804990/article/details/125057999
版权

事件高级

1.事件基础

1.1事件对象

  • 事件处理函数：事件发生时用来处理事件的函数 obtn.onclick = function(){}
  • 事件对象：当事件发生的时候，浏览器会将事件相关信息保存在内置全局对象 window.event 当中
  • 取值：
    • 标准 IE：window.event
    • 低版本ff：事件处理函数的第一个参数
  • 属性
    • event.type：事件类型
    • event.clientX/Y：鼠标相对于屏幕的位置
    • event.target/srcElement：真正触发事件的对象
    • event.altKey, event.shiftKey, event.ctrlKey：功能键 按住-true 没有按-false
document.onclick = function(ev){
    // 事件对象
    // console.log(window.event);
    // console.log(event); // window可以省略
    // console.log(e); // 低版本ff，通过事件处理函数的第一个参数

    // 兼容
    var e = window.event || ev;
    console.log(e);

    console.log(e.type); // 事件类型 click
    console.log(e.clientX, e.clientY); // 鼠标位置 鼠标相对于屏幕的位置
    console.log(e.pageX, e.pageY);// 鼠标位置      相对于页面的位置

    // console.log(e.target, 11111); // 真正触发事件的对象
    // alert(e.srcElement, 2222); // 低版本IE 
    // console.log(this, 'this'); // document

    var target = e.target || e.srcElement;// 真正触发事件的对象

    console.log(e.altKey, e.shiftKey, e.ctrlKey); // 功能键 按住-true 没有按-false
}

2.绑定事件

  • 标准：标签.addEventListener(type[不加on]，fun，是否捕获)
  • IE：标签.attachEvent(type, fun)
  • 区别
    • ie事件类型要加on
    • ie没有捕获
    • ie绑定的事件倒序执行的
    • ie的this指向window
var oBtn = document.querySelector('button');
// 绑定事件
// 标准：标签.addEventListener(type[不加on], fun, 是否捕获)
oBtn.addEventListener('click', fun1);
oBtn.addEventListener('click', fun2);

// IE: 标签.attachEvent(type, fun)
oBtn.attachEvent('onclick', fun1);
oBtn.attachEvent('onclick', fun2);

// 兼容：两个方法之间的兼容，对其中一个做判断，有这个方法就使用，没有用另外一个
if( oBtn.addEventListener ){
    // 标准
    oBtn.addEventListener('click', fun1);
    oBtn.addEventListener('click', fun2);
}else{
    // IE
    oBtn.attachEvent('onclick', fun1);
    oBtn.attachEvent('onclick', fun2);
}

// 绑定事件
function bind(elem, type, fun){// elem-添加事件的元素 type-事件类型 fun-事件处理函数
    if( elem.addEventListener ){
        // 标准
        elem.addEventListener(type, fun);
    }else{
        // IE
        elem.attachEvent('on'+type, fun);
    }
}
bind(oBtn, 'click', fun1);

3.取消事件

  • 普通：标签.事件 = null
  • 标准：标签.removeEventListener(type[不加on], fun)
  • IE：标签.detachEvent(type, fun)
// 1.普通的添加事件
oBtn.onclick = function(){
    console.log('抽奖');

    // 取消事件   标签.事件 = null
    oBtn.onclick = null;
}
// 2.事件绑定添加的
bind(oBtn, 'click', chou);
function chou(){
    console.log('抽中100块');
    // 取消事件
    oBtn.onclick = null; // 无效
    // 标准：addEventListener()     标签.removeEventListener(type, fun)
    // oBtn.removeEventListener('click', chou);

    // IE: attachEvent()            标签.detachEvent(type, fun)
    // oBtn.detachEvent('onclick', chou);

    // 兼容
    if(oBtn.removeEventListener){
        oBtn.removeEventListener('click', chou);
    }else{
        oBtn.detachEvent('onclick', chou);
    }
}

4.DOM事件流

DOM事件流：事件的发生过程

  • DOM事件流：

    • 事件捕获阶段：事件发生时，丛window开始根据结构找触发事件的元素
    • 确认目标阶段：确认触发事件的元素
    • 事件冒泡阶段：由目标元素开始处理事件，事件完成后，会把事件根据结构依次往外传递，如果父元素有同类型的事件，触发父元素的事件
    // addEventListener(type, fun, 是否捕获)
// 是否捕获：true：在捕获阶段处理事件，默认false-在冒泡阶段处理事件
var oDiv = document.querySelectorAll('div');
oDiv[0].addEventListener('click', getClass, false);
oDiv[1].addEventListener('click', getClass, true); // 表示在捕获阶段处理事件
oDiv[2].addEventListener('click', getClass, false);
function getClass(){
    alert(this.className)
}

  • 阻止冒泡

    • 标准：e.stopPropagation()
    • IE：e.cancelBubble = true
    • 兼容：e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    oBtn.onclick = function(ev){
    console.log('我是按钮');
    // 阻止冒泡
    var e = window.event || ev;
    // e.stopPropagation();   // 标准
    // e.cancelBubble = true;  // IE
    // 兼容
    e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}

oDiv.onclick = function(){
    console.log('我是div');
    this.style.background = 'pink';
}

document.onclick = function(){
    console.log('我是document');
}

5.阻止默认行为

浏览器默认行为

​ submit默认提交表单

​ a标签默认跳转

​ 双击默认选中文字

​ 右击默认显示菜单

​ 图片拖拽默认保存

  • 普通：return false
  • 标准：e.preventDefault()
  • IE：e.returnValue = false
  • 兼容：e.preventDefault ? e.preventDefault() : e.returnValue = false;
// 标签.事件
oA.onclick = function(){
      console.log('哈哈哈哈哈');

      // 阻止默认行为
      return false;
}
bind(oA, 'click', function(ev){
    console.log('今天周一');

    // 阻止默认行为
    // return false;

    var e = window.event || ev;
    // e.preventDefault();   // 标准
    // e.returnValue = false;  

    // 兼容
    e.preventDefault ? e.preventDefault() : e.returnValue = false; 
});

6.键盘事件

  • onkeydown： 键盘按键按下

  • onkeypress： 键盘按键按下

    keyCode区分大小写，组合按键有问题

  • onkeyup： 键盘按键抬起

var text = document.querySelector('textarea');
// 按键按下
text.onkeydown = function(ev){
    var e = window.event || ev;
    console.log(e);
    console.log(e.key); // 具体的按键 a A区分大小写
    console.log(e.keyCode); // 按键的编码 不区分大小写 大写的编码  aA-65
    console.log(e.altKey,e.ctrlKey, e.shiftKey); // 功能键

    // ctrl+c 进行复制
    if(e.ctrlKey==true && e.keyCode == 67){
        console.log('复制');
    }
    // 回车-13 左-37 上-38 右-39 下-40
}
// 按键按下
text.onkeypress = function(ev){
    var e = window.event || ev;
    console.log(e);
    console.log(e.key); // 具体的按键 a A区分大小写
    console.log(e.keyCode); // 按键的编码 区分大小写 大写的编码  A-65  A-97
    console.log(e.altKey,e.ctrlKey, e.shiftKey); // 功能键

    // 组合键有问题
    if(e.ctrlKey==true && e.keyCode == 67){
        console.log('复制');
    }
    // 回车-13 左-37 上-38 右-39 下-40
}
// 按键抬起
text.onkeyup = function(ev){
    var e = window.event || ev;
    console.log(e);
    console.log(e.key); // 具体的按键 a A区分大小写
    console.log(e.keyCode); // 按键的编码 不区分大小写 大写的编码  aA-65
    console.log(e.altKey,e.ctrlKey, e.shiftKey); // 功能键

    // ctrl+c 进行复制   组合键正常
    if(e.ctrlKey==true && e.keyCode == 67){
        console.log('复制');
    }
    // 回车-13 左-37 上-38 右-39 下-40
}

7.事件委托

  • 事件委托(代理)：把事件添加给父元素代为处理，事件发生时让父元素找到具体的子元素处理事件
  • 优点：提高渲染性能，事件可以发生在未来，后期添加也有事件
  • 原理：事件冒泡
// 添加点击事件
	/* for(var i = 0; i<oLi.length; i++){
            oLi[i].onclick = function(){
                console.log('被点击了');
                this.style.background = 'pink';
            }
        } */
oUl.onclick = function(){
    console.log('被点击了');
    // console.log(this);
    // this.style.background = 'pink';

    // 获取真正触发事件的元素
    var target = event.target || event.srcElement;
    console.log(target);

    // 精准判断   只有是li 
    if(target.nodeName == 'LI'){
        // 是li标签
        target.style.background = 'pink';
    }
}
// 问题：后期添加的标签没有事件
oUl.innerHTML += '<li>哈哈哈哈哈</li>';

8.滚轮事件

  • 添加滚动事件：

    • chrome IE：标签.onmousewheel = function() ff添加不上，不会报错
    • ff：通过事件绑定 标签.addEventListener(“DOMMouseScroll”, fun)

  • 滚动方向：

    • ev.wheelDelta：上 120 下 -120
    • ev.detail 上 -3 下 3
// 添加滚轮事件
function wheel(elem, upFun, downFun) {// upFun, downFun :是函数，把函数作为参数传入
    // 添加滚轮事件
    // 标准、IE: onmousewheel
    elem.onmousewheel = scroll;

    // ff:通过事件绑定添加
    if (elem.addEventListener) {
        elem.addEventListener('DOMMouseScroll', scroll);
    }

    function scroll(ev) {
        console.log('滚动');
        var e = window.event || ev;
        // console.log(e);

        // console.log(e.wheelDelta); //标准 IE： 上120  下-120
        // console.log(e.detail); //ff: 上-3  下3

        var tag; // true-上  fasel-下
        if (e.wheelDelta) {
            // 标准 IE： 上120  下-120
            tag = e.wheelDelta > 0 ? true : false;
        } else {
            // ff: 上-3  下3
            tag = e.detail < 0 ? true : false;
        }

        // 最后根据tag值做不同的处理
        if (tag) {
            // 上   
            upFun(); // upFun = function up(){console.log('往上进行放大'); }
        } else {
            // 下
            downFun();// 
        }
    }
}

wheel(oDiv, up, down); // 把函数作为参数传入
function up(){
    console.log('往上进行放大');

}
function down(){
    console.log('往下进行缩小');
}
我爱RMB
关注
Javascript中的事件处理（事件注册、删除、委托）
m0_46420078的博客
11-29 1170
一、Javascript中的事件处理 1、事件 ：用户进行的某种操作 2、事件源：产生（触发 ）事件的对象 3、事件处理程序（事件处理函数 ）：当事件被触发后所执行的操作（代码） 4、事件的注册：让浏览器对象能够识别事件 （1）传统的方式注册 ：元素对象.事件名 = function（）{ 事件处理程序 } <b...
事件高级—（注册/绑定事件、删除/解绑事件、DOM事件流、事件对象、阻止事件冒泡、事件委托、常用的鼠标事件和键盘事件）
m0_59030524的博客
03-04 415
任务要求： 1.注册事件（绑定事件） 1.1 注册事件概述 给元素添加事件，称为注册事件或者绑定事件。 注册事件有两种方式：传统方式 和 事件监听注册方式。 1.1.1 传统注册方式 利用on 开头的事件onclick <button onclick="alert('hi~')"></button> btn.onclick = function() {}; 特点：注册事件的 唯一性 同一个元素同一个事件只能设置一个处理函数，最 后注册的处理函数将会 覆盖.
JS之事件冒泡、取消冒泡、事件委托
qq_35270769的博客
05-17 435
事件冒泡：当子元素事件触发，会沿着包含关系，向上传递，每一级都会接收到事件。 <style> #divOne { width: 300px; height: 300px; background-color: red; } #divTwo { width: 150px; height: 150px; background-color: yell
关于实现点击事件的绑定与取消
LanBuff的博客
06-05 1306
很多情况下，比如我们想对一个文本框或者按钮进行事件绑定的时候，一般直接在他上面写上什么onclick等等的事 件，但是对于这样的时间的去除，比如希望一个按钮在这里仅仅按下一次，然后再次按下的时候就不能有什么效果了， 这就需要对事件 的监听和绑定还有取消实行动态的机制，下面我们来演示一个小例子来说明一下事件的绑定和取消机 制/ test6.html fun
取消事件所有委托方法
weixin_30951231的博客
07-30 401
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Reflection; using System.ComponentModel; namespace ConsoleApplication3 { class Progra...
取消事件对象（DOM/IE）
希希的博客
03-01 342
DOM中的事件对象：（符合W3C标准）    preventDefault()        取消事件默认行为    stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用。    stopPropagation()      取消事件冒泡对当前节点无影响。 IE中的事件对象：    cancelBubble()    
事件高级用法及兼容写法
07-08
### 事件高级用法及兼容写法 #### 一、事件基础 1. **事件函数** ```javascript obj.on-事件名 = fn; ``` 定义事件时，事件函数并不会立即执行，只有当触发相应事件时才会执行。 2. **事件对象** 当...
JavaScript事件高级技巧与兼容性处理
4. **事件流**：事件流描述了事件在DOM树中的传播路径，分为冒泡和捕获两个阶段。冒泡是从最具体的元素到最不具体的元素（即window对象），而捕获则相反。通过`event.stopPropagation()`（兼容性写法：`window.event...
【DOM】JavaScript-事件高级-注册事件-事件流-事件对象-事件冒泡-委派-鼠标键盘事件
YK菌的博客
01-05 403
文章目录1. 注册事件（绑定事件）1.1 注册事件概述传统注册方式方法监听注册方式1.2 addEventListener 事件监听方式1.3 attachEvent 事件监听方式 IE8-1.4 注册事件兼容性解决方案2. 删除事件（解绑事件）2.1 删除事件的方式2.1.1 传统注册方式2.1.2 方法监听注册方式2.2 删除事件兼容性解决方案3. DOM事件流3.1 DOM 事件流分为3个阶段：3.2 注意4. 事件对象4.1 什么是事件对象4.2 事件对象的使用语法4.3 事件对象的兼容性方案4.4
JavaScript高级技巧：DOM操作与事件处理
理解DOM（Document Object Model） 在网页开发中，DOM（Document Object Model）是非常重要的概念。它是浏览器将网页文档表示为一棵树形结构的方式，通过DOM，可以轻松地操作和管理网页的内容、结构和样式。接下来...
HTML——jQuery之事件绑定、取消事件绑定及事件委托
qq_45152044的博客
12-16 1601
jQuery之事件绑定、取消事件绑定及事件委托
事件的取消
jiaojsun的博客
08-27 225
1. 第一种事件绑定形式的取消obj.onclick=fn;这种形式的取消。function fn1() { alert(1); } function fn2() { alert(2); }document.onclick = fn1; document.onclick = null;//取消2. 第二种事件绑定形式的取消ie : obj.detachEvent(事件名称，事件函数)
取消默认事件
zhangxingyu126的博客
05-31 764
取消默认事件event.consume()方法
DOM中取消默认行为的执行
weixin_42442123的博客
11-06 359
return false; 用的最多 e.preventDefault(); DOM标准方法 e.returnValue = false; IE的老版本，非标准方式 &lt;a id="link" href="http://www.baidu.com"&gt;baidu&lt;/a&gt; &lt;script&gt; var link = docume...
事件取消和阻止
qq_36411712的博客
03-09 2141
取消冒泡： W3C标准 event.stopPropagation();但不支持ie9以下版本 IE独有event.cancelBubble = true;封装 stopBubble(event);function stopBulle(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ eve...
事件绑定和事件取消
weixin_72686458的博客
10-07 306
事件绑定 标准浏览器 标签.addEventListener(事件类型(不加on),事件处理函数,是否捕获(false)) IE低版本 标签.attachEvent(事件类型(加on),事件处理函数) 事件取消(解绑) 普通事件解绑 标签.事件类型 = null 事件绑定解绑 标准浏览器 标签.removeEventListener(要解绑的事件类型，要解绑的事件处理函数，是否捕获) IE低版本 标签.detachEVe
js取消默认事件和事件绑定
u013464954的专栏
10-12 4746
1.默认事件： 浏览器本事具备的一些功能，如鼠标右键菜单，a标签跳转页面。 如果要阻止这些默认行为，可以用return false; w3c中定义了ev.preventDefault()；这个不兼容IE11以下。 document.oncontextmenu=function (ev){ return false;//阻止右键菜单的动作 //
Javascript中的DOM的事件合集-事件流·事件委托·取消事件冒泡和捕获
1900's 88 keys的博客
11-30 785
DOM的事件-事件流·事件委托·取消事件冒泡和捕获 文章目录DOM的事件-事件流·事件委托·取消事件冒泡和捕获前言事件的冒泡（Bubble）事件的捕获事件传播的三个阶段捕获阶段目标阶段冒泡阶段事件委托target || currentTargettargetcurrentTarget取消事件的冒泡和捕获bubblesstopPropagation()stopImmediatePropagation()cancelBubble兼容写法 前言 当有以下图片的内容时，如果我们用鼠标点击中间3方框,是不是也同时点
javascript--解除事件绑定
东篱的博客
02-28 2170
stopPropagation(); w3c取消冒泡 cancelBubble=true; ie取消冒泡 preventDefault(); w3c取消事件效果 returnValue = false; ie取消事件效果 添加移除事件~ 银时 银时 成步堂 走开银酱 异议阿依去找小御
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我爱RMB

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值