当前位置 > it书童 > js > 正文
推荐小册
java高效编程
怎样更高效地用 java 编程

juc并发工具库
java并发编程工具库

设计模式
设计模式

jvm调优
jvm调优

rabbitmq实战
rabbitmq实战

redis实战
redis实战

Keepavlied高可用集群
Keepavlied高可用集群

nginx入门到实战
nginx入门到实战

java调试
java调试中遇到的各种坑

java输入输出流
java输入输出流

js 事件对象与事件委托

js it书童 2020-02-22 10:12:23 0赞 0踩 645阅读 0评论

什么是事件对象

事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象。

如:谁绑定了这个事件?鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置;键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。

事件对象的使用

事件触发发生时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。所以,在事件处理函数中声明1个形参用来接收事件对象。

// 以下的 event 就是事件对象,一般写成 e 或者 evt
eventTarget.onclick = function(event) {

}

eventTarget.addEventListener('click', function (event) {

})

属性和方法

1551169931778

e.target 和 this 的区别

  • this 是事件绑定的元素(绑定这个事件处理函数的元素)

  • e.target 是事件触发的元素

通常情况下 terget 和 this是一致的,但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),这时候this指向的是父元素,因为它是绑定事件的元素对象,而target指向的是子元素,因为他是触发事件的那个具体元素对象

<div>123</div>
<script>
    var div = document.querySelector('div');
    div.addEventListener('click', function(e) {
        // e.target 和 this指向的都是div
        console.log(e.target);
        console.log(this);
    });
</script>

事件冒泡下的 e.target 和 this

<ul>
    <li>abc</li>
    <li>abc</li>
    <li>abc</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        // 我们给ul 绑定了事件  那么this 就指向ul  
        console.log(this); // ul

        // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
        console.log(e.target); // li
    });
</script>

阻止默认行为

html中一些标签有默认行为,例如a标签被单击后,默认会进行页面跳转

<a href="http://www.baidu.com">百度</a>
<script>
// 阻止默认行为 让链接不跳转 
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
        e.preventDefault(); //  dom 标准写法
});
// 传统的注册方式
a.onclick = function(e) {
    // 普通浏览器 e.preventDefault();  方法
    e.preventDefault();
    // 低版本浏览器 ie678  returnValue  属性
    e.returnValue = false;
    // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
    return false;
}
</script>

阻止事件冒泡

事件冒泡本身的特性,会带来的坏处,也会带来的好处。e.stopPropagation() 可阻止事件冒泡

<div class="father">
    <div class="son">son儿子</div>
</div>
<script>
    var son = document.querySelector('.son');
    // 给son注册单击事件
    son.addEventListener('click', function(e) {
        alert('son');
        e.stopPropagation(); // stop 停止  Propagation 传播
        window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
    }, false);

    var father = document.querySelector('.father');
    // 给father注册单击事件
    father.addEventListener('click', function() {
        alert('father');
    }, false);
    // 给document注册单击事件
    document.addEventListener('click', function() {
        alert('document');
    })
</script>

事件委托

事件冒泡本身的特性,会带来的坏处,也会带来的好处。

事件委托也称为事件代理,在 jQuery 里面称为事件委派。说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。

1551172159273

原理:给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素。

事件委托的作用

  • 我们只操作了一次 DOM ,提高了程序的性能。

  • 动态新创建的子元素,也拥有事件。

<ul>
    <li>知否知否,点我应有弹框在手!</li>
    <li>知否知否,点我应有弹框在手!</li>
    <li>知否知否,点我应有弹框在手!</li>
    <li>知否知否,点我应有弹框在手!</li>
    <li>知否知否,点我应有弹框在手!</li>
</ul>
<script>
    // 事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        // e.target 这个可以得到我们点击的对象
        e.target.style.backgroundColor = 'pink';
    })
</script>
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
转载须注明出处:https://www.itshutong.com/articles/460/js-event-object-and-event-delegation