传统DOM事件处理程序
传统DOM事件处理程序与比HTML事件处理程序相比，优点：可以将HTML和JS脚本分离。
它的操作形式如下 ：
<body>
<div>传统DOM事件处理程序与比HTML事件处理程序相比，优点：可以将HTML和JS脚本分离。</div>
<button id="an">按钮</button>
<script>
var elbtn=document.getElementById("an"); /**
* 对象有属性、方法、事件
* 事件->方法->属性，事件会触发方法，方法会改变属性
*/
//将方法赋值给事件
elbtn.onclick=ty;
function ty() {
alert("这是传统DOM事件处理程序");
}
</script>
</body>
上面的例子是将一个无参数函数赋值给事件，下面演示如何将一个带参数的函数赋值给事件。
<body>
<div>传统DOM事件处理程序</div>
<button id="an">按钮</button>
<script>
var elbtn=document.getElementById("an");
//将带参数的函数赋值给事件，需要一个匿名函数来封装。
elbtn.onclick=function () {say("JavaScript");};
function say(mingzi) {
alert("你好，"+mingzi+"!");
}
</script>
</body>
传统DOM事件处理程序的更多相关文章
- DOM事件处理程序-事件对象-键盘事件
事件流: 事件流--描述的是从页面中接受事件的顺序 IE ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...
- javascript将DOM事件处理程序封装为event.js 出现的低级错误记录
将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEve ...
- JS事件流与DOM事件处理程序
在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...
- JS学习笔记（一）DOM事件和监听
将事件绑定到元素身上的三种方法: 1.HTML事件处理程序(不推荐使用) 1 <a onclick="hide()"> 2.传统的DOM事件处理程序 即在目标DOM事件 ...
- JavaScript DOM事件模型
早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...
- 深入理解DOM事件机制系列第二篇——事件处理程序
× 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML ...
- DOM 事件流与事件处理程序
㈠事件流 ▶事件:是文档和浏览器窗口中发生的,特定的交互瞬间. ▶事件流:描述的是从页面中接受事件的顺序 ⑴DOM事件冒泡 定义:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后 ...
- IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素
IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...
- DOM事件
在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...
随机推荐
- scala基本语法和单词统计
scala 基本语法 1.声明变量 (1)val i = 1 使用val声明的变量值是不可变的,相当于java里final修饰的变量,推荐使用. (2)var i = "hello" ...
- Gym - 100269F Flight Boarding Optimization(dp+树状数组)
原题链接 题意: 现在有n个人,s个位置和你可以划分长k个区域你可以把s个位置划分成k个区域,这样每个人坐下你的代价是该区域内,在你之前比你小的人的数量问你怎么划分这s个位置(当然,每个区域必须是连续 ...
- 去除inline-block出现间距的几种方法
display:inline-block,简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现,之后的内联对象会排列在同一行 比如两个input,默认中间会产生一些间距 &l ...
- VS新建项目工具箱图标丢失问题
(1)在电脑里搜索*.tbd文件(2)建一个项目,把需要的工具箱图标加载上,退出 VS. (3)复制一份toolbox.tbd,重命名为toolbox_reset.tbd 然后以后新建项目就可以了.这 ...
- 汉化DotNetBar中控件的系统文本
作者:ComponentCN 出处:www.componentcn.com 2011年11月02日 阅读: DotNetBar很多子控件的系统文本.提示信息等都是可以本地化的,可以转化为多种语言,控件 ...
- linux系统中查看己设置iptables规则
1.iptables -L 查看filter表的iptables规则,包括所有的链.filter表包含INPUT.OUTPUT.FORWARD三个规则链. 说明:-L是--list的简写,作用是列出规 ...
- 2.SpringBoot HelloWorld详解
1.POM文件 父项目 <parent> <groupId>org.springframework.boot</groupId> <artifactId> ...
- Ubuntu18.04下vim的tab缩进设置为4个空格
在/etc/vim/vimrc最后添加如下内容 set ts = 4 set exbandtab set autoindent
- 表格控件QTableWidget
搭配QTableWidgetItem使用 样式: import sys from PyQt5.QtCore import Qt from PyQt5.QtWidgets import QApplica ...
- 第16月第9天 opengl glCltDispatchTable
1.glCltDispatchTable typedef struct _GLTEBINFO { // glCltDispatchTable must be the first field for t ...