JS-API-2

JS学习笔记7

事件监听

事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。

例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片。

---

元素对象.addEventListener('事件类型',要执行的函数)

1. 事件源（DOM对象）
2. 事件类型
3. 回调函数

老版本的 事件源.on事件=function(){}

区别： on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性

事件类型

鼠标事件

与鼠标操作相关的事件

1.鼠标经过

div.addEventListener('mouseenter',function(){
  console.log('轻轻的我来了')
})

2.鼠标离开

div.addEventListenr('mouseleave',function(){
  console.log('轻轻的我走了')
})

键盘事件

keydown 键盘按下触发
keyup 键盘抬起触发

焦点事件

focus 获得焦点

input.addEventListener('focus',function(){})

blur 失去焦点

input.addEventListener('blur',function(){})

文本框输入事件

input

==事件对象==

这个对象里有事件触发时的相关信息

• 可以判断用户按下哪个键
• 可以判断鼠标点击了哪个元素

input.addEventListener('keyup', function (e) {
      // console.log(11)
      // console.log(e.key)
      if (e.key === 'Enter') {
        console.log('我按下了回车键')
      }
    })
回调函数的第一个参数就是事件对象

trim方法

str='  i  '
str.trim();
去除字符串两侧的空格

==环境对象==

函数内部特殊的变量this，代表当前函数运行时所处的环境

弄清楚this的指向，可以让代码更简洁

普通函数里this指向window

• 函数的调用方式不同,this指代的对象也不同
• 【谁调用，this就是谁】是判断this指向的初略原则

回调函数

如果将函数A作为参数传递给函数B时，我们称函数A为回调函数

<script>
	function fn() {
    console.log('我是回调函数...');
  }
  // 调用定时器
  setInterval(fn, 1000);
</script>