码迷,mamicode.com
首页 > Web开发 > 详细

JS事件(一)

时间:2018-05-19 13:04:16      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:鼠标   通过   alert   click   数据   htm   常用事件   span   增加用户   

 

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>

 

JS事件(一)

标签:鼠标   通过   alert   click   数据   htm   常用事件   span   增加用户   

原文地址:https://www.cnblogs.com/yxmgg/p/9058072.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!