废话不多少，直接上代码

第一种

<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. python pip更换下载源(转)

    对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太慢,浪费时间.而且经常出现下载后安装出错问题.所以把PIP安装源替换成国内镜像,可以大幅提升下载速度,还可以提高安装成 ...

  2. Node.js 使用http客户端得到网站的图片下载到本地

    以下代码有些冗余,大家捡核心看就好. // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // cheerio模块,提供了 ...

  3. 倍福TwinCAT(贝福Beckhoff)应用教程12.3 TwinCAT控制松下伺服 NC进阶

    在前面一节,我们简单介绍了通过PLC+HMI实现完整控制松下伺服的上使能-运动,采集位置,速度等功能,这里我们会大量简化用到的贝福功能块(为了更加实用).首先依然是对单个轴的封装,我们之前的做法,例如 ...

  4. crm查询和删除审核历史记录

    using System;     using System.Linq;     using Microsoft.Xrm.Sdk;     using Microsoft.Xrm.Sdk.Query; ...

  5. ES标准中的相等比较算法 SameValue SameValueZero

    1.相等比较算法 The Abstract Equality Comparison Algorithm (==) The Strict Equality Comparison Algorithm (= ...

  6. BZOJ 1016 JSOI 2008 最小生成树计数 Kruskal＋搜索

    题目大意:给出一些边,求出一共能形成多少个最小生成树. 思路:最小生成树有非常多定理啊,我也不是非常明确.这里仅仅简单讲讲做法.关于定各种定理请看这里:http://blog.csdn.net/wyf ...

  7. GIS中的坐标系

    原文地址:http://www.cnblogs.com/onsummer/p/7451128.html 从第一次上地图学的课开始,对GIS最基本的地图坐标系统就很迷.也难怪,我那时候并不是GIS专业的 ...

  8. 一个文件查看你选择 Run as Android applications 都干了啥

    <?xml version="1.0" encoding="UTF-8"?> <project name="PushFastDemo ...

  9. (016)给定一个有序数组(递增)，敲代码构建一棵具有最小高度的二叉树(keep it up)

    给定一个有序数组(递增),敲代码构建一棵具有最小高度的二叉树. 因为数组是递增有序的.每次都在中间创建结点,类似二分查找的方法来间最小树. struct TreeNode { int data; Tr ...

  10. 文件打开的过程——调用fd=open()时操作系统所做的工作

    fd=fopen()是一个系统调用.用于依据文件名称打开一个文件.返回该文件的文件描写叙述符,文件打开后进程便能够依据文件描写叙述符fd进行其它操作,比方读,写,关闭等操作. 各个操作系统打开文件的过 ...