美文网首页
JS 事件监听、事件委托2018-07-10

JS 事件监听、事件委托2018-07-10

作者: 考拉狸猫 | 来源:发表于2018-07-10 13:55 被阅读0次

//常规的事件绑定只执行最后绑定的事件

//使用事件监听绑定事件

 //可以绑定多个事件

//语法element.addEventListener(event, function, useCapture)

  document.getElementById('btn3').addEventListener('click',hello3);

    document.getElementById('btn3').addEventListener('click',hello302);

    document.getElementById('btn3').removeEventListener('click',hello302);

    function  hello3() {

        console.log('addEventListener使用事件监听绑定事件1');

    }

    function hello302() {

        console.log('addEventListener使用事件监听绑定事件2');

    }

//封装事件监听

function addEvernHandler(target,type,fn ) {

        if(target.addEventListener){

            target.addEventListener(type,fn)

        }else {

            target.attachEvent("on"+type,fn)

        }

    }

    //移除监听

    function removeEvenHandler(target,type,fn) {

        if(target.removeEventListener){

            target.removeEventListener(type,fn)

        }else{

            target.detachEvent("on"+type,fn)

        }

    }

    //调用

    var btn4=document.getElementById('btn4');

    addEvernHandler(btn4,'click',hello4);

    removeEvenHandler(btn4,'click',hello402);

    function hello4() {

        console.log('封装监听');

    }

    function hello402() {

        console.log('移除监听');

    }

//事件委托

//事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果

//提高JavaScript性能。事件委托可以显著的提高事件的处理速度,减少内存的占用

var btn5=document.getElementById('btn5');

    document.onclick=function (event) {

        event=event || window.event;

        var target=event.target || event.srcElement;

        if(target==btn5){

            console.log(btn5.value)

        }

    }

    document.getElementById('li1').onclick=function () {

        console.log('li1');

    }

    document.getElementById('li2').onclick=function () {

        console.log('li2');

    }

    document.getElementById('li3').onclick=function () {

        console.log('li3');

    }

    document.getElementById('li4').onclick=function () {

        console.log('li4');

    }

//事件委托

    var ul2=document.getElementById('ul2');

    var item=ul2.getElementsByTagName("li");

    for (var i=0;i

        (function (i) {

            item[i].onclick=function () {

                console.log(item[i].innerHTML)

            }

        })(i)

    }

// 传统的事件绑定无法对动态添加的元素而动态的添加事件

var node=document.createElement('li');

    var textnode=document.createTextNode("5");

    node.appendChild(textnode);

    ul2.appendChild(node);

    var list=document.getElementById("ul3");

    document.addEventListener("click",function (event) {

        var target=event.target;

        if(target.nodeName=="LI"){

            console.log(target.innerHTML);

        }

    });

    var node2=document.createElement("li");

    var textnode2=document.createTextNode("5");

    node2.appendChild(textnode2);

    list.appendChild(node2)

相关文章

  • 2021-03-01

    js 1. 事件委托事件委托指的是,不在事件的发生地(直接 dom)上设置监听函数,而是 在其父元素上设置监听函数...

  • JS 事件监听、事件委托2018-07-10

    //常规的事件绑定只执行最后绑定的事件 //使用事件监听绑定事件 //可以绑定多个事件 //语法element.a...

  • js事件深入学习

    JavaScript的事件机制包含,事件绑定、事件监听、事件委托(事件代理)等 js中的事件流 ① .冒泡:当下级...

  • 12.4默写

    事件流 事件监听 事件委托

  • unity 委托事件

    定义委托及事件 实现事件监听+=(事件取消监听为-=)

  • JS的事件绑定、事件监听、事件委托

    事件绑定: 要想让JS对用户的操作做出响应,首先要对DOM元素绑定 事件处理函数。所谓事件处理函数,就是处理用户操...

  • 事件委托笔记

    事件委托原理:事件冒泡机制。 什么是事件委托: 事件委托——给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪...

  • web前端面试题@六(事件委托)

    *说到事件委托,我们首先先要知道什么是事件委托—— · 那么什么是事件委托呢??? JS里的事件委托就是当事件...

  • 封装一个通用的事件监听函数

    封装一个通用的事件监听函数,可实现普通的事件监听,也可实现事件委托(事件代理)

  • JS事件中心

    JS事件中心:事件监听、事件分发、事件销毁。

网友评论

      本文标题:JS 事件监听、事件委托2018-07-10

      本文链接:https://www.haomeiwen.com/subject/myvfpftx.html