JavaScript 原生事件

時間 2019-11-19

原文原文鏈接

一、原生事件的綁定：http://www.javashuo.com/article/p-eoykugzs-x.htmljavascript

　　a、DOM0級事件：html

　　　　1. 行內事件java

　　　　2. 元素.on事件名=函數segmentfault

　　 b、DOM2級事件：addEventListener 【removeEventListener，不能移除匿名添加的函數】。瀏覽器

　　　　注意：addEventListener 綁定事件的第三個參數，有過修改。http://www.javashuo.com/article/p-fggfawdm-ec.html 或 https://segmentfault.com/a/1190000017247263?utm_source=tag-newestdom

　　　　　　阻止默認行爲是配合passive使用，http://www.mamicode.com/info-detail-2306048.html函數

二、即時反應的input和propertychange方法 ：http://www.javashuo.com/article/p-yjrfalhm-x.htmlpost

三、js自定義一個事件： 測試

　　爲何要自定義事件：https://juejin.im/entry/5ad070b56fb9a028db591d49 （事件本質是一種消息）spa

　　自定義事件的實現： http://www.jb51.net/article/83911.htm 或 http://chayangge.com/2016/04/29/javascript%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/ （推薦）

　　　　自定義事件須要用到函數Event 和 dispatchEvent。內置的事件會由瀏覽器根據某些操做進行觸發，自定義的事件就須要 js程序觸發（如，dispatchEvent）。

　　總結：基於DOM的自定義事件和純js實現自定義事件。他們的區別就是，基於DOM的自定義事件，須要addEventListener註冊一個自定義的事件名稱，js控制這個事件觸發。而，

　　　　　純js實現的事件，就是一個函數的封裝（事件容器）。須要DOM的話，就是DOM原有的事件觸發後調用這個事件容器的函數。其實，原有事件的疊加，也能夠變成自定義的事件。以下面的 3次點擊事件。

四、3次點擊事件實現：https://blog.csdn.net/xiazhiqiang01/article/details/52527478

　　原有的事件，結果疊加封裝在一個方法裏，就能夠自定義一個事件。

　　去掉一些兼容性的處理，簡化後的代碼：

        var button = document.getElementById('button');
        
        // 鼠標3擊事件
        function click3Event(dom, fn) {
            var handler = function (event) {
                var target = event.target;
                var handler = function (event) {
                    var target = event.target;
                    target.removeEventListener('click', handler, false);
                    // 執行內容
                    fn();
                };

                target.addEventListener('click', handler, false)
                // 爲防止雙擊後較長時間再次單擊執行事件
                setTimeout(function () {
                    target.removeEventListener('click', handler, false);
                }, 300);
            };

            dom.addEventListener('dblclick', handler, false)
        }

        click3Event(button, function (event) { // 函數綁定自定義事件，及事件函數。函數內部綁定事件仍是使用原生的事件綁定
            console.log('3 click');
        });