传统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. POJ - 1584 A Round Peg in a Ground Hole（判断凸多边形，点到线段距离，点在多边形内）

    http://poj.org/problem?id=1584 题意 按照顺时针或逆时针方向输入一个n边形的顶点坐标集,先判断这个n边形是否为凸包. 再给定一个圆形(圆心坐标和半径),判断这个圆是否完全 ...

  2. Redis模块学习笔记（一）RediSearch简单使用

    说明:安装的Redis服务器必须为 4.0 以上版本,通过info命令查看 > INFO redis_version: 一.安装 RediSearch git clone https://git ...

  3. python学习笔记8-邮件模块

    我们在开发程序的时候,有时候需要开发一些自动化的任务,执行完之后,将结果自动的发送一份邮件,python发送邮件使用smtplib模块,是一个标准包,直接import导入使用即可,代码如下: impo ...

  4. Jacob用法收集

    介绍 Jacob 是Java-COM Bridge的缩写,它在Java与微软的COM组件之间构建一座桥梁.使用Jacob自带的DLL动态链接库,并通过JNI的方式实现了在Java平台上对COM程序的调 ...

  5. sql工具和手工注入总结

    普通注入: 数字注入 字符注入 base64注入:和常规的方法没有说明区别,主要是解码然后编码: 如果普通注入不行,尝试大小写绕过,编码等绕过: 如果不行尝试盲注: POST注入 0x00 常用的 注 ...

  6. 电脑爱好——PE系统分区工具 分区时函数错误，报000000001错误 解决方法

    1.启动硬盘分区软件diskgenius(一般都是这个分区软件,这个PE系统自带的居多) 2.将现有的分区全部删掉 3.选择菜单栏——“硬盘”——“转换分区表类型为MBR格式”——转换完成 4.快速分 ...

  7. QMessageBox消息框

    QMessageBox提供两套接口来实现,一种是static functions(静态方法调用),另外一种 the property-base API(基于属性的API) #需要 from PyQt5 ...

  8. <hr />改变颜色

    其实,<hr />是有默认的border的,改变border颜色即可改变hr颜色. 例如: <hr style="position: relative;top: 2.3re ...

  9. 挖掘两个Integer对象的swap的内幕

    public class SwapTest { public static void main(String[] args) throws Exception { Integer a = 1, b=2 ...

  10. adboost方法（转载）

    转载链接:http://blog.csdn.net/google19890102/article/details/46376603 一.集成方法(Ensemble Method)     集成方法主要 ...