JavaScript学习笔记25

2021/4/27 12:28:25

本文主要是介绍JavaScript学习笔记25,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、事件(所有事件都是用的小写)

交互是你对页面动一下,页面给一个反馈

  1. 何为事件 —— 就是一个动作,没效果也是事件
  2. 重要吗?—— 交互体验的核心功能

演示 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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程