JS中事件的绑定和解绑
JS中事件的绑定和解绑
- 一、 了解事件
- 1. 事件的三要素
- 2. 事件绑定分类
- 2-1. dem0级 事件
- 2-2. dom2级 事件
- 二、 事件的绑定
- 1. dom0级 事件
- 2. dom2级 事件（事件监听器）
- 三、 事件的解绑
- 1. 解绑 dom0 级事件
- 2. 解绑 dom2 级事件
- 三、补充------复杂数据类型的比较
一、 了解事件
事件包括 原生事件 和 自定义事件
1. 事件的三要素
- 事件源： 在谁身上绑定事件
- 事件类型： 什么事件
（JS中常见的事件类型） - 事件处理函数： 当行为发生的时候，执行哪一个函数
2. 事件绑定分类
2-1. dem0级 事件
on… 的形式
2-2. dom2级 事件
事件监听
二、 事件的绑定
1. dom0级 事件
语法： 事件源.on事件类型 = 事件处理函数
2. dom2级 事件（事件监听器）
addEventListener()
标准浏览器使用
语法： 事件源.addEventListener(‘事件类型’, 事件处理函数)
至少两个参数
第三个参数 ：
默认是 false 表示 冒泡 （按照从 目标 到 window 的顺序来执行所有的事件）
可以选填为 true 表示 捕获 （按照 从 window 到目标 的顺序来执行所有的事件）
可以同时给 同一个事件类型 绑定多个 事件处理函数
绑定多个事件处理函数的时候，顺序绑定 顺序执行attachEvent()
IE低版本使用
语法： 事件源.attchEvent(‘on事件类型’， 事件处理函数)
只有两个参数
可以同时给 一个事件类型 绑定多个 事件处理函数
绑定多个事件处理函数的时候，顺序绑定 倒叙执行
三、 事件的解绑
1. 解绑 dom0 级事件
因为在给 dom0级事件 绑定的时候是赋值的形式，所以直接再次给它赋值为 null ，所以就把之前的事件处理函数干掉了
2. 解绑 dom2 级事件
- removeEventListener()
语法： removeEventListener(‘事件类型’, 要解绑的事件处理函数)
注意： 如果你想 解绑事件，那么在你 绑定事件 的时候，一定要把 函数单独书写
写成一个 具名函数 的形式，以 函数名 的形式绑定事件处理函数 - detachEvent()
语法： detachEvent(‘on事件类型’, 要解绑的事件处理函数)
注意： 如果你想 解绑事件，那么在你 绑定事件 的时候，一定要把 函数单独书写
写成一个 具名函数 的形式，以 函数名 的形式绑定事件处理函数
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 100px;height: 100px;/*IE低版本这个属性用不了*//* background-image: linear-gradient(to right, orange, red); *//*IE低版本*/background-color: blue;}.btn {width: 100px;height: 40px;font-size: 20px;}</style>
</head><body><div class="box" id="box"></div><button class="btn" id="btn">解绑事件</button><script>//获取元素var box = document.querySelector('.box')var btn = document.querySelector('.btn') // 1. dom0级 事件//绑定box.onclick = function () {box.style.left = 50 + 'px'} //解绑box.onclick = null// 2. dom2级 事件//标准浏览器// 提前准备号事件处理函数function fn() {console.log('绑定事件')}//绑定box.addEventListener('click', fn)//解绑btn.onclick = function () {box.removeEventListener('click', fn)console.log('我执行了')} //IE低版本var box = document.getElementById('box')var btn = document.getElementById('btn')//绑定box.attachEvent('onclick', fn)//解绑btn.onclick = function () {box.detachEvent('onclick', fn)console.log('我执行了')}</script></body></html>
标准浏览器
IE低版本浏览器
三、补充------复杂数据类型的比较
复杂数据类型 在比较的时候，是进行地址的比较
复杂数据类型的变量 存储的就是一个在 堆 里面的地址
JS中事件的绑定和解绑相关推荐
- JS事件的绑定和解绑
/* 事件三要素 1.事件源:在谁的身上绑定事件 2.事件类型:什么事件 3.事件处理函数:当行为发生的时候,执行那一个函数 ==>div.οnclick=function(){} ==> ...
- Vue之组件自定义事件的绑定和解绑
不知道小伙伴们还记不记得在用 Vue 构建 TodoList 案例的博客中,我们有涉及到要从子组件中把数据传递给父组件,当时我用的方法是,让父组件给子组件传递一个函数,然后子组件把要传过来的数据放在那 ...
- 11-jQuery的事件绑定和解绑
[转]11-jQuery的事件绑定和解绑 1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type ( ...
- jQuery的事件绑定和解绑
1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...
- 后处理程序文件大小的变量_【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？...
关注「松宝写代码」,精选好文,每日一题 作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤 风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
- 7月个人：Windows和Linux绑定和解绑ARP 了解ARP命令的用途。 掌握ARP命令的使用。...
Windows和Linux绑定和解绑ARP 了解ARP命令的用途. 掌握ARP命令的使用. ARP地址解析协议是一个重要的TCP/IP协议,可以用于确定对应ip地址的网卡物理地址.也可以使用人工方式输 ...
- js中事件捕获和事件冒泡
全栈工程师开发手册 (作者:栾鹏) js系列教程8-事件操作全解 js中事件捕获和事件冒泡 其实不仅在js中,在面向对象的编程语言中或多或少涉及到这个问题.js编程的事件全解,你可以到我的主页,这里给 ...
- vue-企业微信绑定和解绑
一.企业微信绑定解绑 项目中需要对账号进行企业微信的绑定和解绑 企业微信页面显示: <FormItem label="企业微信:">{{account.wechat}} ...
- 安卓案例：绑定和解绑服务
安卓案例:绑定和解绑服务 一.运行效果 二.实现步骤 1.创建安卓应用BindUnbindService
最新文章
- 成功解决 Exception: URL fetch failure on https://s3.amazonaws.com/img-datasets/mnist.npz: None -- [Errno
- 项目使用encode_Spring Cloud Security：Oauth2使用入门
- java6集合编程题
- 最长上升子序列(LIS)长度
- sscanf，sscanf_s及其相关用法(字符串格式化为其他类型)
- 自己寫的 Loading JS插件
- 程序员35岁之后的出路_35岁的程序员走向何方？
- es6 core-decorators.js
- windows防火墙ntp服务器_NTP教学续集已发送，请你查收！
- 10月15日发布？一加7T系列概念图曝光：依旧后置竖排相机模组
- 1.4 循环语句 方法
- 排序算法--直接插入排序
- plsql快捷执行方式_UG编程必备的快捷键，收藏转发！
- git 添加远程服务器,远程搭建git服务器新手踩坑
- YUV 和 YUV420
- TransE算法原理与代码解析（2021-06-22）
- Achain 钱包部署
- Python 求数字开方
- JS对象（对象的创建、属性的增删改查、属性的检测和枚举）
- 英雄联盟祖安服务器要维护多久,英雄联盟祖安大区到底有多凶残？手速慢了必然赢不了对面!...