zoukankan      html  css  js  c++  java
  • 关于Javascipt基础7

    最近练习了关于事件的代码,所以就说说js的事件吧。

     一、什么是事件?

      JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来理的。

      比如页面载入完成时, 会触发一个事件。再比如用户点击按钮时,点击也是一个事件。

     常用的事件有:

      PC端上常用的事件:

        click 鼠标点击

        mousedown 鼠标按下

        mouseup 鼠标弹起

        mousemove 鼠标移动

        mouseout 鼠标离开

        change文本域的内容被改变

        dblclick 鼠标双击

        focus 获得焦点

        load 加载完成

    二、怎样将事情处理程序绑定到特定的事件中?

       方法1: 使用HTML标记创建事件处理程序

        例:给图片添加点击事件 <img src=“01.jpg” onclick="alert(this.src);"/>

       方法2:addEventListener() 方法用于向指定元素添加事件句柄

        语法: object.addEventListener(EventName,eventHandler);

         例:给document对象添加点击事件 document.addEventListener("click",function(){ alert("你干嘛点我!"); })

      

      方法3:在js代码中获取对象,然后设置对应对象事件的匿名函数

        例:var a=document.getElementById('a');

          a.onclick=function() {

            alert('hello world');

          }

    此外,利用for循环可以把事件都附加上一组元素当中

      例:var lis=document.getElementsByTagName('li');

        for(var i = 0; i < lis.length; i++){

          lis[i].onclick= function() {

            alert(lis[i]);
          }

        }

    等等,怎么弹出来的结果跟想象中的不一样?

    这是因为当你点击li,触发事件中的for已经循环完毕了,i==lis.length,所以lis[i]的结果不正确。

      应当改为:var lis=document.getElementsByTagName('li');

           for(var i = 0; i < lis.length; i++){

            lis[i].onclick= function() {

              alert(this);
            }

          }

    this的意思是使用这个函数的对象。

  • 相关阅读:
    Linux下yum安装mysql
    centos下无法使用lsof命令"-bash: lsof: command not found"
    大数据与区块链的联系与区别
    java.lang.NullPointerException报错的几种情况
    算法概述
    区块链简史
    word导出失败问题
    [Python3网络爬虫开发实战] 1.9.5-Scrapyrt的安装
    [Python3网络爬虫开发实战] 1.9.3-Scrapyd-Client的安装
    [Python3网络爬虫开发实战] 1.9.2-Scrapyd的安装
  • 原文地址:https://www.cnblogs.com/zhiwudenengliang/p/5863224.html
Copyright © 2011-2022 走看看