原生js觸發click（原生js觸發click事件）

本文目錄一覽：

• 1、原聲js怎麼觸發click事件
• 2、如何用JS來點擊按鈕
• 3、如何用原生js或jq觸發angularjs中ng-click綁定的事件

原聲js怎麼觸發click事件

如果你只需要觸發那些常見的事件，比如說鼠標點擊，並且不考慮跨瀏覽器兼容的問題的話，只需要這樣做：

document.getElementById(‘myLink’).click()

當然這麼做的兼容性並不好，比如說 FireFox 就不幹。另外 onclick() 這樣的方法只能用於在 HTML 中的內聯寫法。

如果事情稍微複雜一些，比如說你要觸發一些自定義的事件，那麼你必須要理解 DOM 裡面的“事件對象模型”，本質上 $.trigger() 就是對這些概念的封裝。不過問題是 DOM 的一致性和兼容性一直都不太好，所以關於事件的對象模型長期以來都處於一個比較混亂的狀況下，如果不用 jQuery 的話，想找到一個既簡單又足夠健壯的解決方案並不容易。

很長時間以來，人們都是這樣做的：

// 創建一個事件對象，就好像你綁定事件回調函數里獲得的那個事件對象一樣

var myEvent = document.createEvent(‘Event’)

// 初始化這個事件對象，為它提高需要的“特性”

myEvent.initEvent(‘myEventName’, true, true)

// 按照常見的方式綁定對該事件的監聽，這裡的 element 可以是任何一個元素，你懂的

element.addEventListener(‘myEventName’, function(evt) {

// 這裡，evt 就是你創建的事件對象了，不過它會更豐富一些——這些是瀏覽器為你做的

})

// 然後這樣觸發它

element.dispatchEvent(myEvent)

你必須要去閱讀 createEvent initEvent dispatchEvent 這些方法的文檔來完整認識它們（文檔可以去 MDN 找），上面介紹的只是基本用法。$.trigger() 所封裝的也就是它們（及其相關的兼容性處理等等）。不過這些方法已經有點“過時”了，特別像 initEvent 這樣的方法更是已經被（新的 DOM 標準）廢棄了。

以下是更“現代”的做法，不過老樣子：兼容性會是問題：

var myEvent = new Event(‘myEventName’)

element.dispatchEvent(myEvent)

綁定回調是一樣的我就不重複了。另外“現代”的做法里觸發內建事件要用對應的接口，比如說：

var event = new MouseEvent(‘click’, {

‘view’: window,

‘bubbles’: true,

‘cancelable’: true

});

如何用JS來點擊按鈕

原理

用JS來點擊按鈕需要分2步，第一步是選中按鈕的元素，第二步是使用元素自帶的click函數。

例如接下來我將要演示的例子中，僅用

document.getElementById(“btn”).click()

一行就可以控制按鈕點擊。

其中document.getElementById(“btn”)是根究id獲取按鈕的元素，click()是使按鈕被點擊一次。

演示

這是我為此問題專門寫的在線演示頁面點擊按鈕演示頁面。

頁面結構如圖

首先點擊右下角打開控制台

然後輸入

document.getElementById(“btn”).click()

這行代碼

按回車運行代碼即可彈出一行提示，說明按鈕被點擊。你可以用鼠標點擊一下按鈕，也是這個效果。

如何用原生js或jq觸發angularjs中ng-click綁定的事件

在 angular 項目開發中 不建議這麼弄，當然 如果有些引入的庫 只能這樣觸發的話，還是有辦法解決的。

首先在 控制器外側，也就是js 的最外側定義一個變量， 然後在當前控制器中 給該變量賦值為一個函數，該函數調用 控制器中 ng-click 之前綁定的回調函數 定義的這個函數使用onclick調用即可     比如：

button ng-click=”method_angular()”test/button  

button id=”btn” onclick=”method()”test/button

// 第一個按鈕 是使用ng-click執行

// 第二個按鈕是 使用onclick 執行

// 也可以使用jquery 給button 綁定事件執行

var method 

app.controller(“testRoute”,[“$scope”,function($scope){

    $scope.method_angular = function(){

        console.log(111)

    }

    method = function (){

        $scope.method_angular()

    }

    $(“#btn”).click(function(){

        $scope.method_angular()

    })

})