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

JS DOM基础 事件概述 事件流 事件处理方法 添加监听器 事件类型 事件对象 事件委托

时间:2019-12-27 23:59:35      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:方式   test   offset   document   move   阻止事件冒泡   sele   问题   移除   

一、事件概述

  事件是什么?

    在我们的生活中,都会接触到事件这样一个概念,它通常通过描述发生这件事的时间、地点、人物,发生了什么来进行概括。

    同样的在javascript也有这样的一个的东西------事件。

    页面上发生的事件:鼠标移动、点击、滚动等等。

    事件描述了页面上发生的事情,通常它有以下三个要素组成:

        事件源:触发事件的元素

        事件类型:事件的触发方式(例如鼠标点击或键盘点击)

        事件处理程序(事件监听器):事件触发后要执行的代码(函数形式)

    Javascript 使我们可以动态的去操作一个页面。当我们在与浏览器交互的时候,浏览器就会触发各种事件。

    比如我们打开某一个网页的时候,浏览器需要加载完成这个网页,就会触发一个加载事件;当我们点击页面中的某一个“地方”,浏览器就会在那个“地方”触发一个点击事件。

 

二、事件流

  什么是事件流?

    DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程、这种问题的处理方式可以称之为事件流即事件的传播机制。对于事件流IE跟FF有不同的解释。

    IE下的解决方案称之为:冒泡型事件,

    而FF下称之为:捕获型事件。

    冒泡型事件是从低而上的触发机制,而捕获型事件则是从上到下的触发机制。

       事件冒泡:事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的结点(文档),即沿着DOM树向上传播。
       事件捕获:不太具体的节点(document)应该更早接收到事件,最具体的节点最后接收到事件,即沿着DOM树向下传播。
 

    DOM同时支持这两种事件模型:捕获型事件和冒泡型事件,并且把事件流分为了三个阶段:

       事件捕获阶段,处于目标阶段,事件冒泡阶段。

    处于目标阶段时(中间阶段),事件的先后和声明顺序有关,一般不怎么关注前两个阶段,默认冒泡阶段dom0。

 

 

三、事件处理方法

  事件的绑定、添加监听器

    要使用事件,首先我们需要绑定事件。

 

  DOM0级提供了两种事件绑定方案:

 

    事件绑定在html标签上:

<input type="button" onclick="doit()" value="test">  //onclick="doit()",内嵌式,鼠标点击,调用函数 doit
<script> function doit() {alert("html绑定");} </script>

注:将js与html合并在一起,没有实现分离。

 

    函数绑定:

<input id=‘inputBtn‘ type="button" value="test">

<script>

let btn = document.getElementById(‘inputBtn’);

btn.onclick = function () {alert(‘函数绑定‘);} //可以通过btn.onclick = null;的方式 删除
</script>

注:兼容性很好,但是只能绑定一个监听处理函数。

 

    DOM2级新增了一种事件绑定方案:

 

      通过方法addEventListener():

<input id=‘inputBtn‘ type="button" value="test">

<script>

let btn = document.getElementById(‘inputBtn’);

btn.addEventListener(‘click‘, function () {alert(‘addEventListener方法‘);});

</script>

注:兼容性稍差,但是可以绑定多个事件函数。

 

  事件的移除

  DOM0级:

    targetElement.onclick = null;

  DOM2级:

    targetElement.removeEventListener(type, listener);

注意:事件函数listener需要保存才可以移除,因为需要传入该函数的引用

 

四、事件类型

  页面事件

      onload 一张页面或一幅图像完成加载时触发的事件

      onresize 窗口或框架被重新调整大小时触发的事件。

      onscroll 当文档被滚动时触发的事件

        技术图片

 

 

 

  鼠标事件

      onclick          当鼠标点击某个元素时触发的事件

      ondblclick        当鼠标双击某个元素时触发的事件

      onmousedown      当鼠标按钮被按下时触发的事件

      onmouseup        当鼠标按键被松开时触发的事件

      onmousemove      当鼠标在鼠标事件某个元素上移动时触发的事件

      onmouseenter       当鼠标指针移动到元素上时触发的事件

      onmouseleave      当鼠标指针移出元素时触发的事件

      onmouseover        鼠标指针移动到元素上时触发的事件

      onmouseout          当鼠标指针移出元素时触发的事件

注意1:事件mousemove会在满足条件的情况下不断触发;

注意2: onmouseenter和onmouseleave在进入元素时触发,其他时候不会触发;

    onmouseover和onmouseout不光会在进入元素时触发,在元素的子元素上也会触发。

  键盘事件

      onkeydown 当键盘按键被按下时触发的事件。

      onkeypress 当键盘按键被按下并松开时触发的事件。

      onkeyup 当键盘按键被松开时触发的事件。

注意1:事件触发顺序是down,press,up;

注意2:其中down和up任意的按键都能触发,press只有字符输入时会触发;

    也就是说,shift,delete这些特殊按键不会触发press事件;

    同时down和up并不能知道按下键的具体内容(比如大小写),而press就关注内容。

 

  表单事件

  focus  获得焦点时触发

  blur   失去焦点时触发

  reset  重置表单时触发

  submit  提交表单时触发

  change  input框失去焦点,判断value是否改变,改变时触发

  input  输入内容时,value改变了就触发

 

 

五、事件对象

  事件中的详细信息,事件内部的一些处理方法。

  IE 8 及之前版本 IE 浏览器:event 事件对象被提供在window对象中。

  所以有了兼容性的写法:

<input type="button" value="点击" id="clickBtn">

    <script>

        clickBtn.onclick = function (event) {

            let e = event || window.event;

        }

    </script>

 

  事件目标

      event 事件对象提供了target属性用于获取触发事件的目标元素(标签)。

<p id="para"> 我是一个p标签 </p>

<script>

para.onclick = function(event){

console.log( event.target );

}

</script>

 

    IE8 及之前版本的 IE 浏览器中同样存在兼容性问题,是srcElement属性,

    上面的javaScript代码改写成:

para.onclick = function(event){

  let target = event.target || event.srcElement;

}

 

  事件目标(事件源)与 this

        在事件的处理函数中,可以通过this关键字来指代绑定该事件的标签元素。

para.onclick = function(){

  console.log(this == para); //true

}

 注:绑定事件监听器时,不能使用箭头函数,不然就没有this。

    区分this和event.target:

        this指绑定监听器的元素节点;

        event.target指触发事件的目标元素节点。

      

  事件上与鼠标事件相关的属性

      事件对象(event)上提供了一些属性,可以用来获取当鼠标事件发生时鼠标的坐标

          clientX         返回当事件被触发时鼠标指针相对于浏览器文档显示区的水平坐标

          clientY         返回当事件被触发时鼠标指针相对于浏览器文档显示区的垂直坐标

          pageX         返回当事件被触发时鼠标指针相对于 HTML 文档页面的水平坐标

          pageY      返回当事件被触发时鼠标指针向对于 HTML 文档页面的垂直坐标

          screenX      返回事件发生时鼠标指针相对于屏幕的水平坐标

          screenY      返回事件发生时鼠标指针相对于屏幕的垂直坐标

          offsetX        返回事件发生时鼠标指针相对于事件源的水平坐标

          offsetY        返回事件发生时鼠标指针相对于事件源的垂直坐标

 

  功能键标志属性

  ctrlKey  altKey

 

  阻止默认行为

有些事件发生有默认行为,有时候不需要它执行,可以阻止:

  阻止默认行为:

     e.preventDefault();  或  return false;

  阻止事件冒泡:

  e.stopPropergation(); 或 e.cancelBubble=true;

 

 

六、事件委托

  事件代理:将子节点的事件监听器,放置在上级(父亲或祖先)节点上,利用事件冒泡原理,实现上级节点代理子节点事件的一种技术。

  

  一般在,子节点很多,多个子节点需要绑定类似的事件函数,或子节点是动态时使用。

  可以很大程度上优化节约性能,也能解决节点动态问题。

注:上级节点的选定,要看情况,一般近一点比较好,还要保证必定不是动态节点。

  并且因为依赖事件冒泡,所以必须使用 mouseenter、mouseleave(事件会冒泡),mouseover和mouseout事件不会冒泡。

JS DOM基础 事件概述 事件流 事件处理方法 添加监听器 事件类型 事件对象 事件委托

标签:方式   test   offset   document   move   阻止事件冒泡   sele   问题   移除   

原文地址:https://www.cnblogs.com/jiayouba/p/11939459.html

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