自学js第十四天:事件监听和定时器

最新推荐文章于 2024-01-26 17:14:28 发布

VIP文章 AKA俄语人Лев

最新推荐文章于 2024-01-26 17:14:28 发布

阅读量911

点赞数 1

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/weixin_47592060/article/details/116463866

版权

一.JS监听器:

1.实际有两种可以绑定事件的方式:

①有on绑定事件触发执行函数

② 监听绑定事件触发回调函数两种(实际监听用更多)

比如以下的全是on方式绑定事件的,但是统统都可以通过监听的方式绑定事件的.

js中事件分为三大类：鼠标事件、键盘事件、其他html事件。

属性此事件发生在何时…

onabort 图像的加载被中断。

onblur 元素失去焦点。

onchange 域的内容被改变。

onclick 当用户鼠标点击某个对象时调用的事件句柄。

ondblclick 当用户双击某个对象时调用的事件句柄。

onerror 在加载文档或图像时发生错误。

onfocus 元素获得焦点。

onkeydown 某个键盘按键被按下。

onkeypress 某个键盘按键被按下并松开。

onkeyup 某个键盘按键被松开。

onload 一张页面或一幅图像完成加载。

onmousedown 鼠标按钮被按下。

onmousemove 鼠标被移动。

onmouseout 鼠标从某元素移开。

onmouseover 鼠标移到某元素之上。

onmouseup 鼠标按键被松开。

onreset 重置按钮被点击。

onresize 窗口或框架被重新调整大小。

onselect 文本被选中。

onsubmit 确认按钮被点击。

onunload 用户退出页面。
	//以上全部on都可改造为监听方式!
      一.绑定事件写法其实有两种: 
      第一种:DOM.on+'事件类型' = 事件处理函数(的整个function匿名函数)
      btnNext.onclick = function showHi() {
    };

      第二种:DOM.on+'事件类型' = 事件处理函数(的单独一个函数名也行,但不包括()括号)
       btnNext.onclick = showHi;  
       function showHi() {
    };


      二.学习监听方式绑定事件:
      拼写:addEventListener (添加一个事件的监听 addEventListenter)

      
      三.监听绑定事件  VS on绑定事件的函数区别?(一对多和一对一)
       1.btnNext.onclick=unction showHa() {
    }绑定事件的showHa函数不是callback回调函数,
       只是事件的执行函数而已,即onclick这个事件会触发这个JS函数执行什么功能
       2.而btnNext.addEventListener('click', showHa);监听事件的showHa函数是一个callback回调函数
       因为回调函数就是主函数套回函数,先主后回.主函数会从showHa回调函数那里谋取某些数据,来响应给主函数的click事件去执行输出

      
       四.on绑定 和 监听绑定 和解绑注意事项: 

        1. 绑定方式和解绑方式一一对应，否则解绑无效。
         on => null 
         addEventListener removeEventListener
          attachEvent detachEvent
        2. addEventListener attachEvent 如果需要解绑必须用有名函数

        3.on 和 addEventListener 回调函数内部this指向调用他们的DOM对象

        4. addEventListener 对同一个事件同一个函数进行多次监听也不会发生重复
         btnNext.addEventListener('click', hah);//不同函数名可多次监听
         btnNext.addEventListener('click', hih);
         btnNext.addEventListener('click', hah);//但是同一函数名,自然也不会重复监听,就一次
2.DOM 事件监听器 addEventListener() 方法与 attachEvent(IE8的)

3.addEventListener()

允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。

属性	此事件发生在何时…
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户鼠标点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

1.学习监听基础知识的案例:


<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 监听</title>
  <style>
    * {
    
      margin: 0;
      padding: 0;
    }

    body {
    
      display: flex;
      justify-content: center;
    }

    .banner {
    

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 500px;
      box-shadow: 0 0 8px #333;

    }

    .slider {
    
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: 10px;
      width: 380px;
    }

    .slider span {
    
      width: 45px;
      height: 45px;
      line-height: 45px;
      background-color: orange;
      text-align: center;
      font-size: 20px;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    .btn-wrap span {
    
      user-select: none;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 40px;
      height: 85px;
      line-height: 85px;
      font-size: 32px;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, .4);
      cursor: pointer;
    }

    .btn-wrap span:hover {
    
      background-color: rgba(0, 0, 0, .8);
    }

    .prev {
    
      left: 0;
    }

    .next {
    
      right: 0;
    }
  </style>
</head>

<body>
  <div class="banner">
    <img id="pic" src="images/p1.jpg" width="500" height="375" alt="pkq">
    <div class="slider">
      <span style="background-color: pink;">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
    </div>
    <div class="btn-wrap">
      <span class="prev">&lt;

最低0.47元/天解锁文章

AKA俄语人Лев

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自学js第十四天:事件监听和定时器

一.JS监听器:1.实际有两种可以绑定事件的方式:①有on绑定事件触发执行函数② 监听绑定事件触发回调函数两种(实际监听用更多)比如以下的全是on方式绑定事件的,但是统统都可以通过监听的方式绑定事件的.js中事件分为三大类：鼠标事件、键盘事件、其他html事件。属性此事件发生在何时…onabort图像的加载被中断。onblur元素失去焦点。onchange域的内容被改变。onclick当用户鼠标点击某个对象时调用的事件句柄。ondblclic
复制链接

扫一扫