JavaScript事件繫結、事件解除、DOM載入完成，相容IE8+

阿新 • • 發佈：2019-01-15

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href 
="" rel="stylesheet">
</head>

<body>
    <button type="button" id="addBtn">給方框繫結事件</button>
    <button type="button" id="remBtn">移除方框點選事件</button>
    <br>
    <br>
    <div style="width: 200px; height: 200px; padding: 10px; border: 1px solid #ddd;" id 
="test">點選繫結\解綁按鈕後再點選我，驗證結果</div>
    <br>
    <br>
    <br>
    <br>
    <div>111111111111111111111111</div>
    <div>111111111111111111111111</div>
    <div>111111111111111111111111</div>
    <div>111111111111111111111111</div 
>
    <div>111111111111111111111111</div>
    <div>111111111111111111111111</div>
    <div>111111111111111111111111</div>
    <div>111111111111111111111111</div>
    <div>111111111111111111111111</div>
    <div>111111111111111111111111</div>
    <script>
    (function() {
        var doc = document;
        var modern = doc.addEventListener;
        var pre = modern ? '' : 'on';

        //事件繫結
        function on(ele, type, fn) {
            var add = modern ? 'addEventListener' : 'attachEvent';
            ele[add](pre + type, fn);
        }

        //事件解除
        function off(ele, type, fn) {
            var rem = modern ? 'removeEventListener' : 'detachEvent';
            ele[rem](pre + type, fn);
        }

        //DOM載入
        function ready(ele, fn) {
            var rea = modern ? 'DOMContentLoaded' : 'readystatechange';
            if (rea == 'readystatechange') {

                ele[pre + rea] = function() {
                    if (ele.readyState == 'complete') {
                        fn();
                    }
                };
            } else {
                window.on(ele, rea, fn);
            }
        }


        window.on = on;
        window.off = off;
        window.ready = ready;
    })();

    function foo() {
        alert('我繫結點選事件了');
    }

    //繫結
    window.on(addBtn, 'click', function() {
        window.on(test, 'click', foo);
    });

    //解除
    window.on(remBtn, 'click', function() {
        window.off(test, 'click', foo);
    });

    //DOM載入完成
    window.ready(document, function() {
        alert('dom載入完畢');
    });
    </script>
</body>

</html>

JavaScript事件繫結、事件解除、DOM載入完成，相容IE8+

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-e

JavaScript 回車鍵繫結登入事件常用鍵位碼（keyCode）

1、回車鍵繫結登入事件 $(document).keydown(function (e) { if ((e.keyCode || e.which) == 13) { //document.querySelector(".login-button").click();　　　　do

理解Javascript中的事件繫結與事件委託（轉載）

最近在深入實踐js中，遇到了一些問題，比如我需要為動態建立的DOM元素繫結事件，那麼普通的事件繫結就不行了，於是通過上網查資料瞭解到事件委託，因此想總結一下js中的事件繫結與事件委託。事件繫結最直接的事件繫結：HTML事件處理程式如下示例程式碼，通過節點屬性顯式宣

JS的事件繫結和事件流模型

一、JS事件（一）JS事件分類 1.滑鼠事件： click/dbclick/mouseover/mouseout 2.HTML事件： onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.鍵盤事件

事件繫結（事件處理程式）

事件處理程式（事件繫結）：響應某個事件的函式就叫做事件處理程式（或事件偵聽器）。為事件指定處理程式的方式： 1.HTML 事件處理程式：某個元素支援的每種事件，都可以使用一個與相應事件處理程式同名的 HTML 特性來指定。這個特性的值應該是能夠執行的 JavaScript 程式

原生js事件繫結和事件委託

最近常在移動端開發，由於不是大型站點，不需要使用vue等庫，也不需要引用jquery和zepto等。寫得最多得就是各種元素選擇器和事件繫結，操作下來也是有點煩人。這時候懷念起jquery的美好來了，但是僅為了這個引用這麼大個庫，實在時下不了手，思考了一下，直

JQuery的事件繫結與事件委託

1、事件委託與事件繫結概念事件繫結：將普通的事件event繫結在DOM節點上，當DOM節點被選中時，將事件與之繫結，方便使用者提供相應的操作。比如：在button按鈕上繫結click滑鼠事件，在input中繫結focusin焦點事件等等，具體的例如：常常在

按鈕點選事件繫結--onClick事件

例子：給按鈕新增繫結事件：<button type="submit" id="btn">btn</button>第一種:$("#btn").click(function(even

jquery事件繫結和事件委託

參考文件： http://blog.csdn.net/xxd851116/article/details/8646899 http://www.jb51.net/article/57827.htm http://www.jb51.net/article/67166.ht

原生js事件繫結和事件移除

/** * @description 事件繫結，相容各瀏覽器 * @param target 事件觸發物件 * @param type 事件 * @param func 事件處理函式 */ function addEvents(target, type

JQ事件繫結效果|||事件氣泡

JavaScript(1)---繫結事件、解除繫結事件

JavaScript(1)---繫結事件、解除繫結事件一、事件概述 1、事件的幾個概念 · 事件指的是文件或者瀏覽器視窗中發生的一些特定互動瞬間。我們可以通過偵聽器（或者處理程式）來預定事件，以便觸發事件的時候執行相應的程式碼。事件處理程式我們使用者在頁面中進行的點選動作(click)、滑鼠移動動作

深入理解JS的事件繫結、事件流模型

https://www.jb51.net/article/139997.htm 一、JS事件（一）JS事件分類 1.滑鼠事件： click/dbclick/mouseover/mouseout 2.HTML事件： onload/onunload/onsubmit/onresize/o

angular,vue,react的基本語法—動態屬性、事件繫結、ref，angular元件建立方式

基本語法：動態屬性： vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]="msg" 事件繫結： vue: v-on:click="handleChange($eve

js事件高階應用01（事件繫結、高階拖拽）

事件繫結 IE方式 attachEvent(事件名稱、函式)，繫結事件處理函式 detachEvent(事件名稱、函式)，解除繫結 DOM方式 add

jquery事件繫結.on()、解綁事件off()用法詳解

jquery1.4 及之前的版本，由.click() 或 .bind()方法繫結的事件，不能適用指令碼建立的新元素：即是說頁面載入完成後，再動態建立的DOM元素並不能響應之前繫結的事件！舊版本的處理方法是使用.live()方法來代替事件繫結.bi

jQuery事件繫結on()、bind()與delegate() 方法詳解

使用JS一段時間了，專案過程中發現在jQuery中繫結事件時，有人用bind()，有人用on()，有人用delegate()，還有人用live()，看程式碼的時候覺得都實現功能了也就掀過去了，只是一直沒完全弄懂之間的區別，於是今天查了下資料，自己做個總結。之

JS事件機制：事件繫結、事件監聽、事件委託(代理)和事件執行順序總結

JS 對於使用者的操作做出響應,就必須對DOM元素繫結事件處理函式事件繫結　1、在DMO中直接繫結事件 <input type="button" value="click me"

事件處理程式（事件繫結、事件監聽、事件偵聽器）

相應某個事件的函式叫做事件處理程式（或事件偵聽器）。 1、TTML事件處理程式 <script type="text/javascript"> function showMessage() { alert('hello world!')

js事件繫結的幾種方式與on()、bind()的區別

一直不是很理解幾種js事件繫結之間的區別與聯絡，今天百度了一下，在此做一總結： 1.如果只是簡單的繫結一個事件，可以直接寫在行內，點選執行一個函式，例如 <button onclick="alert('點我啊!')">點我啊</button> 2.也

JavaScript事件繫結、事件解除、DOM載入完成，相容IE8+

相關推薦