`

js事件触发的三种写法

    博客分类:
  • js
 
阅读更多
1.
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.第三种方法

Webjx.Com

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

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

相关推荐

    事件高级用法及兼容写法

    1)事件对象:当浏览器执行事件的时候,会将所有与事件相关的内容(鼠标位置,触发的目标等)封装为一个对象,并且在触发事件的函数,在事件函数中进行传递 Event 常见属性: clientX clinetY 鼠标相对客户端的位置 ...

    JavaScript中点击事件的写法

    主要介绍了JavaScript中点击事件的写法的相关资料,其中还给大家分享js触发按钮点击功能的实现,本文介绍的非常不错,具有参考借鉴价值,需要的朋友可以参考下

    详解a标签添加onclick事件的几种方式

    这种方法在传递this等参数的时候很容易出问题,而且[removed]协议作为a的href属性的时候不仅会导致不 必要的触发[removed]事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行 javascript语句 2....

    js事件监听器用法实例详解

    1、当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象,每个绑定的事件都会被...

    中文输入法不触发onkeyup事件的解决办法

    这两天做一个需要实时监控文本框输入的功能,碰到了中文输入法无法触发onkeyup事件的恶心问题。 具体表现是这样的: 当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框...

    js事件源window.event.srcElement兼容性写法(详解)

    如下所示: &lt;... &lt;body&gt; 一个好处就是 我想让body(或其他元素内)的某些对象响应事件 就不用挨个儿去写 ...&lt;p&gt;event对象指当前触发的事件对象, window.event.srcElement是指触发事件的对象。比如你

    详解A标签中href=””的几种用法

    众所周知,a标签的最... 这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且[removed]协议作为a的href属性的时候不仅会导致不必要的触发[removed]事件,在IE里面更会使gif动画图片停止播放。W3

    JS onkeypress兼容性写法详解

    要求实现输入密码后按回车,触发后台事件。看似十分简单的需求,可是却碰到不少难题啊。 HTML内容中主要有一个密码输入文本框,还有一个按钮,用来触发后台事件。 1. TextBox文本框获得焦点后直接回车,页面会刷新。...

    JavaScript网页特效应用开发手册

    11-4 利用事件来触发 Javascnpt 第12章 Javascript的对话视窗 12-1 alerto 12-2 confirm() 12-3 prolllpt() 第13章 文件对象 13-1 属性及方法 13-2 应用技巧改变背景颜色 第14章 浏览器的信息 14-1 属性及方法 14-2 ...

    eventsource-polyfill.js

    为IE浏览器添加EventSource兼容性支持。为IE浏览器添加EventSource兼容性支持。

    小程序的事件介绍

    同时在当前页面对应的 .js 文件中的 Page 构造器内定义对应的事件处理函数 tapName,如果没有对应的函数,触发事件时会报错。当用户点击该 button 区域时,达到触发条件生成事件 tap,该事件处理函数 tapName

    ymprompt消息提示组件4.0【js插件弹出框美化版】

    如:&lt;script type="text/javascript" src="ymPrompt.js"&gt;&lt;/script&gt; 2、在页面中引入对应的皮肤文件的CSS,如: 3、自定义组件的默认配置信息(此步骤可选,该方法可以在任意时间调用) 页面的js中通过ymPrompt....

    a标签href属性和onclick事件的比较介绍

    首先说一下, href属性 和 onclick事件 的执行顺序,当鼠标点击a标签的时候会先执行 onclick事件, 然后才是 href 属性下的动作(页面跳转,或 javascript 伪链接),如果不想执行href 属性下的动作执行,onclick ...

    精通javascript

    • 9.9.htm 自动触发事件 • 9.9.htm 直接在表单上调用事件 • 9.11.htm attachEvent()方法 • 9.12.htm 事件流测试 • 9.13.htm DOM2 事件模型基本语法 • 9.14....

    原生JavaScript实现Tooltip浮动提示框特效

    使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化、事件绑定、事件冒泡等技巧和知识。 特效四个关键点: 显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示出来 隐藏:鼠标移开时,ToolTip...

    JS表单提交验证、input(type=number) 去三角 刷新验证码

    进行表单的提交才会触发form的onSubmit事件,如果是通过button的onclick事件进行表单提交则不会触发form的onSubmit事件 2、 onSubmit事件的正确写法是:&lt;form action="" method="post" onsubmit="return check...

    vuex直接赋值的三种方法总结

    我们在编写vuex代码过程中,觉得在a.vue的模板里面写入例如 &lt;p&gt;{{$store.state.num}}很麻烦,我们希望直接就写成{{num}},我们应该怎么写,vue给出三种固定写法,大家理解之后基本照抄,稍做改动即可 第一种方法 通过...

    表单验证框架使用及说明

    //触发的事件 validationEventTriggers:"keyup blur", inlineValidation: true,//是否即时验证,false为提交表单时验证,默认true success : false,//为true时即使有不符合的也提交表单,false表示只有全部...

    JQuery onload、ready概念介绍及使用方法

    jS事件触发的方法,可以在ready 里面加载; 用jQ的人很多人都是这么开始写脚本的: 通常的写法 代码如下: $(function(){ // do something }); 其实这个就是jq ready()的简写,他等价于: 代码如下: $(document)....

Global site tag (gtag.js) - Google Analytics