详解JavaScript事件处理程序

一、事件是什么？

事件是用户与浏览器进行交互的方式。譬如用户点击按钮就会产生click事件，浏览器会找到相应js代码并执行，我们要做的就是按照规则编写js代码放在指定位置即可。

---

二、怎么使用事件功能？

两种方式使用事件功能：1、增加元素的事件属性；2、调用内置对象的方法addEventListener。

    
    
    



    Change color
    click
    

---

三、核心概念

1、事件冒泡

当元素发生了某个事件，不仅会执行本元素的事件处理程序，还会一直向上寻找所有父元素对应的事件处理程序并执行。

---

2、事件委托

让父元素监听执行子元素的某个事件，原理：子元素没有注册事件处理程序，事件会冒泡向上寻找相应执行程序。

    
Item 1
    
Item 2
    
Item 3
    
Item 4
    
Item 5
    
Item 6

// 父元素增加 click 监听事件
document.getElementById("parent-list").addEventListener("click", function(e) {
    // e.target 是被点击元素
    if(e.target && e.target.nodeName == "LI") {
        console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
    }
});

---

四、Event

事件都是继承于 Event 对象。

1、event.preventDefault()

功能：不执行默认操作，但是事件还是会继续冒泡。

实例：在表单提交中，通常会做一些数据校验，如果数据不符合格式，可以用preventDefault() 方法来阻止数据发送到服务器的默认操作。更多...

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

---

2、event.stopPropagation

功能：让事件响应到此结束，不再向上冒泡。更多...

video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};

---

五、EventTarget

EventTarget 是一个 DOM 接口，可以监听、接收、移除事件。

1、EventTarget.addEventListener

功能：将 回调函数 和 元素事件 进行绑定，当事件发生时，回调函数会被执行。更多...

function clickTest(event) {
  if (event.type == click) {
  } else {
  }
}

// 添加事件监听器
var el = document.getElementById("btnTest");
el.addEventListener("click", clickTest);

---

2、EventTarget.removeEventListener

删除用 EventTarget.addEventListener 注册的事件处理程序。更多...

var body = document.querySelector('body'),
    clickTarget = document.getElementById('click-target'),
    mouseOverTarget = document.getElementById('mouse-over-target'),
    toggle = false;

function makeBackgroundYellow() {
    'use strict';

    if (toggle) {
        body.style.backgroundColor = 'white';
    } else {
        body.style.backgroundColor = 'yellow';
    }

    toggle = !toggle;
}

clickTarget.addEventListener('click',
    makeBackgroundYellow,
    false
);

mouseOverTarget.addEventListener('mouseover', function () {
    'use strict';

    clickTarget.removeEventListener('click',
        makeBackgroundYellow,
        false
    );
});

---

3、EventTarget.dispatchEvent

功能：代码中直接触发事件。更多...

实例：编程方式生成单击事件。自定义事件

function simulateClick() {
  const event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });
  const cb = document.getElementById('checkbox');
  const cancelled = !cb.dispatchEvent(event);

  if (cancelled) {
    // A handler called preventDefault.
    alert("cancelled");
  } else {
    // None of the handlers called preventDefault.
    alert("not cancelled");
  }
}

---

六、查看所有可用事件

• 所有可用事件这里 查看>>>

---

七、参考文档

• 详解JavaScript事件处理程序