JavaScript【十】JavaScript事件

这篇具有很好参考价值的文章主要介绍了JavaScript【十】JavaScript事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


JavaScript【十】JavaScript事件

🌟前言

哈喽小伙伴们,本文将收录在JavaScript【前端童子功】这个专栏里;这个专栏里边会收录一些JavaScript的基础知识和项目实战;希望大家可以多多支持,你们的支持就是我创作的动力;让我们一起来看看吧🤘

🌟事件

首先,什么是事件呢? 首先说JS就是为了实现一些动态的操作,而用户会有时候想去实现一些功能,如提交表单,鼠标点击等,就要在浏览器中触发这个事件,然后浏览器会感知(或者说捕获)到用户的这个行为,就会去响应处理这个事件。 这个就称之为 事件。

🌟绑定事件的方式:

🌟标签绑定事件:

<button onclick="click_fn()">click</button>
<script>
  function click_fn(){
    console.log(this);
  }
</script>

🌟Document对象来绑定事件:on+事件type

注意:重复监听某一事件,后者会覆盖前者,而不会两者先后触发

<button>click</button>
<script>
    var button1 = document.querySelector('button')
    button1.onclick=function(){
        console.log("第一个点击事件的方法");
    }
    var button2 = document.querySelector('button')
    button2.onclick=function(){
        console.log("第二个点击事件的方法");
    }      //第二个点击事件的方法会覆盖第一个方法,所以点击只会触发第二次的点击事件方法     
</script>

🌟 事件监听:使同一个对象的同一事件绑定多个事件处理程序。兼容IE9及以上。

为一个事件添加多个事件处理程序,解决了上面两种方法不能添加多个方法 更精细的控制事件监听器的触发阶段

🌟 绑定事件

语法:

element.addEventListener(事件名称(不写前缀),函数,布尔值(可不写));
参数 类型 描述
event string 表示事件类型的字符串 如:“click” “mouseover” 事件名称不添加on前缀
callback function 表示事件处理程序,函数中的this 指向添加监听的对象
bool boolean 可选,true表示在捕获阶段调用事件处理程序;false表示在冒泡阶段调用。后面会有事件流的详细解释
标签.addEventListener("事件名称",function(){},false);    //兼容到IE9及其以上

标签.attachEvent("事件名称",function(){})    //  ie8及以下

🌟 移除事件绑定

语法:

element.removeEventListener(event,callback,bool);
<button id="myBtn"></button>
<script type="text/javascript">
  var btn=document.getElementById('myBtn');
  function handle(){
    console.log(this);
  }
  
  //兼容到IE9及其以上
  btn.addEventListener('click',handle,false);      //添加事件处理程序
  btn.removeEventListener('click',handle,false);    //移除事件处理程序

  //  ie8及以下
  btn.attachEvent('onclick',handle);       // 添加
  btn.detachEvent('onclick',handle);       // 移除
</script>

注意:当需要移除事件监听,不能使用匿名函数。必须能够获取函数引用。

🌟 事件监听的兼容写法

/function addEvent(obj,type,handle){
  try{
   obj.addEventListener(type,handle,false);
  }catch(e){
   try{
    obj.attachEvent('on'+type,handle);
   }
   catch(e){
    obj['on' + type]=handle;     //早期浏览器
   }
  }
}

🌟事件对象

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持方式不同。

🌟 应用场景:

  • 需要知道你按下的键盘码时。
  • 需要知道鼠标点击的坐标时。
  • 阻阻止止冒泡流事件的发生。

🌟获取事件对象

event对象是事件程序的第一个参数(IE8及以下不支持)

<div id="box" style="height:30px;width:200px;background:pink;"></div>
<script>
var oBox = document.getElementById('box');
oBox.onclick = function(event){
    box.innerHTML = event;
}
</script>

直接使用event变量(火狐浏览器不支持,输出event未定义)

<div id="box" style="height:30px;width:200px;background:pink;"></div>
<script>
var oBox = document.getElementById('box');
oBox.onclick = function(){
    box.innerHTML = event;
}
</script>

兼容性写法

<div id="box" style="height:30px;width:200px;background:pink;"></div>
<script>
var oBox = document.getElementById('box');
oBox.onclick = function(e){
  e = e || event;
  box.innerHTML = e;
}
    
oBox.addEventListener("click",function(e){},false)
</script>

🌟 事件对象常用的方法和属性

🌟 鼠标事件相关

属性 含义
clientX 当鼠标事件发生的时候,鼠标相对于浏览器X轴的位置
clientY 当鼠标事件发生的时候,鼠标相对于浏览器Y轴的位置
offsetX 当鼠标事件发生的时候,鼠标相对于事件源X轴的位置
offsetY 当鼠标事件发生的时候,鼠标相对于事件源Y轴的位置
pageX 当鼠标事件发生的时候,鼠标相对于浏览器X轴的位置,包含页面横向滚动距离
pageY 当鼠标事件发生的时候,鼠标相对于浏览器X轴的位置,包含页面纵向滚动距离

🌟 滚轮事件相关:

属性 含义
wheelDelta 获取滚轮的上下滚动。正值向上,负值向下。
e.wheelDelta
上: 120  240
下:-120 -240

🌟 键盘事件相关对象:

属性 含义
key 获取当前所按键的名称
keyCode 获取当前所按键的键盘码
ctrlKey 判断当前ctrl键是否按下的状态
shiftKey 判断当前shift键是否按下的状态
altKey 判断当前alt键是否按下的状态
target 获取当前元素的DOM对象

🌟 其他属性和方法

属性 含义
preventDefault() 阻止浏览器默认行为
stopPropagation() 阻止事件流的传播 [e.stopProagation();]
currentTarget 指向被绑定事件的元素
target 指向事件触发的对象,当事件是处在冒泡或者捕获阶段调用的时候,指向最先触发事件的事件源
type 返回当前所触发事件的事件名称

🌟事件流

事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流。 事件传播的顺序对应浏览器的两种事件流模型:捕获型事件流和冒泡型事件流。

🌟 两种事件流模型

  • 冒泡型事件流:事件的传播是从最特定的事件目标到最不特定的事件目标。

on+type; 事件监听:false。

  • 捕获型事件流:事件的传播是从最不特定的事件目标到最特定的事件目标。

事件监听:ture。

JavaScript【十】JavaScript事件

IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播,但这些浏览器都是从window对象开始捕获事件的。

🌟 DOM事件流

DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象,从document对象开始,也在document对象结束。

🌟 DOM事件流的三个阶段

DOM标准规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
eventPhase属性返回一个整数值,表示事件目前所处的事件流阶段:0表示事件没有发生,1表示捕获阶段,2表示目标阶段,3表示冒泡阶段

  1. 事件捕获阶段:实际目标(<div>)在捕获阶段不会接收事件。也就是在捕获阶段,事件从document到<html>再到<body>就停止了。
  2. 处于目标阶段:事件在<div>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。
  3. 冒泡阶段:事件又传播回文档。
  4. 所有的事件都要经过捕获阶段和处于目标阶段,但是有些事件会跳过冒泡阶段:如,获得输入焦点的focus事件和失去输入焦点的blur事件。

🌟 事件委派

事件委派的原理用到的就是事件冒泡和目标元素,把事件处理器添加到父元素,等待子元素事件冒泡,并且父元素能够通过target(IE为srcElement)判断是哪个子元素,从而做相应处理。

🌟 用法
  1. 子元素的事件加到父元素上
  2. 触发事件时判断 触发该事件的元素是什么(e.target)
    • 判断内容 innerHTML innerText
    • 标签名 nodeName (判断的时候,标签名需要大写)
    • 属性 e.target.hasAttribute(“属性名”); 有则是true 无则是false
    • 类名 ID e.target.classList.contains(“类名”); 有则是true 无则是false
  3. 在判断成功中写对应的处理函数
🌟 应用场合
  1. 需要给大量元素添加同一事件处理程序的时候,提高代码运行的效率
  2. 在页面加载完成后新创建的元素, 比如通过ajax异步加载生成dom对象

🌟 自定义事件(观察者模式)

自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数.

🌟 事件创建

JS中,最简单的创建事件方法,是使用Event构造器:

var myEvent = new Event('event_name');

为了能够传递数据,使用 CustomEvent 构造器:

var myEvent = new CustomEvent('event_name', { detail:{
    // 将需要传递的数据写在detail中,以便在EventListener中获取
    // 数据将会在event.detail中得到
}, });

🌟 自定义事件的监听

JS的EventListener是根据事件的名称来进行监听的,我们进行自定义事件监听的时候,需要创建相应的监听器

//假设listener注册在window对象上
window.addEventListener('event_name', function(event){
  // 如果是CustomEvent,传入的数据在event.detail中
  console.log('得到数据为:', event.detail);
  // ...后续相关操作
});

进行到这一步,window对象上就有了event_name这个事件的监听器,当触发这个事件时,相应的回调函数就会触发

🌟 自定义事件的触发

普通的事件触发我们都有相对应的操作区,比如click,鼠标单击来触发,自定义事件需要我们显式的去触发它,使用dispatchEvent去触发(IE8低版本兼容,使用fireEvent);

if(window.dispatchEvent) {  
    window.dispatchEvent(myEvent);
} else {
    window.fireEvent(myEvent);
}

🌟 简单的例子

var myEvent = new CustomEvent('event_name', {
  detail: { title: 'This is title!'},
});
window.addEventListener('event_name', function(event){
  console.log('得到标题为:', event.detail.title);
});
// 随后在对应的元素上触发该事件
if(window.dispatchEvent) {
  window.dispatchEvent(myEvent);
} else {
   window.fireEvent(myEvent);
}

🌟 DOM事件流的简单例子

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    #outer{
        position: absolute;
        width: 400px;
        height: 400px;
        top:0;
        left: 0;
        bottom:0;
        right: 0;
        margin: auto;
        background-color: deeppink;
    }
    #middle{
        position: absolute;
        width: 300px;
        height:300px;
        top:50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -150px;
        background-color: deepskyblue;
    }
    #inner{
        position: absolute;
        width: 100px;
        height:100px;
        top:50%;
        left:50%;
        margin-left: -50px;
        margin-top: -50px;;
        background-color: darkgreen;
        text-align: center;
        line-height: 100px;
        color:white;
    }
    #outer,#middle,#inner{
        border-radius:100%;
    }
</style>
<body>
<div id="outer">
    <div id="middle">
        <div id="inner">
            click me!
        </div>
    </div>
</div>
<script>
    var innerCircle= document.getElementById("inner");
    innerCircle.addEventListener("click", function () {
        alert("innerCircle的click事件在捕获阶段被触发");
    },true);
    innerCircle.addEventListener("click", function () {
        alert("innerCircle的click事件在冒泡阶段被触发");
    },false);
    var middleCircle= document.getElementById("middle");
    middleCircle.addEventListener("click", function () {
        alert("middleCircle的click事件在捕获阶段被触发");
    },true);
    middleCircle.addEventListener("click", function () {
        alert("middleCircle的click事件在冒泡阶段被触发");
    },false);
    var outerCircle= document.getElementById("outer");
    outerCircle.addEventListener("click", function () {
        alert("outerCircle的click事件在捕获阶段被触发");
    },true);
    outerCircle.addEventListener("click", function () {
        alert("outerCircle的click事件在冒泡阶段被触发");
    },false);
</script>
</body>
</html>

🌟写在最后

更多JavaScript知识以及API请大家持续关注,尽请期待。各位小伙伴让我们 let’s be prepared at all times!

✨原创不易,还希望各位大佬支持一下!
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富!文章来源地址https://www.toymoban.com/news/detail-415908.html

到了这里,关于JavaScript【十】JavaScript事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 深入理解JavaScript的事件冒泡与事件捕获

    JavaScript中提供了很多操作DOM的API。 事件冒泡 和 事件捕获 是指浏览器中处理DOM元素上事件的两种不同方式。事件冒泡和事件捕获都是 JavaScript事件模型 中的一部分,可以用来 处理事件 。 对于这个问题,在实际开发中,并不是非常重要,因为在工作中我们基本上不会直接操

    2024年02月10日
    浏览(49)
  • JavaScript中的事件冒泡和事件捕获机制

    JavaScript中的事件冒泡和事件捕获机制是开发中非常重要的概念,掌握了这两种机制,可以更好地理解事件处理和DOM操作。本文将深入探讨JavaScript中的事件冒泡和事件捕获机制,包括它们的工作原理、如何使用它们、以及它们的优缺点。 一、什么是事件冒泡和事件捕获机制?

    2024年02月03日
    浏览(40)
  • JavaScript事件流:深入理解事件处理和传播机制

    JavaScript中的事件流是一种机制,用于描述和处理事件在DOM树中的传播过程。了解事件流的属性和工作原理对于编写高效的事件处理代码和实现复杂的交互功能至关重要。本文将详细介绍JavaScript事件流的发展流程、属性以及应用场景,并提供一些代码示例和引用资料,帮助读

    2024年02月08日
    浏览(48)
  • 【JavaScript-13】阻止事件的默认行为+键盘表单事件

    一、阻止默认行为 1.阻止事件冒泡 event.stopPropagation(); a标签不跳转:href=“javascript:;” 2.阻止默认行为 event.preventDefault();通常写在第一行 例子: 例1)如a标签不需要写onclick直接点击便可以跳转,此处写阻止默认行为,就是阻止a的点击行为 例2)阻止默认行为,阻止右击页面自

    2024年02月09日
    浏览(46)
  • js的鼠标事件(JavaScript的鼠标事件,vue的鼠标事件)

    js鼠标事件,相关属性: vue鼠标事件,相关属性 (js鼠标事件和vue中的鼠标事件区别是省略了on字符):

    2024年02月12日
    浏览(44)
  • 从0开始学习JavaScript--JavaScript事件:响应与交互

    JavaScript的事件处理是Web开发中至关重要的一部分,通过事件,能够实现用户与页面的互动,使得网页更加生动和交互性。本文将深入探讨JavaScript事件的各个方面,包括事件的基本概念、事件类型、事件对象、事件冒泡与捕获、事件委托、以及一些高级的事件处理技巧。 在

    2024年02月02日
    浏览(46)
  • JavaScript 常见鼠标事件

    常见鼠标事件类型1     1、click鼠标左键点击     2、mousedown 鼠标按下时触发     3、mouseup 鼠标弹起时触发     4、mousemove (move移动)鼠标在固定的位置一移动就触发移动,就触发     5、mouseenter 鼠标移入触发     6、mouseleave 鼠标移出触发 代码段:

    2024年02月06日
    浏览(29)
  • JavaScript复习——04 事件

    事件对象是由浏览器在外面触发事件的时候创建的,这个对象封装了各种事件相关的各种信息 例如: 鼠标的位置 键盘的按键 浏览器创建事件对象后,会将事件对象作为响应参数传递 在DOM类型中有多种不同类型的事件对象,但是他们都一个祖先Event event.clientX:获取鼠标的

    2024年02月05日
    浏览(36)
  • 1-JavaScript 点击事件

    web前端JavaScript交互 ------ 点击事件 意义: JavaScript中的点击事件是指当用户在页面上点击某个元素时触发的事件。这个事件可以用于执行各种操作,如改变元素的样式、修改页面内容等。这是Web应用程序中最常用 的交互方式之一,允许用户与网页进行交互,提高用户体验。

    2024年02月08日
    浏览(40)
  • javaScript中的键盘事件

            键盘上的某个键被按下时触发         键盘上的某个键被松开时触发           键盘上的某个键被按下时触发( 不能识别功能键;如shift Alt 等   并且区分大小写 )         keyCode返回按键在ASCII码对照表中的值,利用keyCode可判断键盘上的哪个键被按下 扩展

    2024年02月12日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包