JavaScript 原生事件

1、原生事件的绑定：https://www.cnblogs.com/shsxt/p/7903216.html

　　a、DOM0级事件：

　　　　1. 行内事件

　　　　2. 元素.on事件名=函数

　　 b、DOM2级事件：addEventListener 【removeEventListener，不能移除匿名添加的函数】。

　　　　注意：addEventListener 绑定事件的第三个参数，有过修改。https://juejin.im/post/5a4f41cc518825734c5b34ee 或 https://segmentfault.com/a/1190000017247263?utm_source=tag-newest

　　　　　　阻止默认行为是配合passive使用，http://www.mamicode.com/info-detail-2306048.html

2、即时反应的input和propertychange方法 ：https://www.cnblogs.com/LHYwin/p/6136256.html

3、js自定义一个事件：

　　为什么要自定义事件：https://juejin.im/entry/5ad070b56fb9a028db591d49 （事件本质是一种消息）

　　自定义事件的实现： 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次点击事件。

4、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');

        });

5、元素事件传递问题：

　　1、事件冒泡和事件捕获（标准文档流中）；

　　2、固定和绝对定位元素z-index比标准文档流的大，会遮挡下面元素的事件触发（CSS属性：pointer-events:none;可以让事件传递下去。）；

　　　　体会：pointer-events:none;这个属性相当于告诉浏览器，所有的事件都把我忽略了吧，对于事件而言我是不存在的，即不阻挡也不反应。

　　3、相对定位的z-inde属性失效，所以不存在遮挡下面元素；

　　4、定位元素的子元素，如果再定位的话，不能阻止事件传递到这个父定位元素中（这个方法就没法实现点击模态框空白部分，隐藏模态框的效果）。

　　5、在js中给一个元素DOM绑定事件，可以阻止事件冒泡，从而阻止事件传递。

　　6、在CSS中有一个 pointer-events: none;属性，可以让当前标签完全没有事件，里面子标签的事件也被禁掉了。（这个感觉在阻止事件传递上不实用，

　　　既然给这个标签绑定了事件，又让它不能被触发比较矛盾，我们只是不想让子元素的事件，传递到父元素中。）

　　7、兄弟标签的重叠部分，怎么让两个标签的事件都触发呢。（事件冒泡和事件捕获的事件传播，说的都是祖先关系的dom元素）

　　　　说明：暂时没有找到可以实现这个功能的方法，实际项目基本不会有这种情况出现（把它们变成祖先关系的标签就可以解决）。但是特定情况会有这个需求，如在手机左下角，放一个隐藏的标签div，连续点击8次，显示 vconsole 面板。

　　　　　　　如果这个div标签下面的标签是有点击事件的话，则会遮挡下面标签的点击事件（不是祖先关系的两个标签，无法实现两个都能触发）。只能把隐藏的标签放到没有事件的标签上面，避免这种情况出现。

具体事件：

1、popstate事件（浏览器前进、回退事件）：https://www.cnblogs.com/myclovers/p/6229687.html

　总结：popstate 事件，不同的环境，处理触发有的区别。使用这个要注意测试不同的环境，效果是否一致。

2、hashchange事件（监听浏览器链接的hash值变化）：https://www.jianshu.com/p/100242c095e7 (试了下，好像一直没有触发这个事件)

3、load事件：（img、script 等DOM元素也有load事件）https://blog.csdn.net/a__loser/article/details/71186922

　注意：不是只有Window 有load事件，所有会加载资源的DOM标签都有这个事件。资源加载成功后，就会触发。

　　　　常用的就是js中通过script标签，加载的js文件。如果程序有先后关系，就可以使用 load 事件处理。

var script = document.createElement('script'),

head = document.getElementsByTagName('head')[0];

script.type = 'text/javascript';

script.charset = 'UTF-8';

script.src = "https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js";

/* 插入DOM中 */

document.getElementsByTagName('head')[0].appendChild(script)

/* script加载资源事件 */

script.addEventListener('load', function () {

  new VConsole()

}, false);

4、pageshow 和 pagehide：https://www.runoob.com/jsref/event-onpageshow.html

　说明：在ios的设备上当用户点击返回时，为了提高性能网页呈现的是快照形式，并不会更新内容，所以，在返回网页时需要用到localtion.reload() 来刷新页面，重新请求页面内容。

<body οnpageshοw="location.reload()">

　查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 https://blog.csdn.net/m0_38073829/article/details/79072141

5、

JavaScript事件

1、事件流

2、DOM0级事件处理程序（类似jQuery事件的快捷）

3、DOM2级事件处理程序（类似jQuery事件的on方式）

4、IE事件处理程序（ attachEvent() 和 detachEvent() ）

5、事件对象

参考：https://www.cnblogs.com/chun6/p/6063522.html

jQuery事件

1、快捷方式

2、on方式

3、JQuery的事件对象属性与方法

参考：https://blog.csdn.net/thevictory/article/details/54772951