JavaScript事件

最新推荐文章于 2024-04-25 20:29:33 发布
最新推荐文章于 2024-04-25 20:29:33 发布
阅读量113 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41927206/article/details/89142759
版权

多个事件的绑定

  • DOM对象.addEventListener(类型，事件处理函数,是否冒泡)

    类型: 表示监听事件类型的字符串。

    事件处理函数: 当这个事件处理的时候的操作

    是否支持冒泡: 当设为true 时，沿着DOM树向上冒泡的事件，不会触发事件。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。

    注意:有兼容性问题，在IE9以后的版本才支持，老版本浏览器只支持attachEvent().

  • DOM对象.attachEvent(‘on’ + 事件名称, 事件处理函数)

    注意:IE9之前用这个

处理兼容性代码

function addEventListener(element, event, fn) {
    //如果没有这个属性默认是undefined
    if(element.addEventListener) { 
        // 默认冒泡
        element.addEventListener(event, fn);
    } else {
        element.attachEvent('on' + event, fn);
    }
}

移除事件

// 第一种方式的移除事件
var btn = document.getElementById('btn');
btn.onclick = function () {
    console.log('hello');
    // 移除事件
    btn.onclick = null;
}

// 第二种方式的移除事件
btn.addEventListener('click', fn, fasle);
// 移除事件,如果想移除事件，那么绑定事件的时候不能使用匿名函数
btn.removeEventListener('click', fn);

function fn () {
    console.log('hello');
}

// 第三种方式的移除事件，attach意思是附加，detach意思是分离
btn.attachEvent('onclick', fn);
// 移除事件,如果想移除事件，那么绑定事件的时候不能使用匿名函数
btn.detachEvent('onclick', fn);

function fn () {
    console.log('hello');
}

处理兼容性代码

function removeEventListener(element, event, fn) {
    //如果没有这个属性默认是undefined
    if(element.removeEventListener) { 
        // 默认冒泡
        element.removeEventListener(event, fn);
    } else {
        element.detachEvent('on' + event, fn);
    }
}

事件冒泡

事件冒泡简介

addEventListener 的第三个参数为false的时候为事件冒泡，当参数为true的时候为事件捕获

事件冒泡：会从最内层一层一层冒到最外层的元素

事件捕获：会从最外层一层一层到最内层元素

事件的三个阶段

1. 捕获阶段
2. 执行当前点击的元素
3. 冒泡阶段

HTML代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件冒泡</title>
    <style>
        div{
            padding: 20px;
            background-color: aliceblue;
        }
        #div2{
            background-color: red;
        }
        #div3{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>
</html>

JavaScript代码如下

		// 此时为事件冒泡
		var arr = [div1, div2, div3];

        for (var i = 0; i < arr.length; i++) {
            arr[i].addEventListener('click', function () {
                console.log(this.id);
            }, false);
        }
        // 输出结果 ： div3 div2 div1

	// 此时为事件捕获
	var arr = [div1, div2, div3];

    for (var i = 0; i < arr.length; i++) {
        arr[i].addEventListener('click', function () {
            console.log(this.id);
        }, true);
    }
    // 输出结果 ： div1 div2 div3

事件冒泡注意的地方

onlick和attachEvent这两个绑定的方式，不能设置事件捕获，只能用默认的事件冒泡。

事件冒泡的作用（事件委托）

  • e.target :是真正触发事件的对象。
  • e.currentTarget:代表this

案例

<!-- 单击li背景色变红 -->
<ul id="ul">
        <li>001</li>
        <li>002</li>
        <li>003</li>
        <li>004</li>
</ul>


ul.addEventListener('click', function (e) {
            e.target.style.background = 'red';
		}, false);

事件对象

事件对象简介

通过事件对象，可以获取到事件发生的时候喝事件相关的一些数据

var btn = document.getElementById('btn');
btn.onclick = function (e) {
    // DOM标准中，是给事件处理函数一个参数
    // e就是事件对象
    // 在老版本的IE中获取事件对象的方式 window.event
    e = e || windown.event; // 处理浏览器兼容问题
}

事件对象的属性和方法

1. e.eventPhase（了解）

  • 1捕获阶段
  • 2目标阶段
  • 3冒泡阶段

2. e.target

  • 获取真正触发事件的对象浏览器兼容问题，在老版本IE中指的是srcElement
  • 处理兼容：var target = target || srcElement

3. e.currentTarget

  • 指this（事件处理函数所属的对象）

**4.e.type **

  • 获取事件名称

    //优势,可以根据不同的事件名称做不同的事情，节省代码。
	box.onclick = fn;
    box.onmouseover = fn;
    box.onmouseout = fn;

    function fn(e) {
      e = e || window.event;
      switch (e.type) {
        case 'click': 
          console.log('点击box');
          break;
        case 'mouseover': 
          console.log('鼠标经过box');
          break;
        case 'mouseout': 
          console.log('鼠标离开box');
          break;
      }
    }

5. e.clientX 、e.clientY

  • 获取的鼠标在浏览器可视区域的坐标

    注意：是相对于可视区的坐标值，原点在可视区的左上角

6. e.pageX 、e.pageY（有兼容性问题，IE9之后支持）

  • 相对于整个页面的坐标

    var img = document.getElementsByTagName('img');
document.onmousemove = function (e) {
    var e = e || window.event;
    // 当有滚动条的时候，必须用pageX（相对于页面的坐标值）
    img[0].style.left = e.pageX + 'px';
    img[0].style.top = e.pageY + 'px';
}

    处理兼容性问题：pageX = clientX + 页面滚动出去的距离

    function getPage(e) {
    var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
    var pageY = e.pageX || e.clientY + getScroll().scrollTop;
    return {
        pageX:pageX,
        pageY:pageY
    }
}

  • 页面滚动出去的距离

    • 谷歌浏览器

      • document.body.scrollLeft 横向距离
      • document.body.scrollTop 纵向距离

    • 有些浏览器

      • document.documentElement.scrollLeft 横向距离

      • document.documentElement.scrollTop 纵向距离

        document.documentElement获取的是html

    • 处理滚动距离的兼容性

      function getScroll() {
    // 如果获取不到那么他的值为0，这样就可以用 ||运算符来进行处理兼容
    var scrollLeft = document.body.scrollLeft  || document.documentElement.scrollLeft;
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
}

  • 例题（获取盒子在页面上的位置）

    • offsetLeft:横向偏移
    • offsetTop:纵向偏移
      在这里插入图片描述

7. e.preventDefault()方法（有兼容性问题）

  • 取消默认行为

  • 处理兼容性问题

    ​

    if (e.preventDefault) { // 如果她不存在返回undefined
    e.preventDefault();
} else {
    e.returnValue = false; // ie老版本中处理默认行为
}

// 推荐使用return false来处理默认行为

8. e.stopPropagation()方法 （有兼容性问题）

  • 阻止冒泡

  • 处理兼容性问题

    if (e.stopPropagation) { // 如果她不存在返回undefined
    e.stopPropagation();
} else {
    e.cancelBubble = true; // ie老版本中处理默认行为
}

9. e.keyCode

  • 获取键盘按键的编码

    A:65

    a:97

    // 键盘事件
// keydown 键盘按下的时候
// keyup   键盘弹起的时候
// keydown 和 keyup的区别  keydown的时候我们所按的键还没有落入文本框
// keyup键盘弹起的时候按的键已经落入文本框
var txt = document.getElementById('txt');
txt.onkeydown = function (e) {
// 判断当前用户按下的键是否是数字
e = e || window.event;
// 如果e.keyCode 的值在 48-57 是数字
// e.keyCode  键盘码
// console.log(e.keyCode);
// 按下后退键  8，删除一个字符 
if ((e.keyCode < 48 || e.keyCode > 57) && e.keyCode !== 8) {
    // 非数字
    // 取消默认行为
    e.preventDefault();
    // return false;  如果用return false 取消默认行为那么后续的代码将不会再执行
}
    }
初心不变0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript 事件
qq_42839746的博客
09-14 1129
JavaScript使我们有能力创建动态页面，网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。
Javascript事件
qq_61483796的博客
09-03 818
JavaScript事件相关知识，及相关细节
常见的事件
weixin_39427688的博客
04-17 524
常见的事件： 1. 点击事件： 1. onclick：单击事件 2. ondblclick：双击事件 2. 焦点事件 1. onblur：失去焦点 2. onfocus:元素获得焦点。 3. 加载事件： 1. onload：一张页面或一幅图像完成加载。 4. 鼠标事件： ...
js基础知识（2）
智商不在服务区的博客
04-25 1005
addEventListener() 方法用于向指定元素添加事件处理程序（事件句柄handler）。参数1：事件名称必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。例如，使用 click ,而不是使用 onclick。参数2：function 必须。指定要事件触发时执行的函数。注意：事件对象会作为第一个参数传入函数。参数3：useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。true - 事件处理程序（事件句柄）在捕获阶段执行false默认。
javascript事件绑定学习要点
10-22
主要介绍了javascript事件绑定学习要点,主要包含下面四个方面1.传统事件绑定的问题，2.W3C事件处理函数，3.IE事件处理函数，4.事件对象的其他补充，有需要的小伙伴可以参考下
javascript事件问题
10-29
咱们都知道，在DOM事件模型中，有捕获和冒泡两个阶段，而在IE事件模型中，只有冒泡阶段。写在html里的事件响应函数只有在冒泡阶段才会被执行
JavaScript 事件处理 事件绑定 示例代码
06-27
事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例...
jem.js:Javascript 事件管理器
06-04
jem.js（Javascript 事件管理器） 这是一个 Javascipt 库，可帮助我们编写事件驱动的 Javascript 代码。 没有依赖项，没有 jQuery，没有其他库。 这与 DOM 无关。 jem.js 用于您的自定义事件。 欢迎任何形式的...
JavaScript事件机制
08-30
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发⽣时执⾏，⽐如当⽤户点击某个 HTML 元素时。
JavaScript中常见的五种事件
weixin_50993868的博客
12-01 1402
鼠标事件：与鼠标交互相关的事件，包括点击、双击、鼠标移动、鼠标悬停、鼠标按下和释放等。页面事件：与整个页面相关的事件，包括页面加载完成、页面卸载、窗口大小改变、滚动等。表单事件：与表单元素交互相关的事件，包括表单提交、表单重置、输入内容改变等。键盘事件：与键盘交互相关的事件，包括按键按下、按键释放、键盘输入等。编辑事件：与文本编辑相关的事件，包括复制、粘贴、剪切、选中文本等。的CSS类，设置了一个红色的正方形盒子，并为其添加了鼠标悬停效果。处理鼠标点击事件，将盒子的背景颜色改为绿色；
javaScript中的事件
happy_kx的博客
03-28 2342
1.事件的概念 在js中的事件是：用户在页面上操作，然后外面要调用函数来处理。 比如： 1.点击了登录按钮，调用登录函数执行登录操作 2.鼠标拖动，调用函数实现拖动 事件触发： 用户在页面上操作（如点击按钮，鼠标话滚动，鼠标点击，鼠标松开，文本获取焦点等...）,就是事件触发。 2.事件的模式: JavaScript有两种事件实现模式: 内联模式, 脚本模式. 内联模式： 例如： <input type="button" value="按钮" onclick=...
JS的事件介绍
热门推荐
cnds123的专栏
09-29 1万+
JS事件，就是用户或浏览器本身的某种行为，一般是用户对页面的一些动作引起的，例如，单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。JS（JavaScript）与HTML 之间的交互是通过事件（event）实现的，或者说，事件是JavaScript和DOM之间进行交互的桥梁。 一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onl
javaScript常见事件的使用、原理及案例演示【超详篇】
weixin_72083767的博客
01-01 2233
javaScript常见事件的使用、原理及案例演示【超详篇】
JavaScript事件介绍
西凉的悲伤博客
08-15 353
事件是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动（即运行一些代码）。事件是在浏览器窗口内触发的，并倾向于附加到驻留在其中的特定项目。这可能是一个单一的元素，一组元素，当前标签中加载的 HTML 文档，或整个浏览器窗口。有许多不同类型的事件可以发生。用户选择、点击或将光标悬停在某一元素上。用户在键盘中按下某个按键。用户调整浏览器窗口的大小或者关闭浏览器窗口。网页结束加载。表单提交。
一文读懂 JavaScript 事件
02-12 694
什么是事件模型，什么是事件流
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值