JavaScript(事件)
事件定义
用户在网页中的行为叫做事件
学习事件的目的:希望能自定义的让用户在网页中进行某种行为之后,去执行写好一段代码
语法:
事件源:on事件类型 = 函数
行内绑定:<标签 on 事件类型 = " 一行js代码或函数调用 "> </标签>
事件源:用户在触发事件的时候使用哪个标签 - 标签 - 获取标签
事件类型 - 用户在进行哪种行为;
1.鼠标类
单击 - click
双击 - dblclick
移入 - mouseover
移出 - mouseout
移入 - mouseenter
移出 - mouseleave
鼠标按下 - mousedown
鼠标松开 - mouseup
注意:按下和松开不针对哪个按键,只要是鼠标按键按下和松开就会触发
鼠标移动 - mousemove
滚轮滚动事件 - mousewheel
鼠标右击 - contextmenu
2.键盘类
键盘按下 - keydown - 不松开就一直触发
键盘抬起 - keyup - 使用频繁
敲击键盘 - keyprees - 其实也是按下
3.window类
加载事件 - load - 当网页中所有资源都有加载完成后,才会触发
滚动条滚动事件 - scroll - 当滚动条滚动了就会触发的事件
窗口大小改变事件 - resize - 当浏览器大小改变了就会触发的事件
4.表单类
获取焦点 - focus
失去焦点 - blur
下拉框选项改变的事件 - change
表单提交 - submit
注意:必须给form标签绑定
事件什么时候触发?当表单域中提交按钮(input的type为submit,或button的type为submit)被点击后或敲回车后触发,button默认就是submit
事件流
事件从开始发生到执行结束的流程
过程:
捕获:从外向内找目标元素
从window - document - document.documentElement - body - 父标签
目标:找到了,执行这个事件
冒泡:从内向外离开的过程 - 祖宗元素们的事件默认会在冒泡阶执行
事件绑定
事件侦听器 - 标签.addEventListener (事件类型 , 事件处理程序 , 是否在捕获阶段执行 - 可选 - 默认是false)
1.可以让事件在捕获阶段执行(非目标元素的事件)
2.可以让同类型的事件绑定多次并不会覆盖
绑定就是在内存存储事件
事件解绑
1.绑定事件的本质是在干什么?
将事件类型赋值为一个函数,存到内存中
2.为什么要解绑?
有些事件在执行结束后不要了
3.怎么解绑?
根据绑定方式不同,解绑方式也是不同的:
1.如果使用标签.on类型绑定的,给标签.on类型 = null
<body> <button>按钮</button> </body><script> var btn = document.querySelector("button") btn.onclick = functiong(){console.log(111)//delete this.onclick//删除对象的onclick属性this.onclick = nullconsole.dir(this) </script>
2.如果使用事件侦听器绑定的,就使用 标签.removeEventListener(事件类型, 对应函数)
注意:如果绑定的是匿名函数,这个事件的解绑不了的,必须使用有名字的函数
var fn = function() {console.log(111); } btn.addEventListener('click', fn) // 配套的解绑方法:removeEventListener btn.removeEventListener('click', fn)
JavaScript(事件)相关推荐
- javascript事件列表解说
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- javascript --- 事件托付
javascript 之 事件托付 长处:1.提高性能(仅仅须要对父级进行操作,子节点相同会拥有其相关属性和方法) 2.对于新加入的事件.也让其拥有父级事件的属性 <!doctype html& ...
- 【探讨】javascript事件机制底层实现原理
前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
- javaScript事件(二)事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
- onpaste事件不生效_从实际开发中来看JavaScript事件循环的使用场景
前言: 本文是介绍结合DOM事件流和JavaScript事件循环解决一个工作中的实际问题的过程,很多东西不只是面试的时候才会用得到 文中涉及到的代码demo地址:drag-and-eventloop ...
- javascript 事件对象
btn.onclick = function (event) {// event 就是事件对象var e = event || window.event; // window.event是兼容低版本I ...
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JavaScript 事件入门知识
JavaScript事件是由访问Web页面的用户引起的一系列操作; 例如:用户点击;当用户执行某些操作的时候,再去执行一系列代码; 一 事件介绍 事件一般是用于浏览器和用户操作进行交互;最早是IE和N ...
- JavaScript事件绑定
本文介绍一些JavaScript事件绑定的常用方法及其优缺点,同时在最后展示一个由 Dean Edwards 写的一个比较完美的事件绑定方案. 传统方式 element.onclick = funct ...
- 我理解的javascript事件循环(一)
javascript事件循环分为2种:一种是浏览器端事件循环,一种是node端事件循环. 此文只是捋一捋我对浏览器端事件循环的理解. 前言 我们都知道 JavaScript 是一门单线程语言,这意味着 ...
最新文章
- Java计算一个对象所占内存大小_Java程序计算各种对象所占内存的大小的方法
- JAVA学习(七)__Spring的@Autowired注入规则
- 动态排序JavaBean
- Java实现获取HDFS子目录数量_Java实现读取HDFS目录
- phpcms v9中模板标签和联动菜单的使用方法详解
- Chain of responsibility(职责链)--对象行为型模式
- 最小花费(信息学奥赛一本通-T1344)
- jssdk更新日志_关于jssdk版本的阿里云网站内容、产品介绍、帮助文档、论坛交流和云市场相关问题...
- 【福利派送】高质量AI书籍免费送给大家
- 【软件相关】Multisim完整教程
- 论文丨免费下载SCI全文文献的10个方法
- Javase基础思维导图
- 1stopt拟合步骤_1stopt三维曲线拟合
- web功能测试方法大全——完整!全面!(纯干货,建议收藏哦~)
- 圣多米尼克高中有计算机课吗,院校库_VPEA北美留学院校数据查询中心
- Markdown 并排显示图片
- matlab2016环境变量,matlab环境变量path
- 人工神经网络的基础数学模型来自哪里
- harry-用while循环画对称图形
- RGB的光的三原色、品红黄青颜料的三原色
热门文章
- IXWebHosting虚拟主机首页优先级设置方法
- python-JASN 基本用法
- 2021江苏连云港高考成绩查询时间,2021连云港市地区高考成绩排名查询,连云港市高考各高中成绩喜报榜单...
- arguments,calleecaller
- 程序员视频学习网站,推荐这几个网站不错
- Java API操作ZK node
- error: ‘CV_RGB2GRAY’ was not declared in this scope | OpenCV 找不到 | 错误简记
- Java堆内存溢出解决方案
- MySQL---表的增删改查(进阶)
- 2021-12-12(JZ18 删除链表的节点)