JS小問題之——如何用原生js觸發事件

如何用js觸發事件，類似於jq的trigger。最終找到一個相容性的寫法，不妨一起來看一看：

function trigger(){
//IE
    if(document.all) {
        document.getElementById("clickMe").click();
    }
// 其它瀏覽器
    else {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);　　　　　　　　　　　　　　//這裡的click可以換成你想觸發的行為
            document.getElementById("clickMe").dispatchEvent(e);　　　//這裡的clickME可以換成你想觸發行為的DOM結點
        }   
}
 

demo

<script type="text/javascript">

//
 兩秒後模擬點選

setTimeout(function()
 {

    //
 IE

    if(document.all)
 {

        document.getElementById("clickMe").click();

    }

    //
 其它瀏覽器

    else
 {

        var
 e = document.createEvent("MouseEvents");

        e.initEvent("click",
 true, true);

        document.getElementById("clickMe").dispatchEvent(e);

    }

},
 2000);

</script>

  

<a href="http://www.sinmeng.net" id="clickMe" onclick="alert('clicked');">夢搏網路</a>

 

js觸發按鈕點選事件

function load(){
    //下面兩種方法效果是一樣的
    document.getElementById("target").onclick();
    document.getElementById("target").click();
}

備註：

1.btnObj.click()是真正地用程式去點選按鈕，觸發了按鈕的onclick（）事件,按鈕不隱藏的時候是可以呼叫的按鈕隱藏之後就不行了,設定隱藏不要使用Visiable屬性，使用style.display=none2.btnObj.onclick()只是簡單地呼叫了btnObj的onclick所指向的方法，只是呼叫方法而已，並未觸發事件,

jQuery 觸發按鈕點選事件

$(function(){
                
　　// test 的點選事件
　　$("#test").click(function(){
                
　　　　alert("點選了");
　　});
                
　　// 呼叫 test 的點選事件的兩種方法
　　 $("#test").trigger("click");
　　 $("#test").click()
})

<a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a> 
$("#alink").click(); // 觸發了a標籤的點選事件，但是沒有觸發頁面跳轉 
document.getElementById("alink").click(); //既觸發了a標籤的點選事件，又觸發了頁面跳轉

把 “下一步” 改為 “下一步” 即給A標籤中的文字新增一個能被jQuery捕獲的元素，然後$("#spanId").click()；，才可以觸發頁面跳轉。

常用模擬
有時候，需要通過模擬使用者操作，來達到單擊的效果。例如在使用者進入頁面後，就觸發click事件，而不需要使用者去主動單擊。
在JQuery中，可以使用trigger()方法完成模擬操作。例如可以使用下面的程式碼來觸發id為btn的按鈕的click事件。

$('#btn').trigger("click");

這樣，當頁面載入完畢後，就會立刻輸出想要的效果。也可以直接簡寫click()，來達到同樣的效果：

$('#btn').click();

觸發自定義事件
trigger()方法不僅能觸發瀏覽器支援的具有相同名稱的事件，也可以觸發自定義名稱的事件。例如為元素繫結一個“myClick”的事件，JQuery程式碼如下：

$('#btn').bind("myClick",
function(){   
     $('#test').append("<p>我的自定義事件.</p>");  
 });

想要觸發這個事件，可以使用以下程式碼來實現：

$('#btn').trigger("myClick");

傳遞資料
trigger(type[，data])方法有兩個引數，第1個引數是要觸發的事件型別，第2個引數是要傳遞給事件處理函式的附加資料，以陣列形式傳遞。通常可以通過傳遞一個引數給回撥函式來區別這次事件是程式碼觸發的還是使用者觸發的。
下面是一個傳遞資料的例子。
$(function(){  
   $('#btn').bind("myClick",
function(event, message1, message2){  
                 $('#test').append(
"<p>"+message1 + message2 +"</p>");  
    });   
   $('#btn').click(function(){  
        $(this).trigger("myClick",["我的自定義","事件"]);  
   }).trigger("myClick",["我的自定義","事件"]);  
})

執行預設操作
trigger()方法觸發事件後，會執行瀏覽器預設操作。例如：
$("input").trigger("focus");

以上程式碼不僅會觸發為<input>元素繫結的focus事件，也會使<input>元素本身得到焦點（這是瀏覽器的預設操作）。
如果只想觸發繫結的focus事件，而不想執行瀏覽器預設操作，可以使用jQuery中另一個類似的方法——triggerHandler()方法。
$("input").triggerHandler("focus");

該方法會觸發<input>元素上繫結的特定事件，同時取消瀏覽器對此事件的預設操作，即文字框只觸發繫結的focus事件，不會得到焦點。