欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vuejs使用addEventListener的事件如何觸發(fā)執(zhí)行函數(shù)的this

 更新時間:2022年06月29日 16:01:46   作者:schwarzeni  
這篇文章主要介紹了Vuejs使用addEventListener的事件觸發(fā)執(zhí)行函數(shù)的this方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

使用addEventListener事件觸發(fā)執(zhí)行函數(shù)的this

在普通的dom操作中,若是使用addEventListener

如下面的例子

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="btn_container">
    <button id="btn">Click Me</button>
</div>
<script src="test.js"></script>
</body>
</html>
let fn  = function() {
  console.log(this);
};
document.getElementById('btn').addEventListener('click',fn);    

那么,在控制臺中輸出的this的值為觸發(fā)事件的dom節(jié)點(diǎn)

(另:有用的鏈接 => 傳送門)

如果是使用vuejs中的自定義directive來觸發(fā)點(diǎn)擊事件,觸發(fā)函數(shù)中的this又是什么呢

/**
 * 這是vuejs的一個模塊
 */
<template>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                    <button class="btn btn-primary" v-myOn:click="fn">Click me</button>
                </div>
            </div>
        </div>
</template>
<script>
  export default {
    directives: {
      myOn: {
        bind(el, binding, vnode) {
          const event = binding.arg;
          const fn = binding.value;
          console.log(el);
          el.addEventListener(event, fn);
        }
      }
    },
    methods: {
      fn() {
        console.log(this);
      }
    }
  }
</script>   

經(jīng)過測試,這里控制臺輸出的this的值為:

這是一個虛擬dom的值,其中 $el的值為 div.container ,也就是此模塊最外層的dom節(jié)點(diǎn),但是此事件綁定的是button,控制臺中輸出的bind的第一個el的值為

那么,在測試一次,在此 <div class='container'> 的外層再添加一個 <div class='outer-container'>

測試結(jié)果如下:

$el 的值依然為最外層的dom節(jié)點(diǎn)

結(jié)論:Vuejs中若是使用自定義的directive綁定事件,那么觸發(fā)事件后執(zhí)行函數(shù)中的this指向此模塊最外層的dom節(jié)點(diǎn)

addEventListener中事件函數(shù)的this指向問題

看代碼

//定義一個可見的盒子用于綁定點(diǎn)擊事件
var box = document.getElementById('box');
box.x = 'box'
//設(shè)置執(zhí)行函數(shù)的對象屬性
function outFunc() {
? this.x = 'outFunc';
? box.addEventListener('click', func, false);
}
outFunc();
function func() {
? console.log(this.x); //輸出box 說明該this指向的是調(diào)用addEventListener的對象
}

代碼2

function outFunc() {
? this.x = 'outFunc';//給全局對象window.x賦值(相當(dāng)于賦值全局變量)
? box.addEventListener('click', func.bind(this), false);
}
function func() {
? console.log(this.x); //輸出outFunc 使用bind設(shè)置this的值
}

總結(jié):使用bind綁定的事件才是指向函數(shù),否則指向的是調(diào)用addEventListener的對象。

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。 

相關(guān)文章

  • vue.js打包之后可能會遇到的坑!

    vue.js打包之后可能會遇到的坑!

    這篇文章主要給大家介紹了關(guān)于vue.js打包之后可能會遇到的一些坑,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-06-06
  • vue內(nèi)置動態(tài)組件component使用示例小結(jié)

    vue內(nèi)置動態(tài)組件component使用示例小結(jié)

    component是vue內(nèi)置組件,主要作用為動態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動態(tài)組件component使用示例小結(jié),需要的朋友可以參考下
    2024-03-03
  • Vue3中如何使用異步請求示例詳解

    Vue3中如何使用異步請求示例詳解

    Vue3增加了很多讓人眼前一亮的特征,suspense 組件就是其中之一,對處理異步請求數(shù)據(jù)非常實用,下面這篇文章主要給大家介紹了關(guān)于Vue3中如何使用異步請求的相關(guān)資料,需要的朋友可以參考下
    2022-06-06
  • 詳解如何理解vue的key屬性

    詳解如何理解vue的key屬性

    這篇文章主要介紹了詳解如何理解vue的key屬性,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • 使用vant的地域控件追加全部選項

    使用vant的地域控件追加全部選項

    這篇文章主要介紹了使用vant的地域控件追加全部選項,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue如何解決axios請求前端跨域問題

    vue如何解決axios請求前端跨域問題

    vue項目中,前端使用axios與后臺進(jìn)行數(shù)據(jù)請求或者提交的時候,如果后臺沒有設(shè)置跨域,瀏覽器做數(shù)據(jù)請求的時候就會報錯,這篇文章主要給大家介紹了關(guān)于vue如何解決axios請求前端跨域問題的相關(guān)資料,需要的朋友可以參考下
    2021-10-10
  • vue-cli配置flexible過程詳解

    vue-cli配置flexible過程詳解

    這篇文章主要介紹了vue-cli配置flexible過程詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-07-07
  • Vue實現(xiàn)開始時間和結(jié)束時間范圍查詢

    Vue實現(xiàn)開始時間和結(jié)束時間范圍查詢

    這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)開始時間和結(jié)束時間的范圍查詢,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按鈕加載效果

    Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$promp

    這篇文章主要介紹了Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按鈕的加載效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-07-07
  • 基于axios 解決跨域cookie丟失的問題

    基于axios 解決跨域cookie丟失的問題

    今天小編就為大家分享一篇基于axios 解決跨域cookie丟失的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09

最新評論