• javascript一个重要知识点:事件。


    javascript是事件驱动的,那什么是事件?事件就是在javascript中被侦测到DOM元素行为,就称之为javascript事件。

    2、事件的三个阶段

    事件的三个阶段分别为:

    1、捕获阶段 2、目标阶段3、冒泡阶段。

    捕获的概念:就会为了找到目标DOM元素,会从上往下一级一级查找,直到找到目标DOM元素。(window->document->html->body->......->目标DOM元素。

    冒泡的概念:目标事件执行后,会从下往上一级一级查找是否有相同事件类型,直到window。

    3、事件的绑定方式

    1、最简单绑定方式:btn.onclick=function(){};

    2、W3C标准绑定方式:addEventListener(事件名称,事件处理程序,useCapture)第三个参数是布尔值,如果是true表示捕获,如果是false就是冒泡,默认为冒泡。

    3、IE中:attachEvent("on" + 事件名称, 事件处理程序)这个方法不支持:捕获阶段。

    4、三种绑定事件this的指向问题。

    1、 onclick 事件中的this 就是 当前对象

    2、addEventListener 事件处理程序中的this:当前对象

    3、attachEvent 事件处理程序中的this : window

    5、事件兼容的封装

     var addEvent = function() {
       //属于方法检测,判断window是否有该方法
        if(window.addEventListener) {
    
            return function f1(target, type, handler) {
                target.addEventListener(type, handler);
            };
        } else if(window.attachEvent) {
    
            return function f2(target, type, handler) {
                target.attachEvent("on" + type, function() {
                    handler.apply(target);//因为this默认指向window,所以通过apply方法来改变this的指向问题
                 //apply使用方法:function.apply(第一个参数,第二个参数)
                 // 第一个参数:表示指向那个对象来调用函数
                 // 第二个参数:是一个数组或者是伪数组的对象 (这个参数是可选的)
                 这个数组中的每一项的值,都将作为被调用函数的参数
                });
            };
        } else {
    
            return function f3(target, type, handler) {
                target["on" + type] = handler;
            };
        }
    }();
    
     //封装事件兼容函数使用到了闭包技术,目的是:当在页面中多次调用该函数,可以避免重复判断,提高js执行效率。
  • 相关阅读:
    门面模式 Facade
    适配器模式 Adapter
    建造者模式 Builder Mode
    原型模式 ProtoType
    抽象工厂模式 Abstract Factory
    工厂方法模式 Factory Method
    简单工厂模式 SimpleFactory
    java设计模式之代理设计模式(Proxy)
    java工厂设计模式初步
    java中的接口概念
  • 原文地址:https://www.cnblogs.com/lsy0403/p/5862850.html
Copyright © 2020-2023  润新知