HTML DOM addEventListener() 方法示例

简介: HTML DOM addEventListener()方法示例.pdf  n  前言 作为后台程序猿,发现前端JS也是蛮有趣的,因为要弄懂一段微信支付提供的使用示例代码,学习过程中顺序记录了此文。

img_e25d4fb2f8de1caf41a735ec53088516.pngHTML DOM addEventListener()方法示例.pdf 

n  前言

作为后台程序猿,发现前端JS也是蛮有趣的,因为要弄懂一段微信支付提供的使用示例代码,学习过程中顺序记录了此文。

n  页面效果


n  addEventListener函数说明

3个参数:

参数名

是否可选

参数说明

event

必须

字符串,指定事件名。注意不要使用“on”前缀。例如使用“click“,而不是使用“onclick”。所有HTML DOM Event对象可参考:http://www.w3cschool.cc/jsref/dom-obj-event.html

function

必须

指定要事件触发时执行的函数。

useCapture

可选

布尔值,指定事件是否在捕获或冒泡阶段执行。

n  HTML代码

   

       

用户点击后使用 addEventListener() 方法来执行函数。

        button id="myBtn">点我

       

demo

">

       

            document.getElementById("myBtn").addEventListener("click", myFunction);

 

            function myFunction()

            {

                document.getElementById("demo").innerHTML = "Hello World";

            }

       

   

相关文章
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
599 2
|
缓存 编解码 JavaScript
DOM 和 BOM 在项目中应用时的性能优化方法
【10月更文挑战第19天】总之,优化 DOM 和 BOM 的性能需要综合考虑多个方面,通过合理的设计和技术手段,提升项目的运行效率和用户体验。在实际开发中,要不断地进行性能优化实践,以适应不断变化的需求和技术发展。
410 63
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
开发者 CDN
阿里云CDN边缘脚本示例实现/?p123重定向/p/123.html
本文介绍了如何通过EdgeScript实现URL重定向,将`http://www.example.com/?p123`重定向到`http://www.example.com/p/123.html`。使用捕获请求URI中的参数并进行重写,具体代码和内置变量参考阿里云CDN开发者文档。示例代码展示了关键的实现步骤。
373 8
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
1147 5
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
469 1