【DOM】浏览器事件——JS事件处理程序与事件对象

Dark Horse

于 2020-11-15 17:41:43 发布

阅读量230

点赞数

分类专栏： DOM

本文链接：https://blog.csdn.net/weixin_48989252/article/details/109702637

版权

DOM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、事件处理程序

事件处理程序是指响应某个事件的函数。
DOM中事件处理程序大概可以分为以下三种类型：
（1）HTML事件处理程序
（2）DOM0级事件处理程序
（3）DOM2级事件处理程序

DOM版本有DOM0、DOM1、DOM2和DOM3
DOM0和DOM2有自己独立的事件绑定和解绑方式。

二、HTML事件处理程序

直接将事件函数写到HTML中元素属性上

<button onclick="alert(hello world!)"></hello>

双引号中的代码是事件触发后执行的代码，是由eval()调用的，它是全局作用域。

<button onclick="add()"></hello>

第二种写法存在时差问题，如果用户在界面刚出现就进行点击，而JS还没有加载好的话，就会报错，此外，一个函数的改变，可能同时需要js和html的改变。

三、DOM0级事件处理程序

1、事件绑定

对象.οnclick=function(){ }
同一元素同时绑定相同事件，后面会覆盖前边。

<body>
 <div id="box"></div>
 <button>解绑</button>
<script>
 window.onload = function () {
     var box = document.querySelector('#box');
     var btn = document.querySelector('button');
     //dom0 绑定
     box.onclick = function () {
         console.log('我是dom0级事件1')
     };//我是dom0级事件1
      
     box.onclick = function () {
       console.log('我是dom0级事件2')
     };//我是dom0级事件
}

2、事件解绑

解绑本质：把事件属性和事件回调函数断开连接

//点击btn之后 解绑box的单击事件
   btn.onclick = function () {
       box.onclick = null;
   }

四、DOM2级事件处理程序

同一对象，可以绑定多个相同事件。

1、高级浏览器

高级浏览器事件是从上到下执行的
（1）绑定：.addEventListener(‘click’,fun,false)
第一个参数：事件名称！！！不带on
第二个参数：回调函数
第三个参数：控制事件阶段：默认是false冒泡

  box.addEventListener("click",function(){
    console.log('今天中午吃多了')
  },false)
 
  box.addEventListener('click',fun,false);   
  function fun() {
    console.log('晚上就不吃了')
 }

（4）解绑：.removeEventListener(‘click’,fun)
解绑形参与绑定形参要一致
事件需要解绑，那么函数必须定义成有名函数

 btn.onclick = function () {
	 box.removeEventListener('click',fun)
   }   	   
 box.onclick=function(){
     box.removeEventListener(fun)
  }

2、IE浏览器

低级浏览器事件是从下到上执行
（1） .attahEvent(‘onclick’,fun)

box.attachEvent("onclick",function(){
  console.log("今天晚上又吃了")
})
	
box.attachEvent("onclick",fun);
  function fun(){
  console.log("伤心")
}

（2） .detachEvent(‘onclick’,fun)

btn.onclick = function(){
   box.detachEvent("onclick",fun)
}

3、两种绑定事件的区别

（1）方法名不同
（2）兼容性不同
（3）参数不同
（4）有on 无on
（5）addEvenListener中的this指向当前绑定对象，attachEvent中的this指向window

五、兼容性封装dom2级事件绑定与解绑

 var box = document.getElementById('box');
  // 参数1：要绑定事件的元素  
  // 参数2：要绑定的事件类型  
  // 参数3：事件的回调函数
   function addEvent(node,eventType,callback){
   if(node.addEventListener){
	   // 高级浏览器
	   node.addEventListener(eventType,callback);
   }
   else{
	   // 低级浏览器
	   eventType = "on" + eventType
	   node.attachEvent(eventType,callback);
   }
   }  
   // 测试
	addEvent(box,'click',f1)
	function f1(){
	console.log('f1函数')
	}
		   
   //兼容性封装dom2级事件解绑
   var btnobj = document.getElementById('btn');
   function removeEvent(node,eventType,callback){
	  // 高级浏览器解绑
	   if(node.removeEventListener){
		  node.removeEventListener(eventType,callback);
	   }
	   // 低级浏览器
	   else{
		   node.detachEvent('on'+eventType,callback)
	   }
	}
   // 测试
   btnobj.onclick=function(){
   removeEvent(box,'click',f1)
   }
}

六、事件对象

1、是什么？

（1）event ev e
（1）事件在触发时，系统封装的对象，称为事件对象。
（2）包含本次事件触发所有的相关信息。
（3）事件对象在高级浏览器触发的时候，系统会将事件对象作为实参，传递给回调函数第一个形参。
（4）低级浏览器把事件对象，作为window的一个属性 window.event

2、应用

（1）keyCode判断键

window.onload = function () {
  var inputNode = document.querySelector('input');
    // 按下回车 打印哈哈哈
    inputNode.onkeyup = function (event) { 
       event =event || window.event
       if(event.keyCode == 13){
     // 按下回车后 才会执行if里边的逻辑
	console.log("哈哈哈");
   }
 }

（2）获取鼠标位置

<body>
<div id="box"></div>
<script>
  window.onload = function () {
	var box = document.getElementById('box');
	box.onclick = function (event) {
	
	// 鼠标按下的位置相对于视口的左上角的坐标
	  console.log(event.clientX,event.clientY);
	
	// 鼠标按下的位置相对于页面左上角的坐标
	  console.log(event.pageX,event.pageY);
	
	//鼠标按下的距离元素边界的相对坐标
	  console.log(event.offsetX,event.offsetY);
	
	//鼠标按下距离屏幕左上角的坐标
	  console.log(event.screenX,event.screenY);	
	}
 }

（3）事件委派获取目标元素

event.target当前目标元素

（4）阻止事件冒泡

谷歌火狐：event.stopPropagation()
IE：event.cancelBubble=true

（5）阻止默认行为

常见的默认行为：
阻止超链接跳转、在form中按回车会自动提交表单

阻止默认行为：
dom0：return false
dom2：event.preventDefault()

Dark Horse

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【DOM】浏览器事件——JS事件处理程序与事件对象

一、事件处理程序事件处理程序是指响应某个事件的函数。DOM中事件处理程序大概可以分为以下三种类型：（1）HTML事件处理程序（2）DOM0级事件处理程序（3）DOM2级事件处理程序DOM版本有DOM0、DOM1、DOM2和DOM3DOM0和DOM2有自己独立的事件绑定和解绑方式。二、HTML事件处理程序直接将事件函数写到HTML中元素属性上<button onclick="alert(hello world!)"></hello>双引号中的代码是事件触发后执行
复制链接

扫一扫