• 事件 事件的冒泡 事件的委派 事件的绑定 事件的传播


    事件(Event

    事件对象

    当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数,这个事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标,键盘的哪个按键被按下,鼠标滚轮的方向等等……

    可以在响应函数中定义一个形参,来使用事件对象,但是在IE8以下浏览器中事件对象没有做完实参传递,而是作为window对象的属性保存

    例子:

    元素.事件 = function(event){ 
    
        event = event || window.event; 
    
        if(!event) {
            event = window.event;
        }
       /*这两种都可以,是为了兼容IE8,因为在IE8中将事件对象作为window对
        象的属性保存*/
    
     };    

    获取鼠标的坐标

    clientX和clientY
    用于获取鼠标在当前的可见窗口的坐标

    注意滚动条是谁的,父元素容不下子元素才会出现滚动条,滚动条是父元素的

    事件的冒泡(Bubble

    所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
    在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡

    可以将事件对象的cancelBubble设置为true,即可取消冒泡(所有浏览器皆支持)
    例子:

    1 元素.事件 = function(event){ 
    2 
    3     event = event || window.event; 
    4 
    5     event.cancelBubble = true; 
    6 
    7 }

    事件的委派

    指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。

    事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能

    我们希望,只绑定一次事件,即可应用到多个的元素上,即使元素是后添加的
    我们可以尝试将其绑定给元素的共同的祖先元素(解决了上一篇博文中的"新添加的元素响应函数不起作用"问题)

    target : event对象的target属性表示触发事件的对象(用来配合事件委派)

    事件的绑定

    addEventListener()(支持除IE8以外浏览器)
    通过这个方法也可以为元素绑定响应函数
    参数:
    1.事件的字符串,不要on
    2.回调函数,当事件触发时该函数会被调用
    3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false

    使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,
    这样当事件被触发时,响应函数将会按照函数的绑定顺序执行

     1 btn01.addEventListener("click",function(){ 
     2 
     3         alert(1); 
     4 
     5 },false); 
     6 
     7 btn01.addEventListener("click",function(){ 
     8 
     9         alert(2); 
    10 
    11 },false);                                     

    attachEvent()(支持IE8)

    在IE8中可以使用attachEvent()来绑定事件
    参数:
    1.事件的字符串,要on
    2.回调函数

    这个方法也可以同时为一个事件绑定多个响应函数,
    不同的是它是后绑定先执行,执行顺序和addEventListener()相反

    btn01.attachEvent("onclick",function(){ 
    
        alert(1); 
    
    }); 
    
    btn01.attachEvent("onclick",function(){ 
    
        alert(2); 
    
    });      

    定义一个函数,使得IE8和其他浏览器都可以使用上述方法为一个事件绑定多个响应函数:

     1 function bind(obj, eventStr, callback) {
     2     if(obj.addEventListener) {
     3         obj.addEventListener(eventStr, callback, false);
     4     }else {
     5         eventStr = "on"+eventStr;
     6         //设置一个匿名函数,浏览器调用匿名函数,自己调用callback,再用call()方法改变this
     7         obj.attachEvent(eventStr, function() {
     8             callback.call(obj);
     9         });
    10     }
    11 }
    12 bind(but01, "click", function() {
    13     alert(this);
    14 });
    15 
    16 bind(but01, "click", function() {
    17     console.log(2);
    18 })        

    事件的传播

    关于事件的传播网景公司和微软公司有不同的理解

    微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。
    网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,然后在向内传播给后代元素。

    W3C综合了两个公司的方案,将事件传播分成了三个阶段
    1.捕获阶段
    在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
    2.目标阶段
    事件捕获到目标元素,捕获结束开始在目标元素上触发事件
    3.冒泡阶段
    事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件

    如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true,一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false。

    IE8及以下的浏览器中没有捕获阶段。

    拖拽一个div使其拖哪停哪——实现如下

     鼠标放在一个div上,用滚轮使其height变大变小——实现如下

     键盘事件

    onkeydown
    按键被按下
    对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发
    当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的会非常的快,这种设计是为了防止误操作的发生。
    onkeyup
    按键被松开

    键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document

    键盘事件对象的属性

    keyCode
    可以通过keyCode来获取按键的编码
    通过它可以判断哪个按键被按下

    altKey
    ctrlKey
    shiftKey
    这个三个用来判断alt、ctrl 和 shift是否被按下,如果按下则返回true,否则返回false

     

    学识浅薄,如有错误,恳请斧正,在下不胜感激。

  • 相关阅读:
    构建工具系列二--Grunt
    构建工具系列一--Travis-cli
    Windows平台下如何使用node.js显示系统盘符
    【译文】采用chrome的DevTool中TimeLine和profile工具提升Web app性能
    浏览器重绘和重排
    迁移oracle数据库至新分区
    模拟app上商品详情点击图片放大并且可以切换大图
    JavaScript 复制内容到剪贴板
    原生js ajax
    原型与原型链
  • 原文地址:https://www.cnblogs.com/yin-jie/p/14664534.html
Copyright © 2020-2023  润新知