js事件详解及应用

水深无声 2021-09-20 06:12 239阅读 0赞

1:三种注册事件的方式

法一：<input type="button" value="点我" id="btn">

var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert('btn');
    }

缺点：无法给同一个对象的同一个事件注册多个不同的处理函数

法二：

btn.addEventListener('click', function () {
        alert('2')
    });

优点：弥补函数赋值带来的缺点

缺点：浏览器的兼容性老版本的ie，ie9+以后

法三：

attachEvent(btn, 'onclick', function () {
        alert(3)
    })

只是为了兼容ie浏览器

处理兼容性问题：兼容代码

function addf(element, eventName, fn) {
        if (element.addEventListener) {
    
            element.addEventListener(eventName, fn)
        } else if (element.attachEvent) {
            element.attachEvent('on' + eventName, fn)
        } else {
            // 相当于 element.onclick  =fn
            element['on' + click] = fn
        }
    }

移除事件：

法一移除：
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert('btn');
    
    //关键点：    btn.onclick = null
    }

法二移除：

由于匿名函数只能使用一次，在注册的时候已经使用了匿名函数u，所以移除的时候，需要命名函数

function btnClick() {
        alert('移除');
        // dome中标准的写法
        btn.removeEventListener('click', btnClick)
    }

法三移除

function btnClick()

\{ alert('移除');

btn.detaEvent('click', btnClick) \}

移除代码的兼容写法

function removef(element, eventName, fn) {
        if (element.removeEventListener) {
            element.removeListener(eventName, fn)
        } else if (element.detachEvent) {
            element.detachEvent('on' + eventName, fn)
        } else {
            element['on' + eventName] = fn
        }
    }

2：事件的三个阶段

事件捕获阶段 目标阶段 事件冒泡阶段

addEventListener的三个参数：事件类型，事件处理函数，默认是false(事件冒泡)

box.onclick  只有事件冒泡
     attachEvent只有两个参数：事件类型,事件处理函数     只有事件冒泡

3：事件委托：

事件委托(用到的是事件对象，说白了，就是传参)----原理是事件冒泡

事件委托:自己不用做，委托给父级来做

事件委托用到一个很重要的知识，事件对象，事件对象里面有很多属性，可以为我们提供服务

例子：通过ul，不用可以写出li，就能获取到li，并对其进行操作

![20190619102902168.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70][]

4：巧用e.type

一个函数使用多个事件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1][]

5：鼠标跟着图片飞：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2][]

这里需要注意：图片要想动，必须脱离文档流

clientX,clientY是获取可视区域的坐标

pageX,pageY是获取页面的坐标

获取页面滚动的距离的兼容代码

![20190619105343560.png][]

获取鼠标在页面的位置，处理浏览器兼容问题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3][]

实用：

![20190619105447232.png][]

6：取消默认行为

![20190619105529191.png][]

7：阻止冒泡

![20190619105626439.png][]

8：只能输入数字的文本框

![20190619105701315.png][]

键盘事件：keyCode获取键值 ，从而进行判断，由于键盘输入也属于默认行为，所以可以用取消默认行为的方法来实现

事件面试

1：事件模型：事件模型有三种

脚本模型

![20190619110143459.png][]

内联模型

![20190619110200455.png][]

![20190619110213424.png][]

动态绑定

![20190619110255470.png][]

2：事件委托/事件代理(原理是事件冒泡和事件对象)

减少dom操作，优化性能

当用事件委托的时候(利用的是事件对象)，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都是在js里面的执行，这样可以大大的减少dom操作，这才是事件委托的精髓所在。

3：如何让事件先冒泡后捕获

给一个元素绑定两个addEventListener,其中一个参数为false(冒泡)，一个参数是true(捕获)，调整他们的代码顺序，将设置为冒泡(false)的监听是事件放在捕获的监听事件之后

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 4][]

[20190619102902168.png]: /images/20210812/df9c9b63ba6045ae8657479a26613a59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210812/ffbebb7ad81d4f5d8a060f895dc9cd98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]: /images/20210812/728e2dd968564246bf70374070a4c986.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2]: /images/20210812/797faff5b7c54deca7e09fb63abfd0a5.png
[20190619105343560.png]: /images/20210812/4a6bbbc5944f4fdfa4af8d64b68cd9de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3]: /images/20210812/9a16357d68aa4b748a8f8baf4f4394d3.png
[20190619105447232.png]: /images/20210812/7cec6a30f1f34a789e1bad43c844c414.png
[20190619105529191.png]: /images/20210812/0e9723c1c2ed4197a78fa16b2734ada5.png
[20190619105626439.png]: /images/20210812/097587fcd02d42be8e07a2657763f27a.png
[20190619105701315.png]: /images/20210812/dfa76cbeb51f4a71a33449a2b7a93f36.png
[20190619110143459.png]: /images/20210812/fa3da94f8b644bd0814c02551179ef7e.png
[20190619110200455.png]: /images/20210812/e129f7d5a08348cc906179eeba8bd387.png
[20190619110213424.png]: /images/20210812/5fe3b66f95f54012835abc0a406d4911.png
[20190619110255470.png]: /images/20210812/33ccaa4b4c4f4e20b63bfd78edf6776d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 4]: /images/20210812/ba763759149f4e73b6c2acebbf94508d.png