• JS事件(一)


     

    JavaScript

    事件(event)

      事件是JavaScript跳动的心脏,进行交互,使网页动起来。当我们与浏览器 中 Web 页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击、 鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情, 比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小。

      作用

    1. 使网页增加动态变化,更好看
    2. 增加用户的体验
    3. 验证用户输入的数据

        事件中的几个名词:事件源:谁触发的事件。 事件名:触发了什么事件 。 事件监听:谁监管这个事件,谁监视。  时间处理:发生了怎么办。

      

      事件类型,常用事件:

    1. onload:当页面或图像加载完后立即触发
    2. onblur:元素失去焦点
    3. onfocus:元素获得焦点
    4. onclick:鼠标点击某个对象
    5. onchange:用户改变域的内容
    6. onmouseover:鼠标移动到某个元素上
    7. onmouseout:鼠标从某个元素上离开
    8. onkeyup:某个键盘的键被松开
    9. onkeydown:某个键盘的键被按下

    事件流

      事件流分为两种,一种是事件冒泡,另外一种是事件捕获。两者有着明显的的区别

      事件冒泡

        事件冒泡是由具体的产生事件的元素由里往外的传递事件,

        如果点击了页面中的<div>元素,那么这个 click 事件会按照如下顺序传播:

         1、<div> 2、<body> 3、<html> 4、document

      事件捕获

        事件捕获自外往内的传递事件,由最外层的先获得事件,一层层外内传递,直到传到精确的元素。

      DOM2级事件流

        规定了事件流分为三个阶段:1)事件捕获阶段    为截获事件提供了条件,也就是截获事件     

                        2)  处于目标时间阶段     然后实际的目标获得事件

                        3)事件冒泡阶段   获得事件并对事件做出响应

      DOM0级事件处理

        

    <body>
        <button id="id1"> 按钮 </button>
    //可以直接在元素中添加事件
      <button id="id2" onclick="test()">按钮</button>
      <button id="id3" onclick="alert('你好');" > 按钮 </button> </body> <script>
    //通过id得到元素button的对象,通过往button对象中添加属性值的形式完成事件的添加 var a =document.getElementById("id1") a.onclick=function(){ alert('你好')   }
      function test(){
        alert("你好")
      }
    </script>
    //如果想要删除这个alert的事件操作,可以直接 a.onclick=null 进行初始化。

      DOM2级事件处理

    <body>
        <button id="id1">按钮</button>
      //可以直接在属性中添加事件
    
    </body>
    <script>
        var a= documentGetElementById("id1")
            a.addEventListener('click',function(){
                alert("你好")
             },false)
    //也可以在外面自定义一个方法,用方法名称来完成事件的加入
       function test(){
        alert("你好")
      }
    a.addEventListener('click',test,false)
    </script>
  • 相关阅读:
    CSS3 @font-face
    CSS3 Media Queries
    简单弹出层示例
    mysql查询排名
    ajax 简单学习
    js ajax 传送xml dom对象到服务器
    雨燕权限管理后端技术总结
    日期date出参入参和timestamp转化
    雨燕权限管理前端技术总结
    jwt再度理解
  • 原文地址:https://www.cnblogs.com/yxmgg/p/9058072.html
Copyright © 2020-2023  润新知