美文网首页
DOM 绑定事件以及事件在for循环里解决闭包方法

DOM 绑定事件以及事件在for循环里解决闭包方法

作者: ticktackkk | 来源:发表于2020-01-21 03:31 被阅读0次

绑定事件处理函数的方法
一、
缺点同一个元素只能绑定一个事件处理函数,相同的会被覆盖

element.onclick = function(){
console.log('a')
};

解除事件处理程序
element.onclick = null

二、
直接在html元素上绑定

<div onclick = "console.log(''a")>hehe</div>

三、

div.addEventListener('click',function () {
            console.log('a');
        },false);

解除事件处理程序
div.removeaddEventListener('click',function () {}.false)
优点:给一个对象的一个事件绑定多个处理函数,并且按照绑定的顺序执行

var div = document.getElementsByTagName('div')[0];
        div.addEventListener('click',function () {
            console.log('a');
        },false)



        div.addEventListener('click',function () {
            console.log('b');
        },false)

四、ie独有
div.attachEvent ('onclick',function(){})
解除事件处理程序
div.detachEvent ('onclick',function(){})

五、题目
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
分别打印li的索引
方法一 立即执行函数

var li = document.getElementsByTagName('li');        
        for (var i = 0; i < li.length; i++) {
            (function(j){
                li[j].addEventListener('click', function () {
                console.log(j);
            }, false)
            }(i))            
        }

方法二、 let

var li = document.getElementsByTagName('li');        
        for (let i = 0; i < li.length; i++) {
                li[j].addEventListener('click', function () {
                console.log(j);
            }, false)               
        }

相关文章

  • DOM 绑定事件以及事件在for循环里解决闭包方法

    绑定事件处理函数的方法一、缺点同一个元素只能绑定一个事件处理函数,相同的会被覆盖 解除事件处理程序element....

  • 给动态添加的dom绑定事件,没有触发的原因

    1.事件没有绑定成功 解决方法:可以在生成dom之后再去绑定事件 2.事件委托/事件代理

  • 简述闭包

    闭包是指可以包含未声明名字的代码块,例子:for循环里绑定点击事件想让每个标签保留序号,我们使用闭包把点击事件包起...

  • 闭包的使用场景

    闭包经典使用场景之一:通过循环给页面上多个dom节点绑定事件。 题目:现在有个HTML片段,要求编写代码,点击编号...

  • JavaScript DOM2级事件

    Dom二级事件可以解决事件冒泡以及一个对象只能绑定一个事件的问题(主要) 有两个方法: 1.addEvenList...

  • JavaScript事件

    事件分类 事件的绑定方法 通过标签绑定事件 通过js获取DOM元素绑定事件 通过addEventListener属...

  • 事件生僻知识学习笔记

    DOM2 级事件包括: 事件捕获,处于目标,事件冒泡 绑定事件方法: HTML上直接绑定 DOM0级事件处理程序 ...

  • DOM0和DOM2级事件

    DOM0和DOM2级事件 事件绑定的两种方法 DOM0级事件绑定 curEle.onclick=function(...

  • BUG(2)使用tablePYQT5当tableview自动生成

    问题现象:在循环中为tableview里的button绑定事件,结果发现所有的button事件都是一样的 解决方法...

  • DOM的事件绑定、事件监听

    JS有三种常用的绑定事件的方法 在DOM元素上直接绑定 在JS代码中绑定 在JS中绑定事件监听函数 在DOM中直接...

网友评论

      本文标题:DOM 绑定事件以及事件在for循环里解决闭包方法

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