js事件委托、时间操作、本地化存储@2018-06-23

最新推荐文章于 2024-07-11 16:19:39 发布
最新推荐文章于 2024-07-11 16:19:39 发布
阅读量219 收藏
点赞数
分类专栏： 前端

TODO应用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>上课用品 8</title>
            <style>
                /* 完成的样式 */
                .done {
                    color: gray;
                    text-decoration: line-through;
                }
            </style>
        </head>
<body>
<div class="todo-main">
    <!-- todo 输入框 -->
    <div class="todo-form">
        <input id='id-input-todo' type="text">
        <button id='id-button-add' type="button">Add</button>
    </div>
    <!-- todo 列表 -->
    <div id="id-div-container">
        <!-- <div class='todo-cell'>
            <button class='todo-done'>完成</button>
            <button class='todo-delete'>删除</button>
            <span contenteditable='true'>上课</span>
        </div> -->
    </div>
</div>
<script>

    // 通过一个 Todo 应用, 学习下面这个概念
    // 1, 什么是事件委托
    // 2, 为什么需要事件委托
    // 3, 如何实现事件委托
    //
    // 时间操作
    // content editable (标签的可编辑属性)
    // localStorage (本地存储) 和 JSON 格式



    // 自己定义一个 log 函数
    var log = function() {
        console.log.apply(console, arguments)
    }

    var todoList = []

    // 给 add button 绑定添加 todo 事件
    var addButton = document.querySelector('#id-button-add')
    addButton.addEventListener('click', function(){
        // 获得 input.value
        var todoInput = document.querySelector('#id-input-todo')
        var task = todoInput.value
        // 生成 todo 对象
        var todo = {
            'task': task,
            'time': currentTime()
        }
        todoList.push(todo)
        saveTodos()
        insertTodo(todo)
    })

    var insertTodo = function(todo) {
        // 添加到 container 中
        var todoContainer = document.querySelector('#id-div-container')
        var t = templateTodo(todo)
        // 这个方法用来添加元素更加方便, 不需要 createElement
        todoContainer.insertAdjacentHTML('beforeend', t);
    }

    var templateTodo = function(todo) {
        var t = `
        <div class='todo-cell'>
            <button class='todo-done'>完成</button>
            <button class='todo-delete'>删除</button>
            <span contenteditable='true'>${todo.task}</span>
            <span>${todo.time}</span>
        </div>
    `
        return t
    }

    // 事件委托相关概念
    // ===
    //
    // 问题在于, todo 都是运行的时候才添加的元素
    // 对于这样的元素, 我们没办法事先绑定事件
    // 我们可以把 click 事件绑定在事先存在的父元素上
    // 然后在运行的时候检查被点击的对象(通过 event.target 属性)
    // 是否是我们需要的对象, 这个概念就是事件委托

    var todoContainer = document.querySelector('#id-div-container')

    todoContainer.addEventListener('keydown', function(event){
        log('container keydown', event, event.target)
        var target = event.target
        if(event.key === 'Enter') {
            log('按了回车')
            // 失去焦点
            target.blur()
            // 阻止默认行为的发生, 也就是不插入回车
            event.preventDefault()
            // 更新 todo
            var index = indexOfElement(target)
            log('update index',  index)
            // 把元素在 todoList 中更新
            todoList[index].task = target.innerHTML
            // todoList.splice(index, 1)
            saveTodos()

        }
    })

    // 通过 event.target 的 class 来检查点击的是什么
    todoContainer.addEventListener('click', function(event){
        log('container click', event, event.target)
        var target = event.target
        if(target.classList.contains('todo-done')) {
            log('done')
            // 给 todo div 开关一个状态 class
            var todoDiv = target.parentElement
            toggleClass(todoDiv, 'done')
        } else if (target.classList.contains('todo-delete')) {
            log('delete')
            var todoDiv = target.parentElement
            var index = indexOfElement(target)
            log('delete index',  index)
            todoDiv.remove()
            // 把元素从 todoList 中 remove 掉
            // delete todoList[index]
            todoList.splice(index, 1)
            saveTodos()
        }
    })

    // 保存 todoList
    var saveTodos = function() {
        var s = JSON.stringify(todoList)
        localStorage.todoList = s
    }

    var loadTodos = function() {
        var s = localStorage.todoList
        return JSON.parse(s)
    }

    // 返回自己在父元素中的下标
    var indexOfElement = function(element) {
        var parent = element.parentElement
        for (var i = 0; i < parent.children.length; i++) {
            var e = parent.children[i]
            if (e === element) {
                return i
            }
        }
    }

    // 这个函数用来开关一个元素的某个 class
    var toggleClass = function(element, className) {
        if (element.classList.contains(className)) {
            element.classList.remove(className)
        } else {
            element.classList.add(className)
        }
    }


    // localStorage 可以用来存储字符串数据, 在浏览器关闭后依然存在
    // 存储方法如下
    // localStorage.name = 'gua'
    // 关闭浏览器, 再次打开, 仍然能获取到这个值
    log('关闭浏览器后', localStorage.name)
    var todos = ['吃饭', '喝水', '上课']
    //
    // 利用 localStorage 就可以存储 todo
    // 但是 todo 存在 array 中
    // 而 localStorage 只能存储 string 数据
    // 所以没办法直接存储
    //
    // 可行的办法如下
    // 存储的时候把 array 转换为字符串
    // 读取的时候把字符串转成 array
    // 这个过程通常被称之为 序列化 和 反序列化
    //
    // 在 js 中, 序列化使用 JSON 格式

    var s = JSON.stringify([1, 2, 3, 4])
    log('序列化后的字符串', typeof s, s)
    var a = JSON.parse(s)
    log('反序列化后的数组', typeof a, a)

    // 使用 JSON 序列化后, 就可以把 todo 存入浏览器的 localStorage 了

    // {
    //     task: '',
    //     time: '',
    // }

    var currentTime = function() {
        var d = new Date()
        var month = d.getMonth() + 1
        var date = d.getDate()
        var hours = d.getHours()
        var minutes = d.getMinutes()
        var seconds = d.getSeconds()
        var timeString = `${month}/${date} ${hours}:${minutes}:${seconds}`
        return timeString
    }
    // 时间标准库
    // ===
    // 常用用法如下
    /*
    var d = new Date()
    d.getFullYear()
    年份, 2016
    d.getMonth()
    月份, 0-11
    d.getDate()
    日期, 1-31
    d.getHours()
    小时, 0-23
    d.getMinutes()
    分钟, 0-59
    d.getSeconds()
    秒数, 0-59
    d.getMilliseconds()
    毫秒, 0-999
    d.getDay()
    星期几, 0-6
    */

    // 程序加载后, 加载 todoList 并且添加到页面中
    todoList = loadTodos()
    for (var i = 0; i < todoList.length; i++) {
        var todo = todoList[i]
        insertTodo(todo)
    }
</script>
</body>
</html>

效果：
这里写图片描述

改版Todo应用程序


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>上课用品 8</title>
        <style>
            /* 完成的样式 */
            .done {
                color: gray;
                text-decoration: line-through;
            }
        </style>
    </head>
    <body>
        <div class="todo-main">
            <!-- todo 输入框 -->
            <div class="todo-form">
                <input id='id-input-todo' type="text">
                <button id='id-button-add' type="button">Add</button>
            </div>
            <!-- todo 列表 -->
            <div id="id-div-container">
                <!-- <div class='todo-cell'>
                    <button class='todo-done'>完成</button>
                    <button class='todo-delete'>删除</button>
                    <span contenteditable='true'>上课</span>
                </div> -->
            </div>
        </div>
        <script src='todo.js'></script>
    </body>
</html>

todo.js

// 自己定义一个 log 函数
var log = function() {
    console.log.apply(console, arguments)
}

// 给 add button 绑定添加 todo 事件
var bindEventAdd = function() {
    log('bind add button')
    var addButton = document.querySelector('#id-button-add')
    log('add button', addButton)
    addButton.addEventListener('click', function(){
        log('click add')
        // 获得 input.value
        var todoInput = document.querySelector('#id-input-todo')
        var task = todoInput.value
        // 生成 todo 对象
        var todo = {
            'task': task,
            'time': currentTime()
        }
        todoList.push(todo)
        saveTodos()
        insertTodo(todo)
    })
}

var bindEventEnter = function() {
    var todoContainer = document.querySelector('#id-div-container')
    todoContainer.addEventListener('keydown', function(event){
        log('container keydown', event, event.target)
        var target = event.target
        if(event.key === 'Enter') {
            log('按了回车')
            // 失去焦点
            target.blur()
            // 阻止默认行为的发生, 也就是不插入回车
            event.preventDefault()
            // 更新 todo
            var index = indexOfElement(target.parentElement)
            log('update index',  index)
            // 把元素在 todoList 中更新
            todoList[index].task = target.innerHTML
            // todoList.splice(index, 1)
            saveTodos()

        }
    })
}

var bindEventButton = function() {
    // 通过 event.target 的 class 来检查点击的是什么
    var todoContainer = document.querySelector('#id-div-container')
    todoContainer.addEventListener('click', function(event){
        log('container click', event, event.target)
        var target = event.target
        if(target.classList.contains('todo-done')) {
            log('done')
            // 给 todo div 开关一个状态 class
            var todoDiv = target.parentElement
            toggleClass(todoDiv, 'done')
        } else if (target.classList.contains('todo-delete')) {
            log('delete')
            var todoDiv = target.parentElement
            var index = indexOfElement(target.parentElement)
            log('delete index',  index)
            todoDiv.remove()
            // 把元素从 todoList 中 remove 掉
            // delete todoList[index]
            todoList.splice(index, 1)
            saveTodos()
        } else if (target.classList.contains('todo-edit')) {
            log('edit')
            var cell = target.parentElement
            var span = cell.children[3]
            log('span is ', span)
            span.setAttribute('contenteditable', 'true')
            // span.contentEditable = true
            span.focus()
        }
    })
}

var GuaEventType = {
    blur: 'blur',
    click: 'click',
}
// EventType.blur
// EventType.click

var bindEventBlur = function() {
    log('bind event blur function')
    var todoContainer = document.querySelector('#id-div-container')
    todoContainer.addEventListener(GuaEventType.blur, function(event){
        log('container blur', event, event.target)
        var target = event.target
        if (target.classList.contains('todo-label')) {
            log('update and save')
            // 让 span 不可编辑
            target.setAttribute('contenteditable', 'false')
            // 更新 todo
            var index = indexOfElement(target.parentElement)
            log('update index',  index)
            // 把元素在 todoList 中更新
            todoList[index].task = target.innerHTML
            // todoList.splice(index, 1)
            saveTodos()
        }
    }, true)
}

var bindEvents = function() {
    // 添加 todo
    bindEventAdd()
    // 文本框输入 todo 按回车保存
    bindEventEnter()
    // 完成按钮和删除按钮
    bindEventButton()
    // 文本框失去焦点后保存 todo
    bindEventBlur()
}


var insertTodo = function(todo) {
    // 添加到 container 中
    var todoContainer = document.querySelector('#id-div-container')
    var t = templateTodo(todo)
    // 这个方法用来添加元素更加方便, 不需要 createElement
    todoContainer.insertAdjacentHTML('beforeend', t);
}

var templateTodo = function(todo) {
    var t = `
        <div class='todo-cell'>
            <button class='todo-done'>完成</button>
            <button class='todo-delete'>删除</button>
            <button class='todo-edit'>编辑</button>
            <span class='todo-label' contenteditable='false'>${todo.task}</span>
            <span>${todo.time}</span>
        </div>
    `
    return t
}

// 保存 todoList
var saveTodos = function() {
    var s = JSON.stringify(todoList)
    localStorage.todoList = s
}

var loadTodos = function() {
    var s = localStorage.todoList
    return JSON.parse(s)
}

// 返回自己在父元素中的下标
var indexOfElement = function(element) {
    var parent = element.parentElement
    for (var i = 0; i < parent.children.length; i++) {
        var e = parent.children[i]
        if (e === element) {
            return i
        }
    }
}

// 这个函数用来开关一个元素的某个 class
var toggleClass = function(element, className) {
    if (element.classList.contains(className)) {
        element.classList.remove(className)
    } else {
        element.classList.add(className)
    }
}

var currentTime = function() {
    var d = new Date()
    var month = d.getMonth() + 1
    var date = d.getDate()
    var hours = d.getHours()
    var minutes = d.getMinutes()
    var seconds = d.getSeconds()
    var timeString = `${month}/${date} ${hours}:${minutes}:${seconds}`
    return timeString
}


var initTodos = function() {
    todoList = loadTodos()
    for (var i = 0; i < todoList.length; i++) {
        var todo = todoList[i]
        insertTodo(todo)
    }
}


var todoList = []

var __main = function() {
    // 绑定事件
    bindEvents()

    // 程序加载后, 加载 todoList 并且添加到页面中
    initTodos()
}

__main()

参考：
事件委托
https://github.com/yonyouyc/blog/issues/25
https://segmentfault.com/a/1190000002613617
http://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html

http://blog.xieliqun.com/2016/08/12/event-delegate/#%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98

http://blog.xieliqun.com/2016/08/12/event-delegate/#%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98

时间操作
https://segmentfault.com/a/1190000000481753
https://www.cnblogs.com/tugenhua0707/p/3776808.html

本地化存储
https://segmentfault.com/a/1190000002701423

https://xifengxx.github.io/2016/07/10/HTML5%E5%AD%98%E5%82%A8%E5%8F%8A%E7%A6%BB%E7%BA%BF%E5%BA%94%E7%94%A8%E5%AE%9E%E6%88%98/

https://segmentfault.com/a/1190000003965297
https://segmentfault.com/a/1190000007506189#articleHeader5

qq_34983808
关注
专栏目录
Modern-JavaScript-Projects：此存储库包含Javascript项目
02-10
现代JavaScript项目是一个集合，旨在帮助开发者提升其JavaScript技能并实践实际应用。这个资源库包含了多个JavaScript项目，每个项目都代表了不同的应用场景和技术挑战，对于学习和掌握JavaScript编程语言的各个方面...
Javascript-Projects:包含从基本到高级的多个JS项目
05-27
6. **事件监听与事件委托**：学习如何有效地处理事件，如事件冒泡和事件捕获，以及如何使用事件委托来优化性能，减少内存占用。 7. **JavaScript库和框架**：在高级项目中，可能会引入jQuery、React、Vue等库或框架...
javascript 时间委托 (利用事件冒泡和事件源对象进行处理)
fanfan
12-27 218
事件委托 利用事件冒泡和事件源对象进行处理 优点: 1 性能, 不需要循环所有元素一个个绑定事件 2 灵活, 当有新的子元素不需要重新绑定事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件委托</title> </...
javascript的时间委托
dfl2099的博客
06-12 129
xmind-qianjilou 转载于:https://www.cnblogs.com/qianjilou/p/6992232.html
使用JavaScript进行简单的日期和时间本地化
06-04 161
其中，我们对我们的工作中所遇到的诸多挑战SitePoint竞赛和市场是决定当前日期和时间给我们的用户的最佳方式。 这听起来很简单，但有相当多的考虑，我们需要牢记。 人类容易阅读 “指南2个小时前”和“完2天”更容易比“周一开始，2007年6月4日上午10时04分+1000”和“完星期三，2007年6月6日，上午9:28 +1000”来理解。 超高速缓存的搜索引擎 “指南2个小时前”或者...
原生JS实现事件委托
Essentric_
05-29 7904
什么是事件委托？ 它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 举个栗子： 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优...
js 格式化时间
最新发布
suk_java的博客
07-11 873
js 格式化时间
JavaScript-30:香草JS挑战
04-08
6. **本地存储**：通过存储用户数据到浏览器的localStorage或sessionStorage，你将了解如何实现数据持久化，即使页面刷新也能保留用户信息。 7. **地理位置API**：在某些项目中，你可能需要利用Geolocation API获取...
web-reminder:帮你控制摸鱼时间的小工具~
05-22
7. **性能优化**：为了确保web-reminder在长时间运行时保持高效，开发者可能采用了各种性能优化技术，例如事件委托、异步处理、减少DOM操作等。同时，合理使用浏览器的垃圾回收机制也至关重要。 总的来说，web-...
Bookmarks-application:存储书签的Javascript Web应用程序。 按照TraversyMedia的教程制作
05-15
9. **性能优化**：考虑使用事件委托来减少事件监听器的数量，或者使用防抖（debounce）或节流（throttle）函数来提高性能，防止频繁的DOM操作。 10. **测试**：为了确保应用的稳定性和可靠性，可以编写单元测试和...
JS 获取当前日期时间 （如：2017-03-17 18:55:03 星期六）
Xiaoming's Blog
03-17 1182
currentdate = year + sign1 + month + sign1 + day + " " + hour + sign2 + minutes + sign2 + seconds + " " + week;
JS对时间的相关处理函数与应用
在路上
06-17 2663
现在在网上找有关JS对时间的处理的文章一大把，但是没有多少会讲得比较全面，大部分都是讲一方面或者只做一个简单的说明，所以，大家搜索的时候，文章一大把，但能够让人满意的却没有几篇。前几天在一个项目当中，要用到有关JS对时间的相关处理，实现起来不难，不过有些地方也确实容易出错。
JS事件委托
m0_61464629的博客
07-20 5107
事件委托 一、什么是事件委托 二、事件委托的原理 三、事件委托的作用 一、什么是事件委托 事件委托也称为事件代理。就是利用事件冒泡，把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托就无法实现。 举个简单的例子： 例如快递员有100个快递要分别送给100个学生， 如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，应该怎样操作呢？这时快递员可以把100个快递委托给班主任，班主任把这些快递放到办公室，同学们下课自行领...
js事件委托
badmoonc的博客
09-11 270
事件委托（也叫事件代理），其实这个问题也简单，要想弄明白事件委托，我们先要把事件冒泡的机制搞清楚。举个事件冒泡的例子： 点击 var ul=document.getElementsByTagName('ul')[0]; var li=document.getElementsByTagName('li')[0]; ul.addEventListener('cl
JS的事件委托（Event Delegation）
一颗松鼠
10-27 1437
事件委托是一种在JavaScript中处理事件的技术。它利用了事件的冒泡机制，将事件处理程序绑定到它们的共同祖先元素上，而不是直接绑定到每个子元素上。当事件触发时，事件会从子元素一直冒泡到祖先元素，然后通过判断事件的目标元素来执行相应的事件处理程序。
JS 事件委托
p1967914901的博客
02-03 6840
JS 事件委托事件委托1. 基本概念2. 事件传播3. 事件委托的好处 事件委托 1. 基本概念 事件委托，简单的来说，就是把一个元素的响应事件的函数委托到另一个元素。一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。 前面提到 DOM 中事件委托的实现是利用事件冒泡的机制，那么事件冒泡是什么呢？ 2. 事件传播 事件的传播分为三个阶段：捕获阶段、目标阶
前端开发复习关键点：事件委托、兼容性与性能优化
"本文主要探讨了前端开发中的事件委托方法，以及如何解决在不同浏览器下事件绑定的问题。同时，提供了一份前端复习资料，涵盖了HTML、CSS、JavaScript、JQuery等相关知识点，包括页面兼容性、网页标准、前端优化、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值