Javascript事件绑定常见方案详解
Javascript事件绑定常见方案详解
让js对用户的操作做出相应的响应,就要对事件进行绑定
DOM元素绑定事件处理function函数,不同的操作对应不同的函数名称
常见的三种绑定方式
(1)在DOM元素上直接绑定事件
(2)在js标签(实现分离)中绑定事件
(3)通过DOM lev3级事件绑定标准(事件监听)绑定事件
第一种绑定方式(DOM元素上直接绑定)
function Mybtn(){ window.confirm("我返回给用户的响应"); }
分析总结:当用户点击按钮时,触发Mybtn函数,然后返回,非常简单,这种直接写入元素中的方法很早就有,隶属于DOM的lev0级标准,所以兼容性非常好,IE8以下几乎没有问题,并且在全局范围内执行,因此Mybtn()内部的this指向全局对象window,需要注意是,想要操作这个被点击的DOM元素,this它是无效的。
第二种绑定方式(js双标签中绑定事件/实现分离)
<script> document.getElementById('btn').onclick=function(){ window.confirm("我返回给用户的响应,我是匿名函数"); }
分析总结:首先获取DOM元素,将.onclick作为方法,属性值作为函数(匿名函数),这种方法会让文档结构清晰易维护和管理,并且函数内部的this直接指向该DOM对象,如果使用函数来调用其他函数(回调函数),DOM元素.οnclick=function{函数1(),函数2()},这时函数1/函数2的this就指向了window。
缺陷:只能绑定一个事件,绑定处理一个函数,绑定两个的话第一个会被覆盖。
注意:button标签必须放在script双标签之前,否则无效。
第三种绑定方式(lev3级事件绑定标准-事件监听)
document.getElementById('Mybtn').addEventListener('click',fun); function fun(){ alert("我返回给用户的响应"); }
IE8标准
语法:element.attachEvent(event, function)
event:事件,IE标准需要加on,如onload
function:函数,触发时执行的函数
注意:
(1)如果添加了多个事件处理函数, 按"添加时的先后顺序来执行"
(2)事件参数去掉事件名称的’on’(W3C标准)
(3)事件处理函数中的this指向DOM节点自身(W3C标准)
总结:
常规的事件绑定只能绑定最后绑定的事件,而事件监听可以绑定多个事件,并且可以解除绑定,还可以封装事件监听,需要注意的是,IE8以下需要使用element.attachEvent(event,function)进行事件监听的绑定。
作者: 王佳斌
来源:CSDN
原文:https://blog.csdn.net/weixin_44198965/article/details/89599226
版权声明:本文为博主原创文章,转载请附上博文链接!
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
编程小知识之 JavaScript 文件读取
编程小知识之 JavaScript 文件读取本文介绍了两种在 JavaScript 读取文件的方法 文件读取在当今的编程语言中应该算是一项比较 trivial 的工作了,语言的标准库一般都会帮助我们做好文件抽象与读写缓存,我们仅需要熟悉和运用相关的 API 即可. 但是 JavaScript 由于安全性的原因,一直以来都没有提供相关的文件读取接口,但有时我们确实需要读取本地文件内容,下面是两种可能的读取方法. 使用 HTML5 中的 FileReaderHTML5 引入的 FileReader 可以帮助我们读取本地文件,但是有一个限制,就是我们不能直接使用文件路径的方式来访问文件,而是首先需要用户选择文件(通过文件选择或者拖动文件至网页等方式) 代码还是比较简单的,首先你需要在 html 文件中添加文件选择表单: 接着就可以在 JavaScript 中进行(用户选择的)文件读取了: function readSingleFile(e) { // file from "file-input" var file = e.target.files[0]; if (!file) { retur...
- 下一篇
突破Java面试(23-4) - 再深入Redis Replication的完整执行流程及原理
0 Github 1 复制的完整流程 slave node启动,仅仅保存master node的信息,包括master node的host和ip,但复制流程尚未开始master host和ip配置在 redis.conf 中的 slaveof slave node内部有个定时任务,每s 检查是否有新的master node要连接和复制,若发现,就跟master node建立socket网络连接 slave node发送ping命令给master node 口令认证 - 若master设置了requirepass,那么salve node必须同时发送masterauth的口令认证 master node第一次执行全量复制,将所有数据发给slave node master node后续持续将写命令,异步复制给slave node 完整复制的基本流程图
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS7,CentOS8安装Elasticsearch6.8.6
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS6,CentOS7官方镜像安装Oracle11G
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- 设置Eclipse缩进为4个空格,增强代码规范
- Mario游戏-低调大师作品
- MySQL8.0.19开启GTID主从同步CentOS8