JavaScript DOM 事件模型

简介:


<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>


var oBtn = document.getElementsByTagName('button')[0],
    oList = document.getElementsByTagName('ul')[0],
    oLi = oList.getElementsByTagName('li');
oBtn.onclick = function () {
    var li = document.createElement('li');
    li.innerText = oLi.length + 1;
    oList.appendChild(li);
}
oList.onclick = function (ev) {
    var ev = ev || window.event,
        tar = ev.target || ev.srcElement;
    // tar 即为被点击的 li 元素
    console.log(tar.innerHTML); 
    // 返回在所有兄弟元素中的索引,借用数组 indexOf 方法
    console.log(Array.prototype.indexOf.call(oLi, tar));
}


相关文章
|
17天前
|
JavaScript 前端开发
js事件队列
js事件队列
|
6天前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
19 2
|
30天前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
28 0
|
3天前
|
JavaScript 前端开发 API
探索Node.js中的异步编程模型
【9月更文挑战第11天】在JavaScript的运行环境中,Node.js因其高效的异步处理能力而备受青睐。本文将深入浅出地介绍Node.js如何处理异步操作,包括回调函数、Promises和async/await等概念,并探讨它们对后端开发的意义。
|
5天前
Nest.js 实战 (十二):优雅地使用事件发布/订阅模块 Event Emitter
这篇文章介绍了在Nest.js构建应用时,如何通过事件/发布-订阅模式使应用程序更健壮、灵活、易于扩展,并简化服务间通信。文章主要围绕@nestjs/event-emitter模块展开,这是一个基于eventemitter2库的社区模块,提供了事件发布/订阅功能,使得实现事件驱动架构变得简单。文章还介绍了如何使用该模块,包括安装依赖、初始化模块、注册EventEmitterModule、使用装饰器简化监听等。最后总结,集成@nestjs/event-emitter模块可以提升应用程序的事件驱动能力,构建出更为松耦合、易扩展且高度灵活的系统架构,是构建现代、响应迅速且具有高度解耦特性的Nest.
|
14天前
|
JavaScript 前端开发
JavaScript 与 DOM 交互
【9月更文挑战第01天】
16 2
|
14天前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
25 1
|
20天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
39 1
|
24天前
|
JSON JavaScript 前端开发
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
|
30天前
|
JavaScript 前端开发
js的回车事件
js的回车事件
34 3