JavaScript学习笔记25
2021/4/27 12:28:25
本文主要是介绍JavaScript学习笔记25,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、事件(所有事件都是用的小写)
交互是你对页面动一下,页面给一个反馈
- 何为事件 —— 就是一个动作,没效果也是事件
- 重要吗?—— 交互体验的核心功能
演示 demo — 拖拽,和点击
二、如何绑定事件
1、ele.onxxx = function (event) {}
1)兼容性很好,但是一个元素只能绑定一个事件处理程序
div.onclick = function(){}
div.onclicck 就叫做可以被点击的事件(绑定事件类型),function(){}是反馈,一旦事件被触发,就要执行 function 里面的函数(绑定的是一个事件处理函数)
2)基本等同于写在 HTML 行间上,如下图
οnclick=”consolo.log(‘a’)”是句柄的绑定方式,写在行间不用写 function(){}
2、ele.addEventListener(type, fn, false);里面可以填三个参数
IE9 以下不兼容,可以为一个事件绑定多个处理程序
div.addEventListener(’事件类型’,处理函数,false)
div.addEventListener(‘click’,function(){},false)
function(){} 是函数引用,和外面定义一个 function test(){}直接写 test 是一样的
事件有一个事件监听机制
一个事件绑定了两个处理函数。
若 console.log 两个都是(‘a‘)打印出来是两个 a。这是两个处理函数,是两个地址
下面只执行一个 a。下面和上面的结果是不一样的。这种写法是一个地址,一个人
ele.addEventListener 不能给同一个函数绑定多次,重复的绑定一个函数就不能用了
3、ele.attachEvent(‘on’ + type, fn);
IE 独有,一个事件同样可以绑定多个处理程序,同一个函数绑定多次都可以
div.attachEvent(‘on’ + 事件类型,处理函数);
div.attachEvent(‘onclick’ ,function(){});
想给三个 li 都绑定这个事件
绑定事件出现在循环里面(用到 i),考虑是否形成闭包,用立即执行函数来写
三、事件处理程序的运行环境
这篇关于JavaScript学习笔记25的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-27OpenFeign服务间调用学习入门
- 2024-12-27OpenFeign服务间调用学习入门
- 2024-12-27OpenFeign学习入门:轻松掌握微服务通信
- 2024-12-27OpenFeign学习入门:轻松掌握微服务间的HTTP请求
- 2024-12-27JDK17新特性学习入门:简洁教程带你轻松上手
- 2024-12-27JMeter传递token学习入门教程
- 2024-12-27JMeter压测学习入门指南
- 2024-12-27JWT单点登录学习入门指南
- 2024-12-27JWT单点登录原理学习入门
- 2024-12-27JWT单点登录原理学习入门