JavaScript疑难杂症系列-事件

事件这块知识点虽然是老生长谈的,但对于我来讲多多整理,多多感悟,温故知新,每次看看这块都有不一样的收获.( 在这里我不会长篇大论,只会挑重点;具体的小伙伴们自行查找)

什么是事件

在编程时系统内发生的动做或者发生的事情.
系统经过它来告诉编程者,在编程者愿意的状况下,编程者一某种方式对它作出回应.

添加事件方式

元素属性

var btn = document.querySelector('button');

btn.onclick = function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

或者

var btn = document.querySelector('button');

function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

btn.onclick = bgChange

行内事件

<button onclick="bgChange()">Press me</button>

function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

或者

<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>

注册事件监听

addEventListener()和removeEventListener();

btn.addEventListener('click', function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
});

或者

btn.removeEventListener('click', bgChange);

优缺点

• 元素属性

优:
     1. 兼容性好
     2. 行为的分离
     3.便于操做当事对象，由于function是做为on***的属性出现的，可直接用this引用当事对象
缺: 
     1. 给同一个监听器注册多个处理器,后面的会覆盖前面
     btn.onclick=function(){alert('a')};
     btn.onclick=function(){alert('b')};

• 行内事件

优:
     1. 兼容性好,是最先的事件处理方法
     2. 方便快捷
缺: 
     1. 代码杂糅
     2. 难以管理和效率低下,一个按钮看起来还好，可是若是有一百个按钮呢？得在文件中加上100个属性
     3. 文档很难解析

• 注册事件监听

优:
     1. 它容许为事件添加多个单独的处理程序。这对于DHTML库或Mozilla扩展尤为有用，即便使用其余库/扩展也须要很好的工做
     2. 它可让你更好地控制阶段，当听者被激活（捕获与冒泡）
     3. 它适用于任何DOM元素，而不只仅是HTML元素
     4. 行为的分离 
缺:
    兼容性(不过网上有不少成熟的hack);

事件对象

具体请看event详解-https://developer.mozilla.org

• 在触发DOM上的某个事件时，会在事件处理程序函数中会产生一个事件对象event，这个对象中包含着全部与事件有关的信息。包括致使事件的元素、事件的类型以及其余与特定事件相关的信息.

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
    alert(event.type); //"click"
}
btn.addEventListener("click", function(event) {
    alert(event.type); //"click"
}, false);

event.currentTarget与event.target

事件对象event的target属性始终是事件刚刚发生的元素的引用

• 例如，你可能有一组16块方格，当它们被点击时就会消失。用e.target老是能准确选择当前操做的东西（方格）并执行操做让它消失，而不是必须以更困难的方式选择它.

var divs = document.querySelectorAll('div');

for (var i = 0; i < divs.length; i++) {
  divs[i].onclick = function(e) {
    e.target.style.backgroundColor = bgChange();
  }
}

阻止默认行为(event.preventDefault())

• 有时，你会遇到一些状况，你但愿事件不执行它的默认行为例如自定义注册表单

var form = document.querySelector('form');
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var submit = document.getElementById('submit');
var para = document.querySelector('p');
form.onsubmit = function(e) {
  if (fname.value === '' || lname.value === '') {
    e.preventDefault();
    para.textContent = 'You need to fill in both names!';
  }
}

事件冒泡及捕获(event.stopPropagation())

描述事件触发时序问题的术语。
事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。
事件冒泡是自下而上的去触发事件。
绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡

事件委托

冒泡还容许咱们利用事件委托——这个概念依赖于这样一个事实,若是你想要在大量子元素中单击任何一个均可以运行一段代码，您能够将事件监听器设置在其父节点上，并将事件监听器气泡的影响设置为每一个子节点，而不是每一个子节点单独设置事件监听器

如:鼠标放到li上对应的li背景变灰

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
</ul>

• 利用事件冒泡实现

$("ul").on("mouseover",function(e){
     $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
})

• 给全部li都绑上事件

$("li").on("mouseover",function(){
      $(this).css("background-color","#ddd").siblings().css("background-color","white");
})

代码简洁程度上，二者是相若仿佛的。
前者少了一个遍历全部li节点的操做，因此在性能上确定是更优的
若是在绑定事件完成后，页面又动态的加载了一些元素
第二种方案，因为绑定事件的时候item7还不存在，因此为了效果，咱们还要给它再绑定一次事件.

自定义事件(DOM的事件模拟又称“伪DOM自定义事件”)

• js原生自定义事件分三个阶段(创造、初始化、触发)

摘自 https://developer.mozilla.org...

(1). 创造

var event = document.createEvent(type);
type:是一个字符串，表示要建立的事件类型。事件类型可能包括是一个字符串，表示要建立的事件类型。
事件类型可能包括"UIEvents", "MouseEvents", "MutationEvents", 或者 "HTMLEvents"

(2) 初始化

event.initEvent('build', true, true);
于初始化经过DocumentEvent接口建立的Event的值。支持三个参数：initEvent(eventName, canBubble,preventDefault)
分别表示事件名称，是否能够冒泡，是否阻止事件的默认操做

(3). 触发

elem.dispatchEvent(event);
参数event表示事件对象，是createEvent()方法返回的建立的Event对象

监听方法

elem.addEventListener('build', function (e) {
// e.target matches elem
}, false);

• jq自定义dom事件

(1). trigger()

经常使用模拟
  模拟方法操做
   $("#btn").trigger("click");
     或者    
   $("#btn").click();

自定义事件
   $("#btn").on("myClick", function () {
       $("#test").append("<p>个人自定义事件。</p>")；
    })；    
   $("btn").trigger("myClick");

传递数据
  trigger(tpye[,datea])；
  第一个参数是要触发的事件类型，
  第二个单数是要传递给事件处理函数的附加数据，以数组形式传递。
  一般能够经过传递一个参数给回调函数来区别此次事件是代码触发的仍是用户触发的
   $("#btn").bind("clickCustomize", function (event, message1, message2) { //获取数据
        $("#test").append("p" + message1 + message2 + "</p>");
   });
   $("#btn").trigger("clickCustomize",["个人自定义","事件"]); //传递两个数据
   $(“#btn”).trigger(“clickCustomize”,["个人自定义","事件"]); //传递两个数据

(2). triggerHandler();(阻止默认事件)

triggerHandler("lickCustomize");

• DOM自定义事件优点与劣势：

(1)、优点：

一、自定义事件彻底由咱们控制触发时机，这就意味着实现了一种 JavaScript 的解耦。咱们能够把多个关联但逻辑复杂的操做利用自定义事件的机制灵活地控制好
二、既然绑定也能够解绑，若是不须要了，直接移除绑定事件

(2)、劣势

一、兼容性差，要本身hack(jq除外)