js event 使用讲解

@拭目以待:首发于js event 使用讲解

本文讲解事件的绑定,触发,删除及NodeList对象对addEventListener方法的扩展。

提示:以下JS示例中所使用的DOM节点均来源于百度首页的DOM结构。如果需要测试,可以打开百度首页,将代码粘入控制台执行即可。

一.绑定事件(以下示例可以打开百度首页进行测试)

1.通过HTML属性,EX:

<button onclick="alert('this is button')">

这种方式简单粗暴,不推荐使用。

2.通过DOM元素属性,EX:

document.querySelector('#kw').onclick = function(){
alert('点击事件被执行了');
}

但是通过这种方式绑定的事件,多次绑定后会存在覆盖。EX:

document.querySelector('#kw').onclick = function(){
alert('我又进行了一次绑定');
}

通过两次绑定,触发时仅会执行最后一次的事件绑定,效果并如下图所示:


如果同时存在通过HTML属性绑定的事件时,通过DOM元素属性绑定的事件会覆盖通过HTML属性绑定的事件。

通过代码进行触发onclick事件方式:

document.querySelector('#kw').onclick() 
//也可以通过进行触发
document.querySelector('#kw').click()

这两种方式区别虽然都触发了事件函数,但是通过onclick()与click()存在本质上的区别,click()是真实的触发了鼠标点击事件,而onclick只不过是调用了当前DOM对象上所绑定的onclick函数。通过下面的这个示例可以看出通过onclick()调用事件函数后并未生成window.event对象,这以足以说明当前事件并未触发。EX:

document.querySelector('#kw').onclick = function(e){
console.log(e);
};
// onclick()
document.querySelector('#kw').onclick(); // => undefined
// click()
document.querySelector('#kw').click(); // => [Object MouseEvent]

这里需要特殊说明的是,除了onclick事件可以通过click()方法进行事件触发外,其它事件并不能通过代码的方式进行触发。EX:

document.querySelector('#kw').onresize = function(){
alert('onresize');
}
document.querySelector('#kw').resize();   // => TypeError: document.querySelector(...).resize is not a function

3.通过EventTarget事件接口:

EventTarget可以为document、Element、XMLHttpRequest 其它待补充?
语法:

EventTarget.addEventListener(type, listener, options, useCapture);
  • type: 表示监听事件类型的字符串

  • listener: 事件监听函数

  • options: 事件监听函数配置参数

  • options.capture: 是否捕获冒泡

  • options.once: 是否仅执行一次

  • options.passive: 是否永远不会调用 preventDefault()

useCapture: 指定事件是否在捕获或冒泡阶段执行.true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行

EX:

document.querySelector('#kw').addEventListener('click', function(){
console.log('addEventListener click');
}, false);

二.触发事件[trigger]

无论是通过DOM元素属性还是通过EvnetTarget事件接口绑定的事件,除了click可以直接通过.click()方法触发事件外。其它的事件如何通过代码来触发?

1.通过document对象

var event = document.createEvent('HTMLEvents'); // 通过文档对象 document 的createEvent()方法创建新的 Event 对象。
event.initEvent('click', true, true);  //执行initEvent初始化事件对象类型。
document.querySelector('#kw').dispatchEvent(event); //触发click事件, 执行后返回用于标识执行是否成功的boolean值
// EX: mousedown事件绑定及执行
document.querySelector('#kw').addEventListener('mousedown', function(e){
console.log(e);  // => Event{type: "mousedown", ...}
});
var event = document.createEvent('HTMLEvents'); 
event.initEvent('mousedown', true, true);  
document.querySelector('#kw').dispatchEvent(event); // => true

createEvent实际上不是由 Document 接口定义的,而是由 DocumentEvent 接口定义的。只要支持 Event 模块,那么 Document 对象就会实现 DocumentEvent 接口并支持该方法。

2.通过Event对象

var myEvent = new Event('click');  //实例出类型为click的事件对象
document.getElementById('kw').dispatchEvent(myEvent); //触发click事件, 执行后返回用于标识执行是否成功的boolean值

EX: mousedown事件绑定及执行

document.querySelector('#kw').addEventListener('mousedown', function(e){
console.log(e); // => Event{type: "mousedown", ...}
});
var myEvent = new Event('mousedown'); 
document.getElementById('kw').dispatchEvent(myEvent); // => true

这两种方式实现效果完全相同,通过两种不同的方式生成 Event 对象实例,然后执行dispatchEvent()方法进行事件触发。

相比较而言第二种方式使用更加合理,且由于第一种方式已经从web标准中删除,所以推荐使用第二种方式。

**相关键接: **
createEvent已从Web标准中删除
initEvent已从Web标准中删除

三.删除事件

1.删除通过HTML属性增加的事件,EX:

<button onclick="alert('this is button')">
document.querySelector('#kw').onclick = null;

2.删除通过DOM元素属性增加的事件,EX:

document.querySelector('#kw').onclick = function(){
alert('点击事件被执行了');
}
document.querySelector('#kw').onclick = null;

3.通过addEventListener增加的事件,EX:

var eventCall = function(){
console.log('addEventListener click');
};
document.querySelector('#kw').addEventListener('click', eventCall, false);
document.querySelector('#kw').removeEventListener('click', eventCall);

四.NodeList扩展addEventListener

NodeList.prototype.addEventListener = function(type, listener){
  [].forEach.call(this, function(v, i){
    v.addEventListener(type, listener);
  })
};
document.querySelectorAll('div').addEventListener('click', function(e){
console.log(e)
});

如果想详细了解Event,请查阅发布于github jTool类库下的 Event 对象。

@拭目以待

个人站点:www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895):How To Make Love

《野生前端工程师》专辑中所有文章均为@拭目以待 原创,转载请注明出处。

推荐阅读更多精彩内容

  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 3,410评论 1 4
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 486评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 351评论 0 1
  • JQuery的源码看过吗?能不能简单概况一下它的实现原理? jQuery.fn的init方法返回的this指的是什...
    过往的雨阅读 913评论 0 10
  • 1.注册账号 打开https://github.com/,在下图的框中,分别输入自己的用户名,邮箱,密码 2.创建...
    像飞翔一样去飞翔阅读 39评论 0 0