DOM-事件详解

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

1、事件

事件：触发-响应机制

Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

事件三要素

  • 事件源:触发(被)事件的元素

  • 事件类型:事件的触发方式(例如鼠标点击或键盘点击)

  • 事件处理程序:事件触发后要执行的代码(函数形式)

事件的基本使用

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代码会在box被点击后执行');  
};

2、为元素绑定多个事件

<input type="button" value="按钮" id="btn"/>

<script>
 function my$(id){
   return document.getElementById(id);
  }
  my$("btn").onclick=function () {
    console.log("第一个");
  };
  my$("btn").onclick=function () {
    console.log("第二个");
  };
  my$("btn").onclick=function () {
    console.log("第三个");
  };
</script>

注意：这种方式不能为元素绑定多个事件，前两个会被覆盖，只会执行第三个。

如何才能为元素绑定多个事件呢？

1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持

  • 为按钮绑定点击事件

  参数1:事件的类型---事件的名字,没有on
  参数2:事件处理函数---函数(命名函数,匿名函数)
  参数3:布尔类型,目前就写false

  谷歌和火狐支持


  //为同一个元素绑定多个相同的事件--
  my$("btn").addEventListener("click",function () {
    console.log("第一个");
  },false);
  my$("btn").addEventListener("click",function () {
    console.log("第二个");
  },false);
  my$("btn").addEventListener("click",function () {
    console.log("第三个");
  },false);
  my$("btn").addEventListener("click",function () {
    console.log("第四个");
  },false);

  参数1:事件类型---事件名字，有on
  参数2:事件处理函数---函数(命名函数,匿名函数)

  IE8支持

  
  my$("btn").attachEvent("onclick",function () {
    console.log("1");
  });

  my$("btn").attachEvent("onclick",function () {
    console.log("2");
  });

  my$("btn").attachEvent("onclick",function () {
    console.log("3");
  });

为多个元素绑定事件兼容代码


  //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
  function addEventListener(element,type,fn) {
    //判断浏览器是否支持这个方法
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }

  addEventListener(my$("btn"),"click",function () {
    console.log("哦1");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("哦2");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("哦3");
  });

总结绑定事件的区别:
   addEventListener();
   attachEvent()
   相同点: 都可以为元素绑定事件
   不同点:
   1.方法名不一样
   2.参数个数不一样addEventListener三个参数,attachEvent两个参数
   3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
     attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
   4.this不同,addEventListener 中的this是当前绑定事件的对象
     attachEvent中的this是window
   5.addEventListener中事件的类型(事件的名字)没有on
    attachEvent中的事件的类型(事件的名字)有on

为元素解绑事件

第一种方式：
   对象.on事件名字=事件处理函数--->绑定事件
   对象.on事件名字=null;

<input type="button" name="" value="点击" id="btn">
<input type="button" name="" value="干掉第一个" id="btn2">

 var btn=document.getElementById("btn");
	 //对象.on事件的名字=事件的处理函数-------常用的绑定事件方法
	 btn.onclick=function ( ){
	 	console.log("第一个");
	 };
	 var btn2=document.getElementById("btn2");
	 btn2.onclick=function ( ){
	 	//解绑事件
	 	btn.onclick=null;
	 };

第二种方式：

 对象.addEventListener("没有on的事件类型",命名函数,false);---->绑定事件
 对象.removeEventListener("没有on的事件类型",函数名字,false)

	function f1 () {
		console.log("第一个");
	}
	function f2 () {
		console.log("第二个");
	}
	var btn=document.getElementById("btn");
	btn.addEventListener("click",f1,false);
	btn.addEventListener("click",f2,false);
	//点击第二个按钮把第一个按钮的第一个点击事件解绑
	 var btn2=document.getElementById("btn2");
	 btn2.onclick=function () {
	 	//解绑事件的时候，需要在绑定事件的时候使用命名函数
	 	btn.removeEventListener("click",f1,false);
	 };

第三种方式---->针对IE8

   对象.attachEvent("on事件类型",命名函数)----->绑定事件(针对IE8)
   对象.detachEvent("on事件类型",函数名字)

	 function f1 () {
		console.log("第一个");
	}
	function f2 () {
		console.log("第二个");
	}
	var btn=document.getElementById("btn");
	btn.attachEvent("onclick",f1);
	btn.attachEvent("onclick",f2);
	//点击第二个按钮把第一个按钮的第一个点击事件解绑
	 var btn2=document.getElementById("btn2");
	 btn2.onclick=function () {
	 	//解绑事件的时候，需要在绑定事件的时候使用命名函数
	 	btn.detachEvent("onclick",f1);
	 };

注意：用什么方式绑定事件，就应该用对应的方式解绑事件

绑定事件和解绑事件的兼容代码

<body>
	<input type="button" name="" value="点击" id="btn">
	<input type="button" name="" value="干掉第一个" id="btn2">
<script type="text/javascript">
	//绑定事件的兼容代码
	function addEventListener(element,type,fn) {
		if(element.addEventListener){
			element.addEventListener(type,fn,false);
		}else if(element.attachEvent){
			element.attachEvent("on"+type,fn);
		}else{
			element["on"+type]=fn;
		}
	}

	//解绑事件的兼容代码
	//为任意的一个元素，解绑对应的事件
	function removeEventListener(element,type,fn) {
		if (element.removeEventListener) {
			element.removeEventListener(type,fn,false);
		}else if(element.detachEvent){
			element.detachEvent("on"+type,fn);
		}else{
			element["on"+type]=null;
		}
	}
	//测试
	
	function f1() {
		console.log("第一个");
	}
	function f2() {
		console.log("第二个");
	}
	var btn=document.getElementById("btn");
	addEventListener(btn,"click",f1);
	addEventListener(btn,"click",f2);
	 var btn2=document.getElementById("btn2");
	 btn2.onclick=function () {
	   removeEventListener(btn,"click",f1);
	 };
</script>
</body>

 

3、事件的三个阶段

  1. 捕获阶段====>从外向内

  2. 当前目标阶段====>最开始选择的那个

  3. 冒泡阶段====>从里向外

    addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的) ，有三个参数，那么第三个参数就是控制事件阶段的，事件对象.eventPhase属性可以查看事件触发时所处的阶段。

 如果这个属性的值是:
      1---->捕获阶段
      2---->目标阶段
      3---->冒泡

一般默认都是冒泡阶段,很少用捕获阶段 ，所以addEventListener（）第三个参数通常是false。

 <style>
    #dv1 {
      width: 300px;
      height: 200px;
      background-color: red;
    }

    #dv2 {
      width: 250px;
      height: 150px;
      background-color: green;
    }

    #dv3 {
      width: 200px;
      height: 100px;
      background-color: blue;
    }
 </style>

<body>
    <div id="dv1">
       <div id="dv2">
         <div id="dv3"></div>
       </div>
    </div>

 </body>
 <script>
   function my$(id){
     return document.getElementById(id);
   }
     //同时注册点击事件
    var objs = [my$("dv3"), my$("dv2"), my$("dv1")];
     //遍历注册事件
     objs.forEach(function (ele) {
     //为每个元素绑定事件
    ele.addEventListener("click", function (e) {
      console.log(this.id+"====>"+e.eventPhase);

    }, true);

  });
 </script>

注意：捕获阶段和冒泡阶段不会同时存在

 

事件冒泡

事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了，我们要阻止事件冒泡

阻止事件冒泡的方法

window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

e.stopPropagation(); 谷歌和火狐支持

  my$("dv1").onclick=function () {
    console.log(this.id);
  };
  my$("dv2").onclick=function () {
    console.log(this.id);
    window.event.cancelBubble=true;
  };
  //事件处理参数对象
  my$("dv3").onclick=function (e) {
    console.log(this.id);
    //阻止事件冒泡
    //e.stopPropagation();

    console.log(e);
  };

4、事件对象的属性和方法

  • event.type 获取事件类型

  • clientX/clientY 所有浏览器都支持，窗口位置

  • pageX/pageY IE8以前不支持，页面位置

  • event.target || event.srcElement 用于获取触发事件的元素

  • event.preventDefault() 取消默认行为

案例：为同一个元素绑定多个不同事件指向同一事件处理函数

<body>
<input type="button" value="按钮" id="btn"/>
<script>
 function my$(id){
     return document.getElementById(id);
   }
  //为同一个元素绑定多个不同的事件,指向相同的事件处理函数
  my$("btn").onclick = f1;
  my$("btn").onmouseover = f1;
  my$("btn").onmouseout = f1;
  function f1(e) {
    switch (e.type) {
      case "click":
        alert("我是按钮");
        break;
      case "mouseover":
        this.style.backgroundColor = "red";
        break;
      case "mouseout":
        this.style.backgroundColor = "green";
        break;
    }
  }

 

yyy_wj
关注
DOM系列：DOM事件简介
人生代码 ---- 公众号
03-25 1616
事件是什么？ 事实上，你创建的所有内容都可以按照下面的语句来建模： 这样的填空题有很多种答案。第一个空格填将一些事情；第二个空格描述了人们对该事件做出的反应。比如下面这样的示例： 当 页面加载 时，播放一段视频 当 点击发生 时，提交已填好的表单 当 鼠标释放 时，弹出下人对话框 当 删除键按下 时，删除选中的图片 当 触摸屏幕 时，把卡片移出屏幕 当 文件下载发生 时，请更新进度条 这样的...
DOM-manip_wk6_day5_wkend_hw
02-14
【标签】：“JavaScript”标签表明这个作业或项目主要使用JavaScript语言，这是一种广泛用于Web开发的脚本语言，特别适用于处理DOM操作，如事件监听、元素选择、属性修改等。 【文件列表】：“DOM-manip_wk6_day5_...
JavaScript HTML DOM 事件
weixin_34112030的博客
07-06 115
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。 我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。 如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码： onclick=JavaScript HTML 事件的例子： 当用户点击鼠标时 当网页已加载时 当图像已加载时 ...
DOM事件
最新发布
weixin_43063398的博客
08-20 1764
DOM中的事件 -> 行为，行为背后对应着某个（某些）待执行函数。
DOM事件简介
zlllxl2002的专栏
03-11 436
DOM事件简介 Click、touch、load、drag、change、input、error、risize — 这些都是冗长的DOM（文档对象模型）事件列表的一部分。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是只是在一处被触发和终止；他们在整个document中流动，拥有它们自己的生命周期。而这个生命周期让DOM事件有更
JS DOM 事件
qq_43547725的博客
11-13 218
用户对dom元素(比如按钮、div、span...)进行某种操作行为(单击、双击、鼠标移入 ...键盘按下),页面会做出相应的响应。事件通常与函数结合使用，在事件发生之前函数不会被执行。
Angular4.x Event (DOM事件和自定义事件详解)
01-19
Angular组件和DOM元素通过事件与外部进行通信，两者中的事件绑定语法是相同的-(eventName)=”expression”: <button (click)=onClick()>Click</button> DOM元素 DOM 元素触发的一些事件通过 DOM 层级...
DOM 事件流详解
09-03
在深入了解DOM（文档对象模型）事件流之前，我们需要先明确事件流的概念。事件流是指当在DOM中发生一个事件时，浏览器是如何处理这个事件的。在处理过程中，事件会从一个元素流向另一个元素，直到整个页面的所有元素...
JavaScript Dom 绑定事件操作实例详解
12-13
本文实例讲述了JavaScript Dom 绑定事件操作JavaScript Dom 绑定事件操作。分享给大家供大家参考，具体如下： JavaScript Dom 绑定事件 // 先获取Dom对象，然后进行绑定 document.getElementById('xx').onclick ...
dom事件
qq_29738977的博客
12-17 236
一、dom事件级别 dom0: ele.onclick=function(){} dom1: 指定时没有涉及事件相关的内容 dom2: ele.addEventListener(&amp;amp;quot;click&amp;amp;quot;,function(){},false) 后一个参数指定是冒泡还是捕获。 dom3：ele.addEventListener(&amp;amp;quot;keyup&amp;amp;quot;,function(){},false) 增
Dom事件
Dave_lzw的博客
05-25 284
dom事件.html var one = document.getElementById("one"); one.onblur = function(){ alert("失去焦点!"); } //光标离开文本框 one.onfocus = function(){ alert("得到焦点!
JavaScript中DOM事件
qq_44682019的博客
10-01 398
DOM事件 什么是事件？ 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。主要有HTML事件和DOM事件。 HTML事件：直接在HTML元素标签内添加事件，执行脚本。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .btn{width:140px;hei
JavaScript DOM事件详解与应用
"JavaScript DOM事件(笔记)：涵盖了事件流、事件处理程序的三种方式，包括HTML事件处理程序、DOM0级事件处理程序和DOM2级事件处理程序，并提及了IE特有事件处理程序的兼容性问题。" JavaScript DOM事件是Web开发中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值