DOM0级事件处理、DOM2级事件处理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>DOM事件</title>
</head>
<body>
<!-- 此为HTML事件，因为在HTML代码中 添加了onclick代码 -->
<input type="button" value="按钮1" id="btn1" onclick="fun1()" />
<script type="text/javascript">
function fun1(){
alert("hello world!");
}
</script> <!-- 此为DOM0级事件，不在HTML代码中添加事件，通过属性添加事件 -->
<input type="button" value="按钮2" id="btn2" >
<script type="text/javascript">
//1.第一步首先获取元素
var p=document.getElementById("btn2");
//2.第二步通过属性添加时间的函数
p.onclick=function (){
alert("这是DOM0级事件");
}
//3.通过此语句可以删除事件
//p.onclick=null;//此为删除事件
</script> <!--此为DOM2级事件，同样不在HTML代码中添加时间，用函数添加事件-->
<input type="button" value="按钮3" id="btn3">
<script type="text/javascript">
//1.第一步首先获取元素
var x=document.getElementById("btn3");
//2.第二步通过创建函数
function fun3(){
alert("这是DOM2级事件");
}
//然后通过函数 ↓事件 ↓函数名 ↓ture表示按捕获事件
// false按冒泡事件，
x.addEventListener("click", fun3, false);//false兼容个浏览器
//注意时间其实为onclick，但是DOM2级不能加on，只写后面就可以了。
</script> <!--
三种事件的比较，DOM2级事件相比于HTML事件更容日后期维护
-->
</body>
</html>
DOM0级事件处理、DOM2级事件处理的更多相关文章
- DOM0级与DOM2级
定义: 0级DOM 分为2个:一是在标签内写onclick事件 二是在JS写onlicke=function(){}函数 1) <input id="myButton" t ...
- DOM0级同DOM2级
DOM0级分为两个:一是写在标签内的onclick事件: <button id="btn" onclick="alert('happy')">按钮& ...
- javaScript——DOM1级，DOM2级，DOM3级
DOM0,DOM2,DOM3事件处理方式区别:http://www.qdfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html JS中do ...
- js DOM0级事件和DOM2级事件
注册事件有两种方式,分别是DOM0级和DOM2级 DOM0级就是通过事件绑定的形式dom元素只能有(绑定)一个事件处理函数,他的特点是同一个元素绑定相同事件, 后面函数会覆盖前面的 绑定: dom.o ...
- js 中用Dom2级事件处理函数(改变样式)
下面这些客户端 javascript代码用到了事件,它给一个很重要的事件--“load" 事件注册了一个事件处理程序.同时展示了注册”click“事件处理函数更高级的一种方法 <!do ...
- 测试DOM0级事件和DOM2级事件的堆叠
1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...
- DOM0、DOM2级事件
JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1' ...
- 关于DOM事件流、DOM0级事件与DOM2级事件
一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...
- dom0级事件和dom2级事件
dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button ...
随机推荐
- Some 3D Graphics (rgl) for Classification with Splines and Logistic Regression (from The Elements of Statistical Learning)（转）
This semester I'm teaching from Hastie, Tibshirani, and Friedman's book, The Elements of Statistical ...
- FreeMarker标签
目前最流行的两种模板技术恐怕要算freemarker和velocity了,webwork2.2对两者都有不错的支持,也就是说在webwork2中你可以随意选择使用freemarker或velocity ...
- Python有哪些好用的语言翻译方法
最近有个需求,要将几万条数据从日语翻译成中文.因为数据的获取和处理用的是python代码,所以想先尝试翻译部分也用python实现. 目前网上查到的翻译方法有百度.有道云以及谷歌翻译,下面会对这三个方 ...
- JavaSE教程-01初识Java-思维导图
图片看不清楚时: 1)可以将图片另存为图片,保存在本地来查看 2)右击在新标签中打开放大查看. 分解: 1.计算机基本概念的普及 硬件 cpu.内存.硬盘等 软件 系统级软件 Windows.Linu ...
- C++抽象编程·运算符重载与友元函数
运算符重载(Operator overloading) 从我们在几个前篇的类的层次介绍中可以知道,C++可以扩展标准运算符,使其适用于新类型.这种技术称为运算符重载. 例如,字符串类重载+运算符,使其 ...
- openresty使用笔记（一）
背景介绍 游戏经过一段时间的运营,发现了原来的设计缺陷太多,所以决定重新设计架构.使用到nginx作为核心并通过lua+redis设计实现自己的负载分配方案.先看看下面这张简单的架构图吧~ 从图上看, ...
- python装饰器大详解
1.作用域 在python中,作用域分为两种:全局作用域和局部作用域. 全局作用域是定义在文件级别的变量,函数名.而局部作用域,则是定义函数内部. 关于作用域,我要理解两点:a.在全局不能访问到局部定 ...
- centOS下服务启动
nginx应该在mongodb之后启动,也可以通过chkconfig <服务名> on将服务设置为开机自启动.具体命令如下 service mysql start service memc ...
- 浅谈卷积神经网络及matlab实现
前言,好久不见,大家有没有想我啊.哈哈.今天我们来随便说说卷积神经网络. 1卷积神经网络的优点 卷积神经网络进行图像分类是深度学习关于图像处理的一个应用,卷积神经网络的优点是能够直接与图像像素进行卷积 ...
- Javascript实现Base64解码
工作中需要用到,在stackoverflow中找到的,实践证明可用. function decode_base64(s) { var e = {}, i, k, v = [], r = '', w = ...