DOM操作--添加事件处理程序
来源:互联网 发布:阳光512控台编程光束灯 编辑:程序博客网 时间:2024/06/13 10:00
给DOM节点增加事件处理程序一般有以下3种方法
1:通过节点属性显式声明
如以下代码所示,直接在HTML中,显式地为按钮绑定了click事件,当该按钮有用户点击行为时,便会触发myClickFunc方法
<button id="hello" onclick="myFunc ()">点我试试</button>
myFunc 的定义在js中完成:
<pre name="code" class="javascript"> <script type="text/javascript"> var myFunc=function(evt){ console.log("hello ,feifei"); }</script>
2、通过节点属性动态绑定
这种事件处理程序的绑定,属于第一种的变形,将一个函数赋值给一个事件处理程序属性。
<button id="hello" >点我试试</button>
通过DOM操作进行绑定:
<script type="text/javascript"> var myFunc=function(evt){ console.log("hello ,feifei"); } document.getElementById ('hello').onclick=myFunc ; </script>
3、通过事件监听的方式
通过addEventListener,接受3个参数,要处理的事件名,作为事件处理程序的函数,一个布尔值。布尔值的参数如果为true, 表示在捕获阶段调用事件处理程序,如果为false,表示在冒泡阶段调用事件处理程序。
<button id="hello" >点我试试</button>
<script type="text/javascript"> var myFunc=function(evt){ console.log("hello ,feifei"); } document.getElementById ('hello').addEventListener ('click',myFunc); </script>
三种方法的优缺点
1、通过节点属性显式声明:存在时差问题,因为用户可能在HTML元素出现的时候就在页面触发相应的事件,但当时事件处理程序可能不具备执行条件;这样拓展事件处理的作用域链在不同的浏览器中会导致不同的结果;HTML与JavaScript代码紧密耦合,违背了HTML与JavaScript分离的原则。
2、通过节点属性动态绑定:一次只能添加一个事件处理程序
3、通过事件监听的方式:可以添加多个事件处理程序,是推荐用法
1 0
- DOM操作--添加事件处理程序
- DOM事件处理程序
- Dom事件处理程序
- DOM事件处理程序
- DOM事件处理程序
- DOM事件处理程序
- DOM事件处理程序
- JS DOM事件处理程序
- DOM事件处理程序总结
- DOM中为事件添加事件处理程序的几种方式以及跨浏览器方式
- DOM高级程序设计笔记/事件处理程序Function.prototype添加getCallBack事件冒泡捕获
- js添加事件处理程序
- 给事件添加处理程序
- JavaScript DOM 事件处理程序总结
- DOM事件流、事件处理程序以及事件对象
- DOM事件(事件流、事件处理程序)
- HTML DOM 事件,可用于定义js在HTML元素中不同操作的处理程序
- 给dom元素添加事件处理的两种方法
- Objective-C语言——NSDictionary不可变字典
- TCP/IP学习之简介
- 浏览器历史
- Matlab绘图-很详细,很全面(包含各种标示符的输入方法)
- 【VBA研究】定时关闭MsgBox及相关未公开的API
- DOM操作--添加事件处理程序
- java 中容易混淆的知识点
- Nuget下载好Sqlite.EF6后出现运行报错处理办法
- swift学习记录(String)
- java集合——队列和双端队列+优先级队列
- 浅谈 JS 创建对象的 8 种模式
- JavaScript学习过程中小知识记录
- TCP,IP详解,卷一:协议学习笔记之第六章 ICMP: Internet控制报文协议
- OC_03