对于一个无线下拉加载图片的页面,如何给每个图片绑定事件

我们设定一种场景,如下代码,一个

中包含了若干个,而且还能继续增加。那如何快捷方便的为所有的绑定事件呢?

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
</div>
<button>点击增加一个 a 标签</button>

这里就会用到事件代理,我们要监听的事件,但要把具体的事件绑定到

上,然后看事件的触发点,是不是

var div1 = document.getElementById('div1')
div1.addEventListener('click', function (e) {
    var target = e.target
    if (e.nodeName === 'a') {
        alert(target.innerHTML)
    }
})

那我们现在完善一下之前写过的通用事件绑定函数,加上事件代理

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, function (e) {
        var target
        if (selector) {
            target = e.target
            if (target.matches(selector)) {
                fn.call(target, e)
            }
        } else {
            fn(e)
        }
    })
}

然后这样使用

// 使用代理
var div1 = document.getElementById('div1')
bindEvent(div1, 'click', 'a', function (e) {
    console.log(this.innerHTML)
})

// 不适用代理
var a = document.getElementById('a1')
bindEvent(div1, 'click', function (e) {
    console.log(a.innerHTML)
})

最后,使用代理的优点

  • 使代码简洁
  • 减少浏览器的内存占用

原文地址:https://www.cnblogs.com/mushitianya/p/10662714.html

时间: 2024-10-10 04:36:04

对于一个无线下拉加载图片的页面,如何给每个图片绑定事件的相关文章

mui上拉加载会影响页面中的某些点击事件

项目是vue写的(移动端) <div class="mui-scroll"> <a :href="bannerinfo.activity_url" class="icon play"> 链接点击没反应(点元素的最左边才会跳转) </a> <a :href="'tel:'+item.ac_mobile"> {{item.ac_mobile}} 电话号码点击没反应(点元素的最左边才会

JQuery实现无刷新下拉加载图片

      最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQuery写下拉触发ajax事件 $(window).scroll(function () { if($(window).scrollTop()==($(document).height()-$(window).height()))//判断右边滑动条是否滑到最下 { $.ajax({ url:"&quo

Android中listView的下拉加载功能实现

今天给大家讲讲android开发中比较常见的listView的下拉加载,其实也可以叫做分页加载.为什么会有这个叫法呢?说说我的理解吧! 从字面上很好理解.当你滑动一个列表到底部的时候,这个时候就会出现正在加载的底部加载布局去加载更多的数据.这里拿微信作为一个例子,如下图所示: 如上图所示红色方框的部分就是底部的加载布局.从一定程度上这样做是必要的,为了优化用户的体验.你可以想想,假如你点开微信的朋友圈的时候,如果没有做分页加载,那么你需要等待很久的时间才能够看到你和朋友发的一些状态.这是因为这个

下拉加载更多DEMO(js实现)

项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判断滚动条滚到底呢? 当滚动条的高度加上滚动条到div顶部的高度等于div的可滚动高度时,说明滚动条到底部了.公式如下. [javascript] view plain copy this.scrollHeight <= $(this).scrollTop() + $(this).height() 给

安卓,采用最简单易懂的方式实现上拉刷新下拉加载更多

<!-- Description:上拉刷新,下拉加载更多是现在最流行的手势操作,但是对于初学者来说,在实现上是有一定难度的, 网上很多教程讲的都过于复杂,对于初学者无法起到引导作用,特此写本文,帮助安卓新手入门理解此, 还有最为重要的一点:本文只帮助你理解,并不是想你成为代码搬运工!别被那么多代码吓到了, 其中很多都是注释,仔细看注释对你理解有很大的帮助 Author:Booker L Date:2014-05-16 --> 一,事先准备: 实现该功能,最基本的需要两个东西,一个是OnTouc

使用谷歌提供的SwipeRefreshLayout下拉控件,并自定义实现下拉加载的功能

package com.loaderman.swiperefreshdemo; import android.os.Bundle; import android.os.Handler; import android.support.v4.widget.SwipeRefreshLayout; import android.support.v7.app.AppCompatActivity; import android.view.Gravity; import android.view.View;

Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载

随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的实现 -- CardView.RecyclerView也是谷歌V7包下新增的控件,用来替代ListView的使用,在RecyclerView标准化了ViewHolder类似于ListView中convertView用来做视图缓存. RecyclerView的优点就是,他可以通过设置LayoutMan

关于MJRefresh的下拉加载数据bug

当没有更多数据的时候显示NoMoreData 我的理解是先结束刷新再显示没有更多 今天之前一直没发现有问题 贴之前的代码 [self.collectionView reloadData]; [self.collectionView.mj_header endRefreshing]; // 结束刷新 [self.collectionView.mj_footer endRefreshing]; NSArray *arr = data[@"Json"]; if (arr.count == 0

Windows Phone 8.1开发:如何让ListView下拉加载更多?

Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListView的loaded事件中,获取ListView中的ScrollView对象. 如何获得ScrollViewer,这篇文章说的很清楚! Windows Phone 8.1开发:如何从ListView中,获取ScrollViewer对象 2. 给ScrollViewer创建事件,上篇文章也说了. 3.