DOM操作—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、


 

事件对象【event对象】

参考:https://www.cnblogs.com/websmile/p/8807334.html

1、鼠标/键盘  事件对象的

属性描述DOM
altKey 返回当事件被触发时,"ALT" 是否被按下。 2
button 返回当事件被触发时,哪个鼠标按钮被点击。 2
clientX 返回当事件被触发时,鼠标指针【相对于浏览器页面】的水平坐标。 2
clientY 返回当事件被触发时,鼠标指针【相对于浏览器页面】的垂直坐标。 2
ctrlKey 返回当事件被触发时,"CTRL" 键是否被按下。 2
Location 返回按键在设备上的位置 3
charCode 返回onkeypress事件触发键值的字母代码。 2
key 在按下按键时返回按键的标识符。 3
keyCode 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 2
which 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 2
metaKey 返回当事件被触发时,"meta" 键是否被按下。 2
relatedTarget 返回与事件的目标节点相关的节点。 2
screenX 返回当某个事件被触发时,鼠标指针【相对于硬件屏幕】的水平坐标。 2
screenY 返回当某个事件被触发时,鼠标指针【相对于硬件屏幕】的垂直坐标。 2
shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下。

常用 事件对象的属性方法:clientX、clientY、

重点:事件对象中几个坐标,相对的对象不同   https://blog.csdn.net/qiumingsheng/article/details/48051585

      clientX【相对浏览器视口】、 screenX【相对显示器屏幕】、pageX【相对文档,在ifram中有效】、offsetX【相对于事件指向元素

 

思考:事件对象有这些坐标,那DOM元素有没有相对坐标呢?

 

 


 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的事件对象属性与方法

 

posted @ 2018-05-15 16:06  吴飞ff  阅读(415)  评论(0编辑  收藏  举报