废话不多少，直接上代码

第一种

<body>

    <div style="width:400px;height:400px;background:blueviolet" onclick="click()"></div>

    <script>

    function click(){

        console.log("第一种")

    }

    </script>

</body>

第二种

<body>

    <div style="width:400px;height:400px;background:blueviolet"></div>

    <script>

    let div = document.querySelectorAll("div")[0];

    div.onclick = function(){

        console.log("第二种")

    }

    </script>

</body>


第一种和第二种方法同一对象只能添加一个事件

第三种

<body>

    <div style="width:400px;height:400px;background:blueviolet"></div>

    <script>

    let div = document.querySelectorAll("div")[0];

    div.attachEvent("onclick",function(){//此处要带"on"

        console.log("第三种")

    })

    </script>

</body>


仅IE8及以下版本支持

此种方法可以为同一对象添加多个事件

第四种

<body>

    <div style="width:400px;height:400px;background:blueviolet"></div>

    <script>

    let div = document.querySelectorAll("div")[0];

    div.addEventListener("click",function(){//注意事件名称不带on

        console.log("第四种")

    })

    </script>

</body>


注意此种方法不支持IE8及其以下版本

此种方法可以为同一对象添加多个事件

反正我就爱用第四种，你们爱咋滴咋滴

js事件绑定的方法的更多相关文章

  1. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  2. js事件绑定细节说明

    javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触ja ...

  3. js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

    js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...

  4. jq中事件绑定的方法

    在唯品会实习生面试中,被面试官问了这么一个问题,“jQuery中绑定事件的方法有几个?”,以click事件为例,我当时想到的只有.click(),.bind(),.on()这三种,然后面试官又追问,“ ...

  5. js事件绑定的几种方式与on()、bind()的区别

    版权声明:本文为博主原创文章,未经博主允许不得转载 一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数, ...

  6. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

  7. js 事件绑定

    事件绑定的方式 1.  DOM  元素行内绑定 <div onclick="alert(1)"></div>   2. js on+eventType do ...

  8. jQuery的三种bind/One/Live/On事件绑定使用方法

    本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要的朋友参考下   今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQ ...

  9. js事件绑定函数

    js中事件绑定方法大致有三种: 1.在DOM元素中绑定 <input onclick="alert('在DOM中绑定')" type="button" v ...

随机推荐

  1. Hadoop之Storm基础

    1.离线计算是什么 离线计算:批量获取数据,批量传输数据,周期性批量计算数据,数据展示 代表技术:sqoop批量导入数据,hdfs批量存储数据,mapreduce批量计算数据,hive批量计算数据,* ...

  2. Jenkins+Maven+Gitlab+Nexus持续集成环境搭建

      1.软件及服务介绍 Jenkins:jenkins是实现代码自动化流程上线的工具,Jenkins是一个独立的开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个 ...

  3. 2017.11.15 hashmap的工作原理

    参考来自:http://blog.csdn.net/jeffleo/article/details/54946424 一 hashMap的基本概念 1.HashMap的定义 public class ...

  4. PHPer 应聘见闻

    关于我自己 我,很普通的一个开发,88年出生在皖南山区.从小学到高中毕业都没想过自己会从事软件开发,高考的误打误撞,被某普通二本院校收编.大学浑浑噩噩,对软件开发也没多大的兴趣,11年毕业后来杭,面试 ...

  5. JAVA加解密 -- 对称加密算法与非对称加密算法

    对称加密算法:双方必须约定好算法 DES 数据加密标准:由于不断地被破解 自98年起就已经逐渐放弃使用 AES 目前使用最多的加密方式,官方并未公布加密方式已被破解,替代DES 实现和DES非常接近 ...

  6. ActiveMQ实现负载均衡+高可用部署方案 -转载

    转:http://www.open-open.com/lib/view/open1400126457817.html 一.架构和技术介绍 1.简介 ActiveMQ 是Apache出品,最流行的,能力 ...

  7. leetcode268：Missing Number

    描写叙述 Given an array containing n distinct numbers taken from 0, 1, 2, -, n, find the one that is mis ...

  8. 浅谈Android移动开发程序员的职业发展之路

    现在几乎每个it公司都在开发移动产品,我最早知道Android还是在09年成都某学院上大学的时候,从新闻上知道有这么一家公司,创始人安迪·鲁宾很有名,但安卓到底是做什么的,我并没有关注. 到2010年 ...

  9. Oracle 和sqlserver 字符串补齐

    Oracle:Lpad函数 语法格式如下: lpad( string, padded_length, [ pad_string ] ) string 准备被填充的字符串: padded_length ...

  10. Linux-信号详解

    1.Linux支持的所有信号: $ kill -l ) SIGHUP ) SIGINT ) SIGQUIT ) SIGILL ) SIGTRAP ) SIGABRT ) SIGBUS ) SIGFPE ...