浅谈事件委托和this的用法

浅谈事件委托和this用法

事件委托

事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。比如用ul元素来处理其子元素li的事件。

有多种方法来处理事件委托。标准方法来源于原生浏览器的功能。浏览器以一种特定的工作流程来处理事件,并支持事件捕获和事件冒泡。

事件捕获和事件冒泡是事件流中的两个阶段,任何事件产生时,如点击一个按钮,将从最顶端的容器开始(一般是html的根节点)。浏览器会向下遍历DOM树直到找到触发事件的元素,一旦浏览器找到该元素,事件流就进入事件目标阶段,该阶段完成后,浏览器会沿DOM树向上冒泡直到最顶层容器,看看是否有其它元素需要使用同一个事件。

关于this在JavaScript中的用法

初学js时对this最简单粗暴的理解就是哪里调用这个对象,函数的this就指向这个方法,这个理解不是很到位。

如果该函数是被当做某一个对象的方法,那么该函数的this指向该对象;

    var car= {
      modelNum: "Benz"
    }
    function f() {
      alert(this.modelNum+ ":hello world")
    }//this就是car这个对象
    Benz.sayHi = f
    Benz.sayHi() ;

函数之内调用
当函数中有 this,其实就意味着它被当做方法调用,之间调用相当于把他当做window对象的方法,this指向window.

func()
    function func() {
        alert(this) // this指向window
    }

在new中调用:一个引用对象的变量实际上保存了对该对象的引用,也就是说变量实际保存的是对真实数据的一个指针。(这个我也没有实际遇到过)

总之,如果this没有被设置,则默认指向全局对象,其通常是window
如果一个函数中运行了一个内联函数,比如一个事件监听器,则this指向内联函数的源代码。例如,当设置一个按钮的单击处理程序,this将引用匿名函数内的按钮。如果函数是一个对象的构造函数,this指向新对象。如果函数被定义在一个对象上,然后调用对象时,this指向该对象。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值