废话不多少，直接上代码

第一种

<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. scrapy-splash抓取动态数据例子十四

    一.介绍 本例子用scrapy-splash爬取超级TV网站的资讯信息,输入给定关键字抓取微信资讯信息. 给定关键字:数字:融合:电视 抓取信息内如下: 1.资讯标题 2.资讯链接 3.资讯时间 4. ...

  2. eclipse sun.net 下包无法导入问题

    项目中用到了:sun.net.ConnectionResetException.但是sun.net包里的类,在eclipse里默认是不让用的. 解决办法是自定义access rules 工程上右键-& ...

  3. CSAPP:异常控制流

    在一般的情况下,处理器处理的指令序列是相邻的(顺序执行). 异常控制流提供了指令的跳转,它一部分是由硬件实现的,一部分是由操作系统实现的. 异常处理 在系统启动时,操作系统分配和初始化一张称为异常表的 ...

  4. 《windows核心编程》 18章 堆

    堆的优缺点: 优点:让我们专心解决手头问题,不必理会分配粒度和页边界这类事情. 缺点:分配和释放内存块的速度比其他方式慢,而且也无法对物理存储器的调拨和撤销进行直接控制. 什么是堆: 堆就是一块预订的 ...

  5. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（四）—— session传递登录人信息显示+用户注销

    前面的学习,已经做好了简单的登录和主页,涉及了三层软件架构,mvc,easyui的layout.tree.tab.window,sqlite,动软代码自动生成. 下面完善一下登录跳转主页后,在sout ...

  6. CentOS 7 中 Docker 的安装和卸载

    安装Dokcer Docker 软件包已经包括在默认的 CentOS-Extras 软件源里.因此想要安装 docker,只需要运行下面的 yum 命令: [root@localhost ~]# yu ...

  7. linux 自启动

    使用chkconfig命令可以查看在不同启动级别下课自动启动的服务(或是程序),命令格式如下:chkconfig --list可能输出如下:openvpn 0:关闭 1:开启 ...... 6:关闭 ...

  8. sublime text3 修改左边栏背景颜色为编辑栏颜色

    用Package Control安装Theme-Afterglow插件: Ctrl+Shift+P -> install ,如图 点击Install Package,在弹出框中输入Theme-A ...

  9. Java 实现单链表反序

    //单链表反序 public class SingleLinkedListReverse { public static void main(String[] args) { Node head = ...

  10. 淡入淡出效果模板 js

    html文件中: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...