传统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事件处理程序的更多相关文章

  1. DOM事件处理程序-事件对象-键盘事件

    事件流: 事件流--描述的是从页面中接受事件的顺序 IE  ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...

  2. javascript将DOM事件处理程序封装为event.js 出现的低级错误记录

    将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEve ...

  3. JS事件流与DOM事件处理程序

    在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...

  4. JS学习笔记(一)DOM事件和监听

    将事件绑定到元素身上的三种方法: 1.HTML事件处理程序(不推荐使用) 1 <a onclick="hide()"> 2.传统的DOM事件处理程序 即在目标DOM事件 ...

  5. JavaScript DOM事件模型

    早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...

  6. 深入理解DOM事件机制系列第二篇——事件处理程序

    × 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML ...

  7. DOM 事件流与事件处理程序

    ㈠事件流 ▶事件:是文档和浏览器窗口中发生的,特定的交互瞬间. ▶事件流:描述的是从页面中接受事件的顺序   ⑴DOM事件冒泡 定义:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后 ...

  8. IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

    IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...

  9. DOM事件

    在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...

随机推荐

  1. 所有HTTP请求参数及报文查看SERVLET【原】

    HttpRequestServlet.java 说明: 用于接受所有http形式的请求,并把接受到的request中param及getInputStream全打印出来. package king.se ...

  2. JAVA 动态代理学习记录

    打算用JAVA实现一个简单的RPC框架,看完RPC参考代码之后,感觉RPC的实现主要用到了两个方面的JAVA知识:网络通信和动态代理.因此,先补补动态代理的知识.---多看看代码中写的注释 参考:Ja ...

  3. luogu P4568 [JLOI2011]飞行路线

    传送门 看到免费次数\(k\)最多只有10,可以考虑构建\(k+1\)层的分层图,即每一层正常连边,上下两层对应点连边权为0的单向边,最后对所有层里面的\(di_t\)取\(\max\)救星了 #in ...

  4. node版本管理工具nvm安装以及使用

    curl命令安装 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash 或者 使用wg ...

  5. GET和POST有什么区别?及为什么网上多数答案都是错的(转载)

    这仅仅是我认为比较好的关于get和post区别的解答,然后把作者的一些文字踢除留下比较干的部分. 作者:南柯之石链接:http://www.cnblogs.com/nankezhishi/archiv ...

  6. idea的起步配置

    工欲善其事,必先利其器 1.安装 https://www.jetbrains.com/idea/download/#section=windows 可以选择不同平台的安装包,版本一般Ultimate, ...

  7. layer弹出层的iframe页面回调

    $("#ChoiceBank").click(function () { var width = $("#content").css("Width&q ...

  8. pl/sql Devloper 快捷键__新建sql窗口

    首先,打开PLSQL,菜单栏--->首选项----->键配置 其次,点击你要增加快捷键的选项,直接键盘上输入快捷键: 比如你要修改为CTRL+N,直接在键盘上按出CTRL+N即可. ESC ...

  9. ubuntu 14.04 安装 eclipse

    在安装 eclipse 之前必须先安装 jdk 1. 卸载默认的 jdk,以防安装出错 sudo apt-get purge openjdk* 2. 安装 jdk1.8.0_111 下载jdk1.8. ...

  10. WPF工具开发: 第三库选择

    PropertyGrid Winforms's PropertyGrid 非WPF原生支持, 需要借助WinFormHost 风格不可定制 PropertyInspectorView 算是" ...