在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定;在JavaScript代码中绑定;绑定事件监听函数。

直接在DOM元素绑定事件

 <div id="btn" onclick="clickone()"></div> //直接在DOM里绑定事件
<script>
    function clickone(){ alert("hello"); }
</script>

在JavaScript代码中绑定

 <div id="btn"></div>
<script>
  document.getElementById("btn").onclick = function(){ alert("hello"); } //脚本里面绑定
</script>

绑定事件监听函数

<div id="btn"></div>
<script>
 document.getElementById("btn").addeventlistener("click",clickone,false); //通过侦听事件处理相应的函数,

//第三个参数设置为true就在捕获过程中执行,反之就在冒泡过程中执行处理函数。

 
function clickone(){ alert("hello"); }
</script>

IE下使用attachEvent/detachEvent:addEventListener 只支持到 IE 9,所以为了兼容性考虑,在兼容 IE 8 以及以下浏览器可以用 attachEvent 函数,和 addEventListener 函数表现一样,除了它绑定函数的 this 会指向全局这个缺点以外,使用为了考虑兼容性,我们在使用前,可以添加下面这段代码(下面使用采用惰性加载的方法):

 var addListener = null,
removeListener = null;
if (typeof window.addEventListener === 'function') {
addListener = function(el, type, fn) {
el.addEventListener(type, fn, false);
};
removeListener = function(el, type, fn) {
el.removeEventListener(type, fn, false);
};
} else if (typeof doc.attachEvent === 'function') { //'IE'
addListener = function(el, type, fn) {
el.attachEvent('on'+type, fn);
};
removeListener = function(el, type, fn) {
el.detachEvent('on'+type, fn);
};
} else {
addListener = function(el, type, fn) {
el['on'+type] = fn;
};
removeListener = function(el, type, fn) {
el['on'+type] = null;
};
}

最后,进行事件绑定时可以这么写:

addListener(dom, "click", EventHandler.confirmBtnClickEvent);
var EventHandler = {
confirmBtnClickEvent: function(e){}
//其他事件的回调函数...
};

办公资源网址导航 https://www.wode007.com

区别说明:

方式1和方式2是我们经常用到的,那么既然已经有两种绑定事件的方法为什么还要有第三种呢?答案是这样的:

用 "addeventlistener" 可以绑定多次同一个事件,且都会执行,而在DOM结构如果绑定两个 "onclick" 事件,只会执行第一个;在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

方式3注册了事件监听,还可以通过“removeListener”使用来取消监听。

通过原生js对DOM事件的绑定的几种方式总汇的更多相关文章

  1. js 多个事件的绑定及移除(包括原生写法和 jquery 写法)

    需要打开控制台查看效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. 原生js操作dom的方法

    今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...

  3. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  4. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  5. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  6. 原生js实现数据的双向绑定

    原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...

  7. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  8. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  9. 原生JS 实现 dom ready

    记录一下项目技术问题: 记得:放在head标签内的脚本,第一时间执行 var baseTools = { // dom ready ready: function( f ){ var ie = !!( ...

随机推荐

  1. CVE¬-2020-¬0796 漏洞复现(本地提权)

    CVE­-2020-­0796 漏洞复现(本地提权) 0X00漏洞简介 Microsoft Windows和Microsoft Windows Server都是美国微软(Microsoft)公司的产品 ...

  2. requireJS模块化

    1. JavaScript里面js代码的写法:目标是解决冲突和依赖 函数式编程,全局函数和变量--很容易覆盖 对象的写法--也会从外面改变 命名空间:利用名称不同缓冲js代码的冲突---名称太长,不方 ...

  3. 如何监控 Linux 服务器状态?

    Linux 服务器我们天天打交道,特别是 Linux 工程师更是如此.为了保证服务器的安全与性能,我们经常需要监控服务器的一些状态,以保证工作能顺利开展. 本文介绍的几个命令,不仅仅适用于服务器监控, ...

  4. 关于vue不能像angular深度克隆数据解决办法

    vue要让数据源实现响应式前提必须要在初始化的时候有这个属性 如果没有这个属性,也可实现数据实时响应.解决方法: this.数组/对象.spice(0,1,'属性值') Vue.set(要修改的数组或 ...

  5. centos7下docker的安装教程

    Centos7下docker安装教程以及踩过的那些坑 推荐在Centos下安装docker,在windows下安装docker可能会遇到很多的问题,而且docker官方推荐使用linux环境来使用do ...

  6. @loj - 3157@「NOI2019」机器人

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 小 R 喜欢研究机器人. 最近,小 R 新研制出了两种机器人,分 ...

  7. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(六)

    系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...

  8. JSONobject按照put顺序存储和读取

    new的时候加true即可: JSONObject jsonObject = new JSONObject(true);

  9. 消息队列——Kafka基本使用及原理分析

    文章目录 一.什么是Kafka 二.Kafka的基本使用 1. 单机环境搭建及命令行的基本使用 2. 集群搭建 3. Java API的基本使用 三.Kafka原理浅析 1. topic和partit ...

  10. SpringMVC整合mybaitis

    目录 一.新建一个基于Maven的Web项目 二.创建数据库与表 三.添加依赖包 四.新建POJO实体层 五.新建MyBatis SQL映射层 六.完成Spring整合MyBatis配置 七.创建服务 ...