js事件目的,通晓JavaScript事件目的

2019-09-02 13:51 来源:未知

在触发DOM上的有个别事件时,会产生二个事变指标event。

事件目的

在触发DOM上的有个别事件时,会生出贰个事变指标event,这一个指标中带有着富有与事件有关的音信。包涵导致事件的要素、事件的花色以及任何与特定事件相关的新闻。全数的浏览器都协助event对象,但支撑艺术不一致。

DOM中的事件目的

DOM中的事件目的

合作DOM的浏览器会将叁个event对象传入到事件管理程序中。event对象包含与成立它的一定事件有关的习性和形式。触发的平地风波类型不等同,可用的属性方法就区别等。可是,全体的风云都会有下表列出的积极分子。

  • bubbles: 重回布尔值,提示事件是或不是是起泡事件类型。
  • cancelable: 重临布尔值,提醒事件是不是可拥可收回的暗中同意动作。
  • currentTarget: 重返其事件监听器触发该事件的因素。
  • eventPhase: 重回事件传播的近年来阶段。
  • target: 重回触发那件事件的因素(事件的对象节点)。
  • type: 再次回到当前 伊夫nt 对象表示的风浪的名目。
  • initEvent(): 早先化新创造的 伊夫nt 对象的习性。
  • preventDefault(): 公告浏览器不要实行与事件波及的暗中认可动作。
  • stopPropagation(): 不再派发事件。

协作DOM的浏览器会将贰个event对象传入到事件管理程序中。event对象包罗与创设它的特定事件有关的性质和方法。除法的风云类型差别等,可用的属性方法就不平等。不过,全部的事件都会有下表列出的分子。

this、currentTarget、target

在事件管理程序的中间,对象this始终等于currentTarget的值,而target则只蕴涵事件的实际上指标。假设向来将事件管理程序钦点给了指标成分,则this、currentTarget和target包蕴同样的值。如:

var btn = document.getElementById('btn');
  btn.onclick = function(event){
    alert(event.currentTarget === this);  //true
    alert(event.target === this); //true 
  }

鉴于click事件的靶子是btn开关,所以那多个值是杰出的。假若事件管理程序在开关的父节点(document.body)中,那么这一个值则不相同样。如:

var body = document.body;
  body.onclick = function(event){
    alert(event.currentTarget === document.body);  //true
    alert(this === document.body);  //true
    alert(event.target === document.getElementById('btn')); //true
  }

在这里,this和currentTarget都以document.body,因为事件处理程序是挂号到这几个成分上的。但是target成分实际不是常开关成分,因为它是click事件的着实指标。由于按键并从未登记事件管理程序,结果click事件就冒泡到了document.body,在这里事件本领博得管理。

上边列出了 2 级 DOM 事件规范定义的特性:

type

在急需经过三个函数管理多少个事件时,能够利用type属性。如:

var btn = document.getElementById('btn');
//设置多个事件
  var handler = function(event){
//获取事件的类型
    switch(event.type){
      case 'click':{
        alert('click');
        break;
      }
      case 'mouseover':{
        event.target.style.backgroundColor = 'green';
        break;
      }
      case 'mouseout':{
        event.target.style.backgroundColor = 'gray';
        break;
      }
    }
  }
//给响应的事件赋值
  btn.onclick = handler;
  btn.onmouseover = handler;
  btn.onmouseout = handler;

此处透过event.type属性,让函数能够显明发生了什么样风浪,并执行相应的操作。

  • bubbles: 重临布尔值,提示事件是还是不是是起泡事件类型。
  • cancelable: 重回布尔值,提醒事件是还是不是可拥可收回的默许动作。
  • currentTarget: 重回其事件监听器触发该事件的成分。
  • eventPhase: 重回事件传播的脚下阶段。
  • target: 重返触发那件事件的因素(事件的对象节点)。
  • timeStamp: 重返事件生成的日期和岁月。
  • type: 再次来到当前 Event 对象表示的平地风波的名号。
preventDefault()

要阻止特定事件的私下认可行为,能够使用该方法。如:

var link = document.getElementById('link');
  link.onclick = function(event){
    event.preventDefault();
  }

唯有cancelable属性设置为true的轩然大波,才足以动用preventDefault()来撤除其暗中认可行为。

上面列出了 2 级 DOM 事件标准定义的方式。IE 的风云模型不协理这个艺术:

stopPropagation()


stopPropagation()用于立时终止事件在DOM档期的顺序中的传播,即撤销进一步的平地风波捕获或冒泡。比如,直接抬高到三个开关的事件处理程序能够调用该形式,进而防止接触注册在document.body上边的事件管理程序。如:

var btn = document.getElementById('btn');
  btn.onclick = function(event){
    alert('click button');
    event.stopPropagation();
  }
  document.body.onclick = function(event){
    alert('click body');
  }
//点击一下的结果是:
//click button
  • init伊夫nt(): 起头化新成立的 伊夫nt 对象的属性。
  • preventDefault(): 布告浏览器不要推行与事件涉及的暗中同意动作。
  • stopPropagation(): 不再派发事件。
eventPhase

该属性用来规定事件当前正投身事件流的哪些阶段。

  • 设即使捕获阶段则约等于1;
  • 假定是指标对象阶段则相当2;
  • 比方是冒泡阶段则极其3;
var btn = document.getElementById('btn');
  btn.onclick = function(event){
    alert(event.eventPhase);
  }
  document.body.addEventListener('click',function(event){
    alert(event.eventPhase);
  },true)
  document.body.onclick = function(event){
    alert(event.eventPhase);
  }
//点击一下的结果是:
//1
//2
//3

唯有在事件管理程序实施时期,event对象才会设有;一旦事件管理程序实践达成,event对象就能被销毁。

this、target、currentTarget

IE中的事件指标

与寻访的DOM中的event对象不一致,邀访谈IE中的event对象有三种区别的措施,取决于钦点事件管理程序的艺术。

在事件管理程序的个中,对象this始终等于currentTarget的值,而target则只含有事件的骨子里指标。假设直白将事件管理程序钦命给了对象元素,则this、currentTarget和target包罗一样的值。如:

DOM0级方法

在运用DOM0级方法增加事件管理程序时,event对象作为window对象的多个属性存在。如:

var btn = document.getElementById('btn');
  btn.onclick = function(){
    //获取event对象
    var event = window.event;  
    alert(event.type);  //'click"
  }
var btn = document.querySelector("#btn");
btn.onclick=function () {
  console.log(event.currentTarget === this); //true
  console.log(event.target === this); //true
}
IE事件管理程序

假设事件管理程序时选择attach伊夫nt()增多的,那么就能够有三个event对象作为参数被流传事件管理程序中。如下:

var btn = document.getElementById('btn');
  btn.attachEvent("onclick",function(event){
    alert(event.type);
  })

是因为click事件的靶子是btn按键,所以那三个值是相等的。若是事件管理程序在按键的父节点(document.body)中,那么那几个值则不平等。如:

HTML特性

经过HTML本性钦点的事件管理程序,能够透过三个叫event的变量来拜谒event对象。如:

<button type="button" id="btn" onclick="alert(event.type)">click me</button>

event对象也暗含与创制它的事件相关的属性和办法。触发的风云类型分化样,可用的性质方法就区别。但是,全体的事件都会有下表列出的分子。

  • cancelable: 重返布尔值,提示事件是或不是可拥可撤消的默许动作。
  • returnValue:撤销事件的私下认可行为
  • srcElement:事件的对象
  • type: 重回当前 伊芙nt 对象表示的事件的名称。
var btn = document.querySelector("#btn");
document.body.onclick=function () {
  console.log(event.currentTarget === document.body); //true
  console.log(this === document.body); //true
  console.log(event.target === btn); //true 因为btn没有注册事件处理程序,所以该click事件就冒泡到了document.body
}
srcElement

因为事件管理程序的功效域是依据钦点它的方法来明确的,所以无法以为this会始终等于事件指标。故而,最佳照旧利用event.srcElement相比较保障。比方:

var btn = document.getElementById('btn');
  btn.onclick = function(){
    alert(window.event.srcElement === this)  //true
  }
  btn.attactEvent('onclick',function(event){
    alert(event.srcElement === this);  //false
  })

在此间,this和currentTarget都以document.body,因为事件管理程序是注册到那么些因素上的。不过target成分却特别开关成分,因为它是click事件的的确目标。由于开关并不曾注册事件管理程序,结果click事件就冒泡到了document.body,在那边事件才具博得管理。

returnValue

returnValue想当与DOM中的 preventDefault()方法,它们的作用都以撤除给定事件的暗中同意事件。只要将returnValue设置为false,就足以阻止私下认可行为。

var link = document.getElementById('link');
  link.onclick = function(event){
    window.event.returnValue = false;
  }

与DOM分裂的是,在此不能够鲜明事件是不是被打消。

1、type

cancelBubble

cancelBubble属性和DOM中的stopPropagation()方法一致,都以用来终止事件冒泡的。由于IE不扶助事件捕获,因而不得不撤消冒泡事件。

ar btn = document.getElementById('btn');
  btn.onclick = function(event){
    alert('click button');
    window.event.cancelBubble = true;
  }
  document.body.onclick = function(event){
    alert('click body');
  }
//点击一下的结果是:
//‘click button

在急需经过三个函数管理多少个事件时,可以利用type属性。如:

跨浏览器的风云指标

window.onload = function(){
  var EventUtil = {
     addHandler:function(element,type,handler){
                    if(element.addEventListener){
                        element.addEventListener(type,handler,false)
                    }else if(element.addEvent){
                        element.attachEvent('on'+type,handler,false)
                    }else{
                        element['on'+type] = handler;
                    }
    },
    getEvent:function(event){
      return event ? event : window.event;
    },
    getTarget:function(event){
      return event.target || event.srcElement;
    },
    preventDefault:function(event){
      if(event.preventDefault){
        event.preventDefault();
      }else{
        event.returnValue = false;
      }
    },
    removeHandler:function(element,type,handler){
                    if(element.addEventListener){
                        element.removeEventListener(type,handler,false)
                    }else if(element.addEvent){
                        element.detachEvent('on'+type,handler,false)
                    }else{
                        element['on'+type] = null;
                    }
    },
    stopPropagation:function(event){
      if(event.stopPropagation){
        event.stopPropagation();
      }
      else{
        event.cancelBubble = true;
      }
    }
  }
  var btn = document.getElementById('btn');
  btn.onclick = function(event){
    event = EventUtil.getEvent(event);
    alert(event);
  }
  btn.onclick = function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    alert(target);
  }
}
//获取按钮
var btn = document.querySelector("#btn");
//设置多个事件
var handler = function() {
//检测事件的类型
  switch (event.type) {
    case "click":
      console.log("i click it");
      break;
    case "mouseover":
      console.log("i enter it");
      break;
    case "mouseout":
      console.log("i leave it");
      break;
  }
}
//给响应的事件赋值
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

2、preventDefault()

要阻拦特定事件的私下认可行为,能够使用该方法。如:

var aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
  var currentATag = aTags[i];
  currentATag.onclick = function() {
    event.preventDefault();
  }
};

上述代码即屏蔽了网页上海市总体的a标签超链接功效。要小心的是,独有cancelable属性设置为true的风浪,才足以选择preventDefault()来撤废其默许行为。

3、stopPropagation()

随即终止事件在DOM档案的次序中的传播,即裁撤进一步的平地风波捕获或冒泡。举例,直接助长到贰个开关的事件管理程序可以调用该格局,进而防止接触注册在document.body上边的事件管理程序。如:

var btn = document.getElementById("btn");
btn.onclick = function () {
  console.log("btn clicked");
  // event.stopPropagation();
};
window.onclick = function () {
  console.log("clicked");
};
//单击一下的结果:
//btn clicked
//clicked

又如:

var btn = document.getElementById("btn");
btn.onclick = function () {
  console.log("btn clicked");
  event.stopPropagation();
};
window.onclick = function () {
  console.log("clicked");
};
//单击一下的结果:
//btn clicked

eventPhase

该属性用来规定事件当前正位于事件流的哪位阶段。

  • 万一是捕获阶段则约等于1;
  • 若果是目的对象阶段则格外2;
  • 如假使冒泡阶段则也便是3;

如:

var btn = document.getElementById("btn");

document.body.addEventListener("click", function() {
  console.log("bodyListener" + event.eventPhase);
}, true) //捕获阶段

btn.onclick = function() {
  console.log("btn" + event.eventPhase);
} //目标对象阶段,实际上属于冒泡阶段(在btn上)

document.body.onclick = function() {
  console.log("body" + event.eventPhase);
} //冒泡阶段(在body上)

又如:

var btn = document.getElementById("btn");

document.body.addEventListener("click", function() {
  console.log(event.eventPhase); //1
  console.log(event.currentTarget); //HTMLBodyElement
}, true);

btn.addEventListener("click", function() {
  console.log(event.eventPhase); //2
  console.log(event.currentTarget); //HTMLInputElement
});

document.body.addEventListener("click", function() {
  console.log(event.eventPhase); //3
  console.log(event.currentTarget); //HTMLBodyElement
});

流程大约是:

document.body 捕获阶段 --> btn 目的对象阶段 --> document.body 冒泡阶段

上述就是有关JavaScript事件指标,希望对我们的学习抱有支持。

您或者感兴趣的文章:

  • 深深解析Javascript事件代理
  • 通晓JS绑定事件
  • 理解javascript中DOM事件
  • JavaScript事件学习小结(一)事件流
TAG标签:
版权声明:本文由990888藏宝阁发布于网络应用,转载请注明出处:js事件目的,通晓JavaScript事件目的