Javascript事件处理代码的三种写法

2016-02-20 00:45 3 1 收藏

今天图老师小编要向大家分享个Javascript事件处理代码的三种写法教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

1.作为HTML属性值的事件处理程序

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)


 HTML代码
input name="btn" type="button" id="btn" value="按钮" onclick="alert('mzwu.com');" /
 


2.作为JavaScript属性的事件处理程序


 HTML代码
input name="btn" type="button" id="btn" value="按钮"  /
script language="javascript"
document.getElementById("btn").onclick = function(){alert("mzwu.com");}
/script
 


说明:可能受第一种方法的误导,你会觉得应该写成:document.getElementById("btn").onclick() = "alert('mzwu.com');",这样写是错误的!其实第一种方法隐式的创建了一个函数,使用下边代码可以说明这一点,因为它检测出HTML属性值其实是一个函数:


 HTML代码
input name="btn" type="button" id="btn" value="按钮" onclick="alert(typeof(this.onclick));" /
 


上边是用直接量来创建函数,改成用function()语句的写法:


 HTML代码
input name="btn" type="button" id="btn" value="按钮"  /
script language="javascript"
function e()
{
 alert("mzwu.com");
}
document.getElementById("btn").onclick = e;
/script
 


由此我们可引申出第三种方法。

3.第三种方法


 HTML代码
input name="btn" type="button" id="btn" value="按钮"  /
script language="javascript"
function document.all.btn.onclick()
{
 alert("mzwu.com");
}
/script
 

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)


说明:诸如此类的方法还有function document.onclick(){},但这种方法在IE、FF中测试只有IE下可行,再改成function document.getElementById("btn").onclick(){}在IE、FF下都不行了,提示缺少标识符,其实这也不难解释,因为JavaScript标识符中本来就不允许出现点号,用document.getElementById("btn").onclick做标识符显然是错误的,但document.all.btn.onclick却又可以实在有点让人费解。

来源:https://www.tulaoshi.com/n/20160220/1632471.html

延伸阅读
标签: 疾病预防
开水烫伤怎么处理 三种烫伤程度的处理方法 开水,相信大家都知道是非常烫的,然而只要开水溅到皮肤上就会导致我们烫伤。那当我们被开水烫伤的时候应该怎么处理呢?开水烫伤又应该怎么办呢?今天图老师小编就来为大家一一介绍一下。想知道的朋友不妨就来看一下吧。 开水烫伤怎么处理 开水烫伤应该怎么处理呢?因为...
标签: Web开发
实现类的公有成员 前面定义的任何类成员都属于公有成员的范畴,该类的任何实例都对外公开这些属性和方法。 实现类的私有成员 私有成员即在类的内部实现中可以共享的成员,不对外公开。JavaScript中并没有特殊的机制来定义私有成员,但可以用一些技巧来实现这个功能。 这个技巧主要是通过变量的作用域性质来实现的,在JavaS...
标签: Web开发
事件处理 概述 事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去。事件的处理程序...
标签: Web开发
如果你有很多关联的CSS文件要一起加载,或者想动态的加载不同的CSS文件,那么下面的方法你一定对你有帮助。 //第一种:一般用在外部CSS文件中加载必须的文件 @importurl(style.css); /*只能用在CSS文件中或者style标签中*/ //第二种:简单的在页面中加载一个外部CSS文件 document.createStyleSheet(cssFile); //第三种:用createElement...
标签: Web开发
单击事件onClick 当用户单击鼠标按钮时,产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset buttons(重要按钮) submit buttons(提交按钮) 一切文本和图片 例:可通过下列按钮激活alert(): html head /he...

经验教程

552

收藏

83
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部